import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { notFound } from "next/navigation";
import Reveal from "@/components/Reveal";
import AppointmentInvite from "@/components/AppointmentInvite";
import { gemstones, getGemstone } from "@/content/gemstones";
import { creations } from "@/content/creations";
import { journal } from "@/content/journal";

export function generateStaticParams() {
  return gemstones.map((g) => ({ slug: g.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const g = getGemstone(slug);
  if (!g) return {};
  return {
    title: `${g.name}, Extraordinary Gemstones`,
    description: g.intro[0].slice(0, 155),
  };
}

export default async function GemstonePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const g = getGemstone(slug);
  if (!g) notFound();

  const related = creations.filter((c) => g.relatedCreations.includes(c.id));
  const articles = journal.filter((a) => g.relatedJournal.includes(a.slug));
  const idx = gemstones.findIndex((x) => x.slug === g.slug);
  const next = gemstones[(idx + 1) % gemstones.length];

  return (
    <>
      <Reveal />

      {/* Arrival, wonder first */}
      <section
        style={{
          paddingTop: "clamp(150px, 20vh, 230px)",
          paddingBottom: "clamp(70px, 9vw, 130px)",
          background: "radial-gradient(ellipse 70% 60% at 50% 10%, rgba(1, 101, 175, 0.30), transparent 65%), var(--night-950)",
        }}
      >
        <div className="wrap">
          <p className="eyebrow rv on">Extraordinary Gemstones · {String(idx + 1).padStart(2, "0")}</p>
          <h1 className="h1 rv on d1">{g.name}</h1>
          <p
            className="rv on d2 serif"
            style={{
              fontStyle: "italic",
              fontSize: "clamp(1.25rem, 2.2vw, 1.8rem)",
              color: "var(--stone)",
              marginTop: 18,
            }}
          >
            {g.tagline}
          </p>
        </div>
      </section>

      {/* Introduction */}
      <section className="section-tight room-paper" aria-label={`About ${g.name}`}>
        <div className="wrap grid-12" style={{ alignItems: "center" }}>
          <div style={{ gridColumn: "span 7" }}>
            <div className="prose">
              {g.intro.map((p, i) => (
                <p key={i} className={`rv d${i + 1}`} style={{ fontSize: "clamp(1.05rem, 1.5vw, 1.25rem)", lineHeight: 1.9 }}>
                  {p}
                </p>
              ))}
            </div>
          </div>
          <div style={{ gridColumn: "span 5" }}>
            <figure className="rv d2" style={{ margin: 0 }}>
              <div
                className={g.imageFit === "contain" ? "gem-tile" : "archive-img"}
                style={{ aspectRatio: "4/3" }}
              >
                <Image
                  src={g.image}
                  alt={g.imageAlt}
                  width={900}
                  height={675}
                  sizes="(max-width: 760px) 100vw, 42vw"
                  style={{ width: "100%", height: "100%", objectFit: g.imageFit }}
                />
              </div>
              <figcaption className="figure-cap">{g.imageAlt}.</figcaption>
            </figure>
          </div>
        </div>
      </section>

      {/* From the house: films and plates */}
      {(g.films?.length || g.plates?.length) ? (
        <section className="section room-paper tint" aria-labelledby="house-media-h">
          <div className="wrap">
            <p className="eyebrow rv">From the House</p>
            <h2 id="house-media-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
              {g.name}, in the house&apos;s hands
            </h2>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
                gap: "clamp(24px, 3vw, 44px)",
                marginTop: "clamp(40px, 5vw, 64px)",
                alignItems: "start",
              }}
            >
              {(g.films ?? []).map((f, i) => (
                <figure key={f.src} className={`rv d${(i % 3) + 1}`} style={{ margin: 0 }}>
                  <div className="plate" style={{ aspectRatio: "9/16", background: "var(--night-950)" }}>
                    <video
                      autoPlay
                      muted
                      loop
                      playsInline
                      preload="metadata"
                      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                      aria-label={f.caption}
                    >
                      <source src={f.src} type="video/mp4" />
                    </video>
                  </div>
                  <figcaption className="figure-cap">{f.caption}</figcaption>
                </figure>
              ))}
              {(g.plates ?? []).map((pl, i) => (
                <figure key={pl.src} className={`rv d${(i % 3) + 1}`} style={{ margin: 0 }}>
                  <div className={pl.fit === "contain" ? "gem-tile" : "archive-img"} style={{ aspectRatio: "9/16" }}>
                    <Image
                      src={pl.src}
                      alt={pl.alt}
                      width={900}
                      height={1600}
                      sizes="(max-width: 600px) 100vw, 33vw"
                      style={{ width: "100%", height: "100%", objectFit: pl.fit }}
                    />
                  </div>
                  <figcaption className="figure-cap">{pl.alt}.</figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>
      ) : null}

      {/* Science */}
      <section className="section room-paper" aria-labelledby="sci-h">
        <div className="wrap">
          <p className="eyebrow rv">The Science</p>
          <h2 id="sci-h" className="h2 rv d1" style={{ maxWidth: "18ch" }}>
            What the earth had to do
          </h2>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: "clamp(28px, 4vw, 56px)",
              marginTop: "clamp(44px, 5vw, 72px)",
            }}
          >
            {g.science.map((s, i) => (
              <div key={s.title} className={`rv d${(i % 3) + 1}`} style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 24 }}>
                <h3 className="h3">{s.title}</h3>
                <p className="lead" style={{ marginTop: 14, fontSize: "1rem", maxWidth: "58ch" }}>{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Origins + collecting */}
      <section className="section room-paper" aria-labelledby="orig-h">
        <div className="wrap grid-12">
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">Provenance</p>
            <h2 id="orig-h" className="h3 rv d1">Where the finest come from</h2>
            <p className="lead rv d2" style={{ marginTop: 18 }}>{g.origins}</p>
          </div>
          <div style={{ gridColumn: "span 6" }}>
            <p className="eyebrow rv">Collecting</p>
            <h2 className="h3 rv d1">How collectors judge it</h2>
            <p className="lead rv d2" style={{ marginTop: 18 }}>{g.collecting}</p>
          </div>
        </div>
      </section>

      {/* Genesis perspective */}
      <section className="section-tight vitrine" aria-labelledby="gen-h">
        <div className="wrap" style={{ maxWidth: 860, marginInline: "auto", textAlign: "center" }}>
          <p className="eyebrow rv" style={{ justifyContent: "center" }}>The Genesis Perspective</p>
          <p
            id="gen-h"
            className="rv d1 serif"
            style={{
              fontSize: "clamp(1.3rem, 2.4vw, 1.9rem)",
              fontStyle: "italic",
              lineHeight: 1.55,
              color: "var(--ivory)",
              margin: "10px auto 0",
            }}
          >
            {g.genesis}
          </p>
        </div>
      </section>

      {/* Related creations, only where species is verified */}
      {related.length > 0 && (
        <section className="section room-paper" aria-labelledby="rel-h">
          <div className="wrap">
            <p className="eyebrow rv">From the Workshop</p>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
              <h2 id="rel-h" className="h2 rv d1" style={{ maxWidth: "16ch" }}>
                {g.name} at Genesis
              </h2>
              <Link href="/high-jewellery" className="btn rv d2">
                All Masterpieces <span className="arr">→</span>
              </Link>
            </div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
                gap: "clamp(24px, 3vw, 44px)",
                marginTop: "clamp(44px, 5vw, 72px)",
              }}
            >
              {related.slice(0, 6).map((c, i) => (
                <Link key={c.id} href="/high-jewellery" className={`rv d${(i % 3) + 1}`}>
                  <figure style={{ margin: 0 }}>
                    <div className="gem-tile">
                      <Image src={c.image} alt={c.description} width={600} height={450} />
                    </div>
                    <figcaption className="figure-cap">{c.description}</figcaption>
                  </figure>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Related knowledge */}
      {articles.length > 0 && (
        <section className="section-tight room-paper tint" aria-labelledby="know-h">
          <div className="wrap">
            <p className="eyebrow rv">Further Reading</p>
            <h2 id="know-h" className="h3 rv d1">From the Genesis Journal</h2>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
                gap: "clamp(24px, 4vw, 56px)",
                marginTop: 36,
              }}
            >
              {articles.map((a, i) => (
                <Link key={a.slug} href={`/journal/${a.slug}`} className={`rv d${i + 1}`} style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 22 }}>
                  <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.2em" }}>
                    {a.category} · {a.minutes} min
                  </span>
                  <span className="h3 serif" style={{ display: "block", marginTop: 12, fontSize: "1.3rem" }}>{a.title}</span>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* No dead ends, next room */}
      <section className="section-tight room-deep" aria-label="Continue exploring">
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div>
            <p className="caption rv" style={{ textTransform: "uppercase", letterSpacing: "0.22em" }}>Continue</p>
            <Link href={`/gemstones/${next.slug}`} className="h3 serif rv d1 link-quiet" style={{ display: "inline-block", marginTop: 10, color: "var(--ivory)" }}>
              {next.name} →
            </Link>
          </div>
          <Link href="/gemstones" className="btn rv d2">
            All Gemstones <span className="arr">→</span>
          </Link>
        </div>
      </section>

      <AppointmentInvite heading={`Discuss ${g.name.toLowerCase()} with the house`} />
    </>
  );
}