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 { journal, getArticle } from "@/content/journal";
import { gemstones } from "@/content/gemstones";

export function generateStaticParams() {
  return journal.map((a) => ({ slug: a.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const a = getArticle(slug);
  if (!a) return {};
  return { title: `${a.title}, The Genesis Journal`, description: a.deck };
}

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const a = getArticle(slug);
  if (!a) notFound();

  const relatedGems = gemstones.filter((g) => a.relatedGems.includes(g.slug));
  const relatedArticles = journal.filter((x) => a.relatedArticles.includes(x.slug));
  const dateStr = new Date(a.date + "T00:00:00").toLocaleDateString("en-GB", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });

  return (
    <>
      <Reveal />

      <article>
        <header className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 220px)", paddingBottom: "clamp(50px, 7vw, 90px)" }}>
          <div className="wrap" style={{ maxWidth: 900, marginInline: "auto" }}>
            <p className="eyebrow rv on">
              The Genesis Journal · {a.category}
            </p>
            <h1 className="h1 rv on d1" style={{ fontSize: "clamp(2.2rem, 4.6vw, 4rem)" }}>
              {a.title}
            </h1>
            <p className="lead rv on d2" style={{ marginTop: 22 }}>
              {a.deck}
            </p>
            <p className="caption rv on d3" style={{ marginTop: 22, textTransform: "uppercase", letterSpacing: "0.18em" }}>
              {dateStr} · {a.minutes} minute read
            </p>
          </div>
        </header>

        {a.hero && (
          <div className="room" style={{ paddingBlock: "clamp(30px, 4vw, 56px)" }}>
            <figure className="wrap rv on" style={{ maxWidth: 900, marginInline: "auto" }}>
              <div className="plate" style={{ display: "grid", placeItems: "center", padding: "clamp(20px, 4vw, 48px)" }}>
                <Image src={a.hero} alt={a.heroCaption ?? a.title} width={1200} height={1130} style={{ width: "min(520px, 100%)", height: "auto" }} />
              </div>
              {a.heroCaption && <figcaption className="figure-cap">{a.heroCaption}</figcaption>}
            </figure>
          </div>
        )}

        <div className="section-tight room-paper" style={{ paddingTop: a.hero ? 0 : undefined }}>
          <div className="wrap" style={{ maxWidth: 900, marginInline: "auto" }}>
            <div className="prose">
              {a.body.map((b, i) =>
                b.t === "h2" ? (
                  <h2 key={i}>{b.x}</h2>
                ) : b.t === "pull" ? (
                  <p key={i} className="pull">
                    {b.x}
                  </p>
                ) : (
                  <p key={i}>{b.x}</p>
                )
              )}
            </div>
          </div>
        </div>
      </article>

      {/* Interconnections, no dead ends */}
      <section className="section-tight room-paper tint" aria-label="Related">
        <div className="wrap" style={{ maxWidth: 900, marginInline: "auto" }}>
          {relatedGems.length > 0 && (
            <>
              <p className="eyebrow rv">Related Gemstones</p>
              <div style={{ display: "flex", gap: "clamp(14px, 2vw, 28px)", flexWrap: "wrap", marginBottom: 44 }}>
                {relatedGems.map((g) => (
                  <Link key={g.slug} href={`/gemstones/${g.slug}`} className="rv link-quiet serif" style={{ fontSize: "1.25rem", color: "var(--charcoal)" }}>
                    {g.name} →
                  </Link>
                ))}
              </div>
            </>
          )}
          {relatedArticles.length > 0 && (
            <>
              <p className="eyebrow rv">Suggested Reading</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "clamp(20px, 3vw, 40px)" }}>
                {relatedArticles.map((x, i) => (
                  <Link key={x.slug} href={`/journal/${x.slug}`} className={`rv d${i + 1}`} style={{ borderTop: "1px solid var(--hairline-dark)", paddingTop: 18 }}>
                    <span className="caption" style={{ textTransform: "uppercase", letterSpacing: "0.2em" }}>
                      {x.category} · {x.minutes} min
                    </span>
                    <span className="h3 serif" style={{ display: "block", marginTop: 10, fontSize: "1.25rem" }}>{x.title}</span>
                  </Link>
                ))}
              </div>
            </>
          )}
        </div>
      </section>

      <AppointmentInvite heading="Discuss this with the house" />
    </>
  );
}