import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useLang, type Lang, type T } from "@/lib/i18n";
import { LogoSlot } from "@/components/site/Layout";
import { meta } from "@/lib/meta";
import {
  CHAIRMAN_CLOSING,
  CHAIRMAN_FOOTLINE,
  CHAIRMAN_PARAGRAPHS,
  CHAIRMAN_QUOTE,
  CHAIRMAN_SIGNATURE,
  CHAIRMAN_TAGLINE,
  CHAIRMAN_TITLE,
} from "@/lib/chairman";

export const Route = createFileRoute("/chairman-message")({
  head: () =>
    meta(
      "සභාපති තුමන්ගේ සුභාසිංශනය",
      "The Chairman's message of goodwill from Thinulaka Uttamachara 2026, in a clean format for printing or saving as a PDF.",
    ),
  validateSearch: (search: Record<string, unknown>): { lang?: Lang } =>
    search["lang"] === "en" || search["lang"] === "si" ? { lang: search["lang"] as Lang } : {},
  component: ChairmanMessagePage,
});

function ChairmanMessagePage() {
  const { lang: siteLang } = useLang();
  const { lang: urlLang } = Route.useSearch();
  const [picked, setPicked] = useState<Lang | null>(null);
  const active = picked ?? urlLang ?? siteLang;
  const t = (x: T) => x[active];

  /* Marks the page so print CSS can drop the site header, bar and footer. */
  useEffect(() => {
    document.body.dataset["printDoc"] = "chairman";
    return () => {
      delete document.body.dataset["printDoc"];
    };
  }, []);

  return (
    <div className="print-doc mx-auto max-w-3xl px-5 py-12">
      <div className="no-print mx-auto mb-8 flex max-w-3xl flex-wrap items-center justify-between gap-3">
        <Link to="/about" className="text-sm text-muted-foreground transition-colors hover:text-gold">
          ← {t({ si: "ආපසු යනන", en: "Back to About" })}
        </Link>
        <div className="flex flex-wrap items-center gap-3">
          <div
            className="flex rounded-sm border border-gold/50 text-sm"
            role="group"
            aria-label={t({ si: "පණිවිඩයේ භාෂාව", en: "Language of the message" })}
          >
            {(["si", "en"] as const).map((l) => (
              <button
                key={l}
                type="button"
                onClick={() => setPicked(l)}
                aria-pressed={active === l}
                className={`px-4 py-1.5 transition-colors ${active === l ? "bg-gold text-ink" : "text-gold hover:bg-gold/10"}`}
              >
                {l === "si" ? "සිංහල" : "English"}
              </button>
            ))}
          </div>
          <button
            type="button"
            onClick={() => window.print()}
            className="rounded-sm bg-gold px-4 py-1.5 text-sm font-semibold text-ink transition-colors hover:bg-gold/90"
          >
            {t({ si: "මුද්‍රණය කරන්න / PDF ලෙස සුරකින්න", en: "Print / Save as PDF" })}
          </button>
        </div>
      </div>

      <article className="print-sheet">
        <div className="print-head">
          <LogoSlot size="lg" />
          <h1 className="print-title">{t(CHAIRMAN_TITLE)}</h1>
          <div className="print-rule" />
          <p className="print-kicker">{t(CHAIRMAN_FOOTLINE)}</p>
        </div>

        <blockquote className="print-quote">“{t(CHAIRMAN_QUOTE)}”</blockquote>

        <div className="print-body">
          {CHAIRMAN_PARAGRAPHS.map((p, i) => (
            <p key={i} className={p.lead ? "print-lead" : undefined}>
              {t(p)}
            </p>
          ))}
          <p className="print-tagline">{t(CHAIRMAN_TAGLINE)}</p>
        </div>

        <div className="print-sign">
          <p className="print-closing">{t(CHAIRMAN_CLOSING)}</p>
          {CHAIRMAN_SIGNATURE.map((s) => (
            <div key={s.name.en}>
              <p className="print-name">{t(s.name)}</p>
              <p className="print-role">{t(s.role)}</p>
              <p className="print-org">{t(s.org)}</p>
              <p className="print-event">{t(s.event)}</p>
            </div>
          ))}
        </div>
      </article>
    </div>
  );
}