"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";


type Virtue = "all" | "loyalty" | "respect" | "responsibility" | "resilience";

const FILTERS: { label: string; value: Virtue }[] = [
  { label: "All", value: "all" },
  { label: "Loyalty", value: "loyalty" },
  { label: "Respect", value: "respect" },
  { label: "Responsibility", value: "responsibility" },
  { label: "Resilience", value: "resilience" },
];

interface Plate {
  id: string;
  num: string;
  cat: Virtue;
  colSpan: string;
  feature?: boolean;
  name: string;
  nameEm?: string;
  teach: string;
  desc: string;
  foot: [string, string];
  svg: React.ReactNode;
  svgWide?: boolean;
}

const PLATES: Plate[] = [
  {
    id: "antswele", num: "№ 01", cat: "loyalty", colSpan: "col-span-12 md:col-span-6", feature: true,
    name: "Antswele", nameEm: "· The Ladder", teach: "Loyalty & Communal Support",
    desc: "No single rung carries weight. Each must hold for the next to be useful — and the climber owes their height to every rung beneath them. The ladder is the original community organisation chart.",
    foot: ["Plate 01", "Loyalty"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" aria-hidden="true">
        <line x1="30" y1="10" x2="30" y2="90" /><line x1="70" y1="10" x2="70" y2="90" />
        <line x1="30" y1="22" x2="70" y2="22" /><line x1="30" y1="36" x2="70" y2="36" />
        <line x1="30" y1="50" x2="70" y2="50" /><line x1="30" y1="64" x2="70" y2="64" />
        <line x1="30" y1="78" x2="70" y2="78" />
      </svg>
    ),
  },
  {
    id: "atoobi", num: "№ 02", cat: "respect", colSpan: "col-span-6 md:col-span-3",
    name: "Atoobi", teach: "Respect for All",
    desc: "The bird teaches that even the small must be heard.",
    foot: ["Plate 02", "Respect"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round" aria-hidden="true">
        <path d="M16 62 Q 32 36, 54 46 Q 70 52, 86 42 L 78 52 L 88 54 L 74 62 Q 58 72, 42 72 Q 26 72, 16 62 Z" />
        <circle cx="78" cy="46" r="2" fill="currentColor" />
        <path d="M40 72 L 36 88 M 50 74 L 50 90 M 60 72 L 64 88" />
      </svg>
    ),
  },
  {
    id: "samfee", num: "№ 03", cat: "responsibility", colSpan: "col-span-6 md:col-span-3",
    name: "Samfee", teach: "Access · Responsibility",
    desc: "The key opens the storehouse — but obliges the holder to keep it well.",
    foot: ["Plate 03", "Responsibility"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
        <circle cx="30" cy="50" r="14" /><circle cx="30" cy="50" r="5" fill="currentColor" />
        <line x1="44" y1="50" x2="88" y2="50" /><line x1="74" y1="50" x2="74" y2="64" /><line x1="82" y1="50" x2="82" y2="60" />
      </svg>
    ),
  },
  {
    id: "yoo", num: "№ 04", cat: "resilience", colSpan: "col-span-6 md:col-span-4",
    name: "Yoo · The Net", teach: "Patience & Patterned Work",
    desc: "The net is woven knot by knot — and the harvest depends on the patience of the weaver. The mesh that holds the catch is the same mesh that lets the small fish through.",
    foot: ["Plate 04", "Resilience"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
        <path d="M10 30 L 90 30 M 10 50 L 90 50 M 10 70 L 90 70" />
        <path d="M30 10 L 30 90 M 50 10 L 50 90 M 70 10 L 70 90" />
        <path d="M10 30 Q 30 20, 50 30 T 90 30" strokeWidth="2" />
      </svg>
    ),
  },
  {
    id: "lele", num: "№ 05", cat: "resilience", colSpan: "col-span-6 md:col-span-4",
    name: "Lele · The Canoe", teach: "Resourcefulness on Open Water",
    desc: "A vessel small enough for one and trusted enough for many. The canoe carries the harvest home — and reminds the harvester that no journey is undertaken alone.",
    foot: ["Plate 05", "Resilience"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <path d="M14 60 Q 50 76, 86 60 L 78 70 Q 50 80, 22 70 Z" fill="currentColor" />
        <line x1="50" y1="60" x2="50" y2="22" />
        <path d="M50 22 L 78 32 L 50 36 Z" fill="currentColor" />
        <path d="M14 86 Q 50 92, 86 86" strokeDasharray="3 3" />
      </svg>
    ),
  },
  {
    id: "adesa", num: "№ 06", cat: "respect", colSpan: "col-span-6 md:col-span-4",
    name: "Adesa · The Eye-Sun", teach: "Witness · Public Memory",
    desc: "What the sun sees, the community remembers. A reminder that nothing done in the day disappears — that recognition, like criticism, is owed in time.",
    foot: ["Plate 06", "Respect"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <circle cx="50" cy="50" r="18" /><circle cx="50" cy="50" r="6" fill="currentColor" />
        <g strokeWidth="2">
          <line x1="50" y1="10" x2="50" y2="22" /><line x1="50" y1="78" x2="50" y2="90" />
          <line x1="10" y1="50" x2="22" y2="50" /><line x1="78" y1="50" x2="90" y2="50" />
          <line x1="22" y1="22" x2="30" y2="30" /><line x1="70" y1="70" x2="78" y2="78" />
          <line x1="78" y1="22" x2="70" y2="30" /><line x1="22" y1="78" x2="30" y2="70" />
        </g>
      </svg>
    ),
  },
  {
    id: "tso", num: "№ 07", cat: "loyalty", colSpan: "col-span-6 md:col-span-3",
    name: "Tso", teach: "Lineage",
    desc: "The tree stands because of its roots, and grows because of its rings.",
    foot: ["Plate 07", "Loyalty"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <line x1="50" y1="90" x2="50" y2="40" />
        <path d="M50 40 Q 30 20, 14 30 M 50 40 Q 70 20, 86 30 M 50 50 Q 26 50, 18 60 M 50 50 Q 74 50, 82 60" />
        <path d="M40 90 Q 50 70, 60 90" fill="currentColor" opacity="0.2" />
      </svg>
    ),
  },
  {
    id: "pati", num: "№ 08", cat: "loyalty", colSpan: "col-span-6 md:col-span-3",
    name: "Pati", teach: "The Call",
    desc: "The drum gathers — the same beat finds every house in time.",
    foot: ["Plate 08", "Loyalty"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <ellipse cx="50" cy="28" rx="24" ry="6" />
        <line x1="26" y1="28" x2="34" y2="78" /><line x1="74" y1="28" x2="66" y2="78" />
        <ellipse cx="50" cy="78" rx="16" ry="4" />
        <path d="M30 38 L 70 42 M 32 50 L 68 54 M 34 62 L 66 66" strokeDasharray="2 2" />
      </svg>
    ),
  },
  {
    id: "niino", num: "№ 09", cat: "responsibility", colSpan: "col-span-12 md:col-span-6", feature: true,
    name: "Niinɔ", nameEm: "· Handing-On", teach: "Inheritance · The Honour Owed in Time",
    desc: "Two hands meeting at the wrist — the central image of the Alata Kakalɔi Award itself. What one generation has built is what the next is asked to carry. The award is not a gift; it is a transfer of duty.",
    foot: ["Plate 09", "Responsibility"],
    svg: (
      <svg viewBox="0 0 140 100" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round" aria-hidden="true">
        <path d="M10 60 Q 18 50, 30 50 L 50 50 Q 56 40, 64 44 L 64 56 L 70 56 L 70 76 L 30 76 Q 14 76, 10 60 Z" />
        <path d="M130 60 Q 122 50, 110 50 L 90 50 Q 84 40, 76 44 L 76 56 L 70 56 L 70 76 L 110 76 Q 126 76, 130 60 Z" />
        <line x1="64" y1="50" x2="76" y2="50" />
      </svg>
    ),
  },
  {
    id: "ngulami", num: "№ 10", cat: "resilience", colSpan: "col-span-12 md:col-span-6",
    name: "Ŋulami · The Guiding Star", teach: "Direction · The Hero's Sign",
    desc: "Long before maps, the star was the chart. The Samai of the navigator — and the closest visual ancestor of the digital node at the centre of the Pioneer Shield's medallion.",
    foot: ["Plate 10", "Resilience"],
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <path d="M50 12 L 56 40 L 84 44 L 62 60 L 70 88 L 50 72 L 30 88 L 38 60 L 16 44 L 44 40 Z" />
        <circle cx="50" cy="50" r="4" fill="currentColor" />
      </svg>
    ),
  },
  {
    id: "sane", num: "№ 11", cat: "resilience", colSpan: "col-span-12", svgWide: true,
    name: "Sane", nameEm: "· The Bridging-Knot", teach: "\"Bridging the Digital Sea\"",
    desc: "The closing Samai of the inaugural archive — and the visual signature of the festival itself. Two ropes, three knots, one continuous line: a reminder that what looks like a break in tradition is, on closer inspection, a bind. The fishing line and the fibre cable share more than a shape.",
    foot: ["Plate 11", "Resilience · Festival Signature"],
    svg: (
      <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round" aria-hidden="true">
        <path d="M20 40 Q 40 10, 60 40 T 100 40 T 140 40 T 180 40" />
        <path d="M20 40 Q 40 70, 60 40 T 100 40 T 140 40 T 180 40" />
        <circle cx="60" cy="40" r="3" fill="currentColor" />
        <circle cx="100" cy="40" r="3" fill="currentColor" />
        <circle cx="140" cy="40" r="3" fill="currentColor" />
      </svg>
    ),
  },
];

/* ── Card component ── */
type PlateCardProps = Plate & { index: number };
function PlateCard({ id, num, colSpan, feature, name, nameEm, teach, desc, foot, svg, svgWide, index }: PlateCardProps) {
  return (
    <motion.a
      id={id}
      className={`${colSpan} relative flex flex-col p-8 [border:1px_solid_var(--rule-color)] no-underline text-ink transition-colors duration-200 ${feature ? "bg-ink text-cream [border-color:var(--ink)]" : "bg-paper hover:bg-cream-deep"}`}
      href="#"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.04}
    >
      <span className="absolute top-3.5 right-[18px] font-mono text-[10px] tracking-[0.18em] text-terracotta">{num}</span>
      <div
        className={`aspect-square flex items-center justify-center p-[18%] my-3 mb-6 border ${feature ? "bg-ink-soft border-[rgba(245,237,224,0.18)]" : "bg-cream border-[rgba(28,22,17,0.18)]"} ${svgWide ? "!aspect-[5/2] !p-[4%_18%]" : ""}`}
      >
        <div className={`w-full h-full [&>svg]:w-full [&>svg]:h-full [&>svg]:block ${feature ? "[&>svg]:text-ochre" : "[&>svg]:text-ink"}`}>
          {svg}
        </div>
      </div>
      <h3
        className={`font-heading leading-none m-0 mb-1.5 text-[32px] ${feature ? "text-cream" : ""}`}
      >
        {name}
        {nameEm && (
          <em className="not-italic text-design-muted font-serif ml-1.5 text-[16px]">
            {feature ? <span style={{ color: "rgba(245,237,224,0.6)" }}>{nameEm}</span> : nameEm}
          </em>
        )}
      </h3>
      <div className={`font-mono text-[11px] tracking-[0.18em] uppercase mb-4 ${feature ? "text-ochre" : "text-terracotta"}`}>
        {teach}
      </div>
      <p className={`text-[14px] m-0 flex-1 ${feature ? "" : "text-ink-soft"}`} style={feature ? { color: "rgba(245,237,224,0.75)" } : {}}>
        {desc}
      </p>
      <div
        className={`mt-4 pt-3.5 flex justify-between font-mono text-[10px] tracking-[0.16em] uppercase border-t ${feature ? "border-[rgba(245,237,224,0.2)] text-[rgba(245,237,224,0.55)]" : "border-[rgba(28,22,17,0.18)] text-design-muted"}`}
      >
        <span>{foot[0]}</span>
        <span>{foot[1]}</span>
      </div>
    </motion.a>
  );
}

export default function GalleryPage() {
  const [activeFilter, setActiveFilter] = useState<Virtue>("all");

  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-12">
          <motion.div variants={fadeLeft} initial="hidden" animate="show" custom={0.1}>
            <div className="eyebrow mb-[18px]">The Ga Samai · Visual Wisdom</div>
            <h1 className="mb-4" style={{ fontSize: "clamp(54px, 7vw, 100px)" }}>
              The <em className="italic text-terracotta">Samai</em> Archive.
            </h1>
            <p className="lede">
              An exploration of the traditional pictographic symbols (<em>Samai</em>) that encode the
              community&apos;s moral lessons and philosophical truths. Eleven plates — one philosophy.
            </p>
            <div className="flex gap-6 flex-wrap mt-6 font-mono text-[11px] tracking-[0.18em] uppercase text-design-muted">
              <span><strong className="text-ink">11</strong> · Plates</span>
              <span><strong className="text-ink">04</strong> · Categories</span>
              <span><strong className="text-ink">MMXXVI</strong> · Edition</span>
            </div>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" animate="show" custom={0.2}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              style={{ aspectRatio: "4/3" }}
              src="https://images.unsplash.com/photo-1551038247-3d9af20df552?auto=format&fit=crop&w=900&q=70"
              alt="Adinkra & symbol carving"
            />
            <figcaption className="figure__cap">
              <span>The Samai · Carved into wood, woven into cloth</span>
              <span>Plate 00</span>
            </figcaption>
          </motion.figure>
        </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 virtue</span>
          {FILTERS.map((f) => (
            <button
              key={f.value}
              className={`chip${activeFilter === f.value ? " is-active" : ""}`}
              onClick={() => setActiveFilter(f.value)}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>

      {/* GALLERY GRID */}
      <section className="py-20">
        <div className="wrap grid grid-cols-12 gap-6">
          {PLATES.map((plate, i) =>
            activeFilter === "all" || activeFilter === plate.cat
              ? <PlateCard key={plate.id} {...plate} index={i} />
              : null
          )}
        </div>
      </section>

      {/* PROCESS */}
      <section className="bg-cream-deep py-[110px] border-t border-rule border-b border-rule">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-16">
          <motion.figure className="figure" variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              style={{ aspectRatio: "4/3" }}
              src="https://images.unsplash.com/photo-1604329760661-e71dc83f8f26?auto=format&fit=crop&w=900&q=70"
              alt="Carving"
            />
            <figcaption className="figure__cap">
              <span>Symbol-carver at work</span>
              <span>Plate · Process</span>
            </figcaption>
          </motion.figure>
          <motion.div variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            <div className="eyebrow">Process</div>
            <h2 style={{ fontSize: "clamp(38px, 4.6vw, 60px)" }}>How a Samai is made.</h2>
            <p>
              Each Samai is the product of three crafts working in sequence: an elder names the lesson, a designer
              fixes the form, and a carver — or, in our age, a typographer — commits it to material.
            </p>
            <p>
              For the inaugural archive, the digital plates above were drawn from rubbings, oral history sessions,
              and a Samai vocabulary held by the Osu Alata Council.
            </p>
            <Button asChild>
              <Link href="/press">Press kit &amp; high-res plates →</Link>
            </Button>
          </motion.div>
        </div>
      </section>

      {/* COMPOSITION */}
      <section className="py-[110px] bg-indigo-brand text-cream">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow text-ochre">Composition</div>
            <h2 className="text-cream">From the Samai<br />to the network.</h2>
            <p style={{ color: "rgba(245,237,224,0.8)" }}>
              The visual logic of the Samai — a symbol at a node, a line for a relationship — is the same logic
              the modern internet diagram uses. The Tech-Heritage Exhibition makes this argument in physical form:
              a fishing tool beside an early router, a Samai beside a network graph.
            </p>
            <Button variant="secondary" asChild>
              <Link href="/events#day-two">See the Tech-Heritage Exhibition →</Link>
            </Button>
          </motion.div>
          <motion.div
            className="aspect-square [border:1px_solid_var(--ochre)] bg-[rgba(245,237,224,0.04)] p-8 flex items-center justify-center"
            variants={fadeRight}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            custom={0.1}
          >
            <svg viewBox="0 0 200 200" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-full h-full text-ochre" aria-hidden="true">
              <g fill="currentColor">
                <circle cx="100" cy="40" r="5" /><circle cx="40" cy="100" r="5" />
                <circle cx="160" cy="100" r="5" /><circle cx="70" cy="160" r="5" />
                <circle cx="130" cy="160" r="5" /><circle cx="100" cy="100" r="9" />
              </g>
              <g strokeDasharray="3 3">
                <line x1="100" y1="40" x2="100" y2="100" /><line x1="40" y1="100" x2="100" y2="100" />
                <line x1="160" y1="100" x2="100" y2="100" /><line x1="70" y1="160" x2="100" y2="100" />
                <line x1="130" y1="160" x2="100" y2="100" /><line x1="100" y1="40" x2="40" y2="100" />
                <line x1="100" y1="40" x2="160" y2="100" /><line x1="40" y1="100" x2="70" y2="160" />
                <line x1="160" y1="100" x2="130" y2="160" />
              </g>
            </svg>
          </motion.div>
        </div>
      </section>
    </>
  );
}