import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { db, historyEvents } from "@/db";
import { asc } from "drizzle-orm";
import { fmtDate } from "@/lib/format";
import fs from "node:fs";
import path from "node:path";

const exists = (u?: string | null) => !!u && fs.existsSync(path.join(process.cwd(), "public", u));

export const metadata = { title: "History" };

export default async function HistoryPage() {
  const events = await db.query.historyEvents.findMany({ orderBy: [asc(historyEvents.date), asc(historyEvents.sortOrder)] });
  const eras = [...new Set(events.map((e) => e.era).filter(Boolean))] as string[];
  const founded = events[0]?.date.getFullYear() ?? 1999;
  return (
    <Shell>
      <PageHeader dark eyebrow="Agency history" title={<>Independent since <span className="mark">{founded}.</span></>} intro={`${new Date().getFullYear() - founded} years of moving people. Photos and films from every era – add your own memories to the archive.`}>
        <div className="flex flex-wrap gap-1.5">{eras.map((e) => <a key={e} href={`#${e.replace(/\W+/g, "-")}`} className="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3 py-1 text-xs font-medium text-white hover:bg-soul hover:border-soul">{e}</a>)}</div>
      </PageHeader>
      <section className="mx-auto max-w-5xl px-5 py-12">
        <div className="timeline space-y-10">
          {events.map((e, i) => {
            const firstOfEra = i === 0 || events[i - 1].era !== e.era;
            const left = i % 2 === 0;
            return (
              <div key={e.id}>
                {firstOfEra && e.era && <h2 id={e.era.replace(/\W+/g, "-")} className="headline mb-8 pl-12 md:pl-0 md:text-center relative"><span className="serif-i bg-paper px-4">{e.era}</span></h2>}
                <div className={`relative pl-12 md:pl-0 md:grid md:grid-cols-2 md:gap-12 ${left ? "" : ""}`}>
                  <span className="absolute left-[0.6rem] md:left-1/2 md:-ml-[0.55rem] top-2 h-4 w-4 rounded-full bg-soul ring-4 ring-paper" />
                  <div className={`${left ? "md:col-start-1 md:text-right" : "md:col-start-2"}`}>
                    <p className="eyebrow">{fmtDate(e.date, { year: "numeric", month: "long" })}</p>
                    <h3 className="text-2xl font-medium tracking-tight mt-1">{e.title}</h3>
                    {e.body && <p className="text-ink/70 mt-2">{e.body}</p>}
                    <div className={`mt-4 overflow-hidden rounded-2xl border border-line bg-cream aspect-video grid place-items-center ${left ? "md:ml-auto" : ""}`}>
                      {e.mediaKind === "video" ? (
                        <span className="flex items-center gap-2 text-sm text-mist"><span className="grid h-10 w-10 place-items-center rounded-full bg-ink text-white">▶</span> Video – drop file at <code className="text-xs">public{e.mediaUrl}</code></span>
                      ) : exists(e.mediaUrl) ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img src={e.mediaUrl ?? ""} alt="" className="h-full w-full object-cover" />
                      ) : (
                        <span className="text-sm text-mist">Photo – drop file at <code className="text-xs">public{e.mediaUrl}</code></span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <p className="mt-16 text-center serif-i text-2xl text-ink/70">Still independent. Still moving.</p>
      </section>
    </Shell>
  );
}