"use client";

import { useState } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { fadeUp, fadeLeft, fadeRight } from "@/lib/variants";
import { Button } from "@/components/ui/button";

/* ── Types & data ── */
type Category = "all" | "ceremony" | "lecture" | "exhibit" | "clinic" | "storytelling";

const FILTERS: { label: string; value: Category }[] = [
  { label: "All", value: "all" },
  { label: "Ceremony", value: "ceremony" },
  { label: "Lecture", value: "lecture" },
  { label: "Exhibition", value: "exhibit" },
  { label: "Tech Clinic", value: "clinic" },
  { label: "Storytelling", value: "storytelling" },
];

type ScheduleItem = { time: string; cat: string; title: string; body: string; where: string; tag: { label: string; cls: string } };
type FutureItem = { month: string; date: string; title: string; body: string; place: string };

const DAY_ONE: ScheduleItem[] = [
  { time: "09:00", cat: "ceremony", title: "Libation & Proclamation at the Palace", body: "Opening of the inaugural Alata Kakalɔi calendar. Pouring of libation by the Mantse, and formal proclamation of the Pioneer Shield ceremony.", where: "Mantse's Palace\nForecourt", tag: { label: "Open · By Invitation", cls: "tag--terracotta" } },
  { time: "11:30", cat: "clinic", title: "Youth Tech Clinic № 1 — Connectivity Basics", body: "A working session for Osu Alata youth: networks, devices, and the practical skills that turn access into capability.", where: "Palace\nAnnex Hall", tag: { label: "RSVP · Free", cls: "tag--ochre" } },
  { time: "14:00", cat: "clinic", title: "Youth Tech Clinic № 2 — Hardware Distribution", body: "Distribution of laptops and tablets to nominated youth — a tangible step in bridging the digital divide, supported by Day-One sponsors.", where: "Palace\nAnnex Hall", tag: { label: "RSVP · Free", cls: "tag--ochre" } },
  { time: "16:00", cat: "storytelling", title: "Clan Trail Storytelling — Fireside Chats", body: "Elders host the youth in traditional clan houses along a walking trail through Osu. Stories of the migration, the sea, and the Samai.", where: "Clan Houses\n(Walking Trail)", tag: { label: "Open · Public", cls: "" } },
  { time: "19:30", cat: "ceremony", title: "Communal Supper", body: "The first day closes at the Mantse's Palace with a shared meal — guests, elders, youth, and honourees at one table.", where: "Mantse's Palace\nCourtyard", tag: { label: "By Invitation", cls: "tag--terracotta" } },
];

const DAY_TWO: ScheduleItem[] = [
  { time: "10:00", cat: "ceremony", title: "Grand Durbar of Heroes", body: "A colourful procession of chiefs and queen mothers. Drums, kente, and the formal arrival of the Mantse in state.", where: "Mantse's Palace\nGrand Court", tag: { label: "Open · Public", cls: "" } },
  { time: "13:00", cat: "exhibit", title: "Tech-Heritage Exhibition Opens", body: "A gallery showcasing traditional fishing tools alongside early internet artifacts — the evolution of \"connection\" rendered as object lessons.", where: "Palace\nExhibition Wing", tag: { label: "Free Entry", cls: "tag--ochre" } },
  { time: "15:30", cat: "lecture", title: "The Hero's Lecture — Prof. N. N. Quaynor", body: "Keynote address: \"Leveraging Heritage for the Future.\" The Architect of the African Internet on what Osu Alata's tradition has to teach the next generation.", where: "Palace\nGrand Hall", tag: { label: "Livestreamed", cls: "tag--indigo" } },
  { time: "18:00", cat: "ceremony", title: "Award Ceremony — The Pioneer Shield", body: "The presentation of the inaugural Alata Kakalɔi Award to Prof. Nii Narku Quaynor by the Osu Alata Mantse.", where: "Palace\nGrand Hall", tag: { label: "By Invitation", cls: "tag--terracotta" } },
  { time: "20:30", cat: "ceremony", title: "Closing Reception", body: "Music, palm wine, and farewells. The first edition concludes — the Shield begins its history.", where: "Palace\nGarden Terrace", tag: { label: "By Invitation", cls: "tag--terracotta" } },
];

const FUTURE: FutureItem[] = [
  { month: "May · MMXXVI", date: "14", title: "Tech-Heritage Exhibition — Travelling Edition", body: "The fishing-tool / early-internet gallery opens at the University of Cape Coast for a month-long residency.", place: "Cape Coast, Ghana\nUCC Computer Science Dept." },
  { month: "Jun · MMXXVI", date: "07", title: "Quaynor Lecture Series — № 1", body: "Inaugural standalone lecture: “The Information Superhighway, fifteen years on.” Streamed on YouTube and Facebook.", place: "Mantse's Palace\nGrand Hall" },
  { month: "Aug · MMXXVI", date: "22", title: "Youth Tech Clinic — Coastal Schools Tour", body: "A six-school tour of the Osu coastal corridor — connectivity, hardware, and starter curriculum.", place: "Greater Accra\nSix schools" },
  { month: "Oct · MMXXVI", date: "11", title: "Samai Symposium", body: "A two-day academic gathering on the Ga Samai — bringing together linguists, designers, and community elders.", place: "Mantse's Palace\nLecture Hall" },
  { month: "Dec · MMXXVI", date: "15", title: "Pioneer Nominations Open · Vol. II", body: "The Osu Alata Council opens nominations for the second Pioneer Shield. Public submissions accepted via the Contact form.", place: "Online\n+ Palace Office" },
  { month: "Mar · MMXXVII", date: "28", title: "Vol. II — The Second Durbar", body: "The second annual Alata Kakalɔi durbar. Honouree to be announced after Council deliberations in February.", place: "Mantse's Palace\nTwo-day Programme" },
];

/* ── Card components ── */
type ScheduleRowProps = ScheduleItem & { index: number };
function ScheduleRow({ time, title, body, where, tag, index }: ScheduleRowProps) {
  return (
    <motion.div
      className="flex flex-col gap-3 py-7 border-b border-[rgba(28,22,17,0.18)] transition-colors duration-150 sm:grid sm:grid-cols-[100px_1fr] sm:gap-6 lg:grid-cols-[100px_1fr_220px_140px] lg:gap-8 lg:items-start"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-20px" }}
      custom={index * 0.06}
    >
      <time className="font-mono text-[13px] tracking-[0.1em] text-terracotta pt-1.5 block">{time}</time>
      <div>
        <h3 className="text-[26px] mb-1.5 leading-[1.1]">{title}</h3>
        <p className="text-[14px] m-0 text-ink-soft max-w-[50ch]">{body}</p>
      </div>
      <span className="font-mono text-[11px] tracking-[0.14em] uppercase text-design-muted block lg:pt-2">
        {where.split("\n").map((l, j) => <span key={j}>{l}<br /></span>)}
      </span>
      <div className="lg:text-right">
        <span className={`tag ${tag.cls}`}>{tag.label}</span>
      </div>
    </motion.div>
  );
}

type FutureEventRowProps = FutureItem & { index: number };
function FutureEventRow({ month, date, title, body, place, index }: FutureEventRowProps) {
  return (
    <motion.div
      className="flex flex-col gap-3 py-7 border-b border-[rgba(245,237,224,0.18)] transition-colors duration-150 sm:grid sm:grid-cols-[100px_1fr] sm:gap-6 lg:grid-cols-[140px_80px_1fr_200px_120px] lg:gap-8 lg:items-center"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-20px" }}
      custom={index * 0.06}
    >
      <span className="font-mono text-[11px] tracking-[0.18em] uppercase text-ochre">{month}</span>
      <span className="font-heading text-[36px] leading-none text-cream">{date}</span>
      <div>
        <h3 className="text-[22px] mb-1 text-cream">{title}</h3>
        <p className="text-[13px] m-0" style={{ color: "rgba(245,237,224,0.65)" }}>{body}</p>
      </div>
      <span className="font-mono text-[11px] tracking-[0.14em] uppercase" style={{ color: "rgba(245,237,224,0.6)" }}>
        {place.split("\n").map((l, j) => <span key={j}>{l}<br /></span>)}
      </span>
      <a
        href="#"
        className="font-mono text-[11px] tracking-[0.18em] uppercase text-ochre [border:1px_solid_var(--ochre)] py-2 px-3 text-center no-underline inline-block transition-colors duration-150 hover:bg-ochre hover:text-ink"
      >
        + Add to cal
      </a>
    </motion.div>
  );
}

/* ── Page ── */
export default function EventsPage() {
  const [activeFilter, setActiveFilter] = useState<Category>("all");

  const visible = (cat: string) => activeFilter === "all" || activeFilter === cat;

  return (
    <>
      {/* HERO */}
      <section className="bg-paper py-20 pb-14 border-b border-rule">
        <div className="wrap grid grid-cols-1 gap-10 items-end lg:grid-cols-[1.3fr_1fr] lg:gap-14">
          <motion.div variants={fadeLeft} initial="hidden" animate="show" custom={0.1}>
            <div className="eyebrow mb-[18px]">Kakalɔi Agbi · The Programme</div>
            <h1 className="mb-4" style={{ fontSize: "clamp(54px, 7vw, 100px)" }}>The Calendar.</h1>
            <p className="lede">
              A detailed two-day schedule for the inaugural celebration — followed by the wider Osu Alata calendar
              of durbar, lecture, exhibition, and tech clinic dates.
            </p>
            <div className="flex gap-3 flex-wrap mt-7">
              <Button variant="secondary" asChild><a href="#day-one">Day One →</a></Button>
              <Button variant="outline" asChild><a href="#day-two">Day Two →</a></Button>
              <Button variant="outline" asChild><a href="#future">Calendar →</a></Button>
            </div>
          </motion.div>
          <motion.dl
            className="grid grid-cols-2 m-0"
            style={{ gap: "1px", background: "rgba(28,22,17,0.42)", border: "1px solid rgba(28,22,17,0.42)" }}
            variants={fadeRight}
            initial="hidden"
            animate="show"
            custom={0.2}
          >
            {[
              { dt: "Edition", dd: "Vol. I" },
              { dt: "Days", dd: "02" },
              { dt: "Open Events", dd: "14" },
              { dt: "Livestreamed", dd: "06" },
            ].map(({ dt, dd }) => (
              <div key={dt} className="bg-paper p-[22px]">
                <dt className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted mb-2">{dt}</dt>
                <dd className="m-0 font-heading text-[30px] leading-none">{dd}</dd>
              </div>
            ))}
          </motion.dl>
        </div>
      </section>

      {/* FILTERS */}
      <div className="bg-cream-deep border-b border-rule py-[22px]">
        <div className="wrap flex gap-3 flex-wrap items-center">
          <span className="font-mono text-[11px] tracking-[0.2em] uppercase text-design-muted mr-3">Filter by</span>
          {FILTERS.map((f) => (
            <button
              key={f.value}
              className={`chip${activeFilter === f.value ? " is-active" : ""}`}
              onClick={() => setActiveFilter(f.value)}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>

      {/* DAY ONE */}
      <section className="py-24" id="day-one">
        <div className="wrap">
          <div className="grid grid-cols-1 gap-4 items-end pb-7 mb-10 sm:grid-cols-2 sm:gap-8" style={{ borderBottom: "3px double var(--rule-color)" }}>
            <h3 className="font-heading text-terracotta m-0" style={{ fontSize: "clamp(80px, 14vw, 200px)", lineHeight: 0.85 }}>01</h3>
            <div className="text-left sm:text-right">
              <span className="eyebrow text-terracotta block mb-2">Day One</span>
              <h2 className="m-0">The Roots<br />&amp; The Calling.</h2>
              <p className="mt-4">
                Focus on youth and heritage — libation at the Palace, fireside chats in clan houses, and tech
                clinics for the next generation of Osu Alata builders.
              </p>
            </div>
          </div>
          <div className="border-t border-[rgba(28,22,17,0.42)]">
            {DAY_ONE.map((row, i) =>
              visible(row.cat) ? <ScheduleRow key={i} {...row} index={i} /> : null
            )}
          </div>
        </div>
      </section>

      {/* DAY TWO */}
      <section className="py-24 bg-paper border-t border-rule border-b border-rule" id="day-two">
        <div className="wrap">
          <div className="grid grid-cols-1 gap-4 items-end pb-7 mb-10 sm:grid-cols-2 sm:gap-8" style={{ borderBottom: "3px double var(--rule-color)" }}>
            <h3 className="font-heading text-terracotta m-0" style={{ fontSize: "clamp(80px, 14vw, 200px)", lineHeight: 0.85 }}>02</h3>
            <div className="text-left sm:text-right">
              <span className="eyebrow text-terracotta block mb-2">Day Two</span>
              <h2 className="m-0">The Hero&apos;s<br />Journey.</h2>
              <p className="mt-4">
                The Grand Durbar of Heroes, a Tech-Heritage Exhibition, and the Hero&apos;s Lecture — culminating
                in the presentation of the Pioneer Shield.
              </p>
            </div>
          </div>
          <div className="border-t border-[rgba(28,22,17,0.42)]">
            {DAY_TWO.map((row, i) =>
              visible(row.cat) ? <ScheduleRow key={i} {...row} index={i} /> : null
            )}
          </div>
        </div>
      </section>

      {/* FUTURE CALENDAR */}
      <section className="py-[110px] bg-ink text-cream" id="future">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow text-ochre">The Wider Calendar</div>
              <h2 className="m-0 text-cream">Beyond the inaugural durbar.</h2>
            </div>
            <span className="font-mono text-[11px] tracking-[0.24em] uppercase text-ochre">Forthcoming · MMXXVI–MMXXVII</span>
          </div>
          <p className="mt-4 max-w-[60ch]" style={{ color: "rgba(245,237,224,0.78)" }}>
            A rolling calendar of Osu Alata Kakalɔi events: lectures, exhibitions, youth clinics, and the next Grand Durbar.
          </p>
          <div className="mt-12 border-t border-[rgba(245,237,224,0.2)]">
            {FUTURE.map((row, i) => (
              <FutureEventRow key={i} {...row} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* VENUE */}
      <section className="py-[110px]">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-12">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">Venue</div>
            <h2>Osu Alata Mantse&apos;s Palace.</h2>
            <p>
              The seat of Alata authority and the home of the Pioneer Shield ceremony. All inaugural events take
              place at the Palace and along the Clan Trail through Osu.
            </p>
            <p>
              <strong>Address.</strong> Osu Alata Mantse&apos;s Palace, Accra, Ghana.<br />
              <strong>Public transit.</strong> Osu junction stops on Cantonments Road; ten-minute walk.<br />
              <strong>Accessibility.</strong> Step-free access at the East Gate; reserved seating on request.
            </p>
            <Button asChild>
              <Link href="/contact">Plan your visit →</Link>
            </Button>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              style={{ aspectRatio: "4/3" }}
              src="https://images.unsplash.com/photo-1580500550469-4d8c1ddff8c4?auto=format&fit=crop&w=900&q=70"
              alt="Palace exterior"
            />
            <figcaption className="figure__cap">
              <span>Mantse&apos;s Palace · Osu Alata</span>
              <span>Accra · Ghana</span>
            </figcaption>
          </motion.figure>
        </div>
      </section>
    </>
  );
}