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 { FIELDS } from "@/lib/fields";

export const Route = createFileRoute("/nomination-form")({
  head: () =>
    meta(
      "නාමයෝජනා පෝරමය",
      "The full Thinulaka Uttamachara 2026 nomination form 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: NominationFormPage,
});

/* Blank writing line for the paper form */
function Line({ label, hint, wide }: { label: T; hint?: T; wide?: boolean }) {
  const { t } = useLang();
  return (
    <div className={`form-line ${wide ? "form-line-wide" : ""}`}>
      <span className="form-line-label">{t(label)}</span>
      <span className="form-line-rule" />
      {hint && <span className="form-line-hint">{t(hint)}</span>}
    </div>
  );
}

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

  useEffect(() => {
    document.body.dataset["printDoc"] = "nomination-form";
    return () => {
      delete document.body.dataset["printDoc"];
    };
  }, []);

  return (
    <div className="print-doc mx-auto max-w-3xl px-3 py-8 sm:px-5 sm:py-12">
      <div className="no-print mx-auto mb-8 flex max-w-3xl flex-wrap items-center justify-between gap-3">
        <Link to="/nominate" className="text-sm text-muted-foreground transition-colors hover:text-gold">
          ← {tr({ si: "නාමයෝජනා පිටුවට", en: "Back to Nominations" })}
        </Link>
        <div className="flex w-full flex-wrap items-center gap-3 sm:w-auto">
          <div
            className="flex rounded-sm border border-gold/50 text-sm"
            role="group"
            aria-label={tr({ si: "පෝරමයේ භාෂාව", en: "Language of the form" })}
          >
            {(["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="glow w-full rounded-sm bg-gold px-5 py-3 text-sm font-semibold text-ink hover:bg-gold/90 sm:w-auto sm:py-2"
          >
            {tr({ si: "මුද්‍රණය කරන්න / PDF ලෙස සුරකින්න", en: "Print / Save as PDF" })}
          </button>
        </div>
      </div>

      <article className="print-sheet">
        <header className="print-head">
          <div className="mx-auto w-fit"><LogoSlot size="lg" /></div>
          <p className="print-kicker">{tr({ si: "තිනුලක උත්තමාචාරය 2026", en: "Thinulaka Uttamachara 2026" })}</p>
          <h1 className="print-title">{tr({ si: "නාමයෝජනා පෝරමය", en: "Nomination Form" })}</h1>
          <div className="print-rule" />
          <p className="mt-3 text-sm" style={{ color: "var(--paper-soft)" }}>
            {tr({
              si: "ඔබේ නාමයෝජනාව රහසිගතව සලකනු ලබන අතර, කැමැත්තකින් තොරව කිසිදු තොරතුරක් ප්‍රසිද්ධ නොකෙරේ.",
              en: "Your nomination is treated confidentially. No information is published without consent.",
            })}
          </p>
        </header>

        <section className="print-body">
          <h2 className="form-section">{tr({ si: "නාමයෝජිතයා", en: "Nominee" })}</h2>
          <Line wide label={{ si: "සම්පූර්ණ නම", en: "Full name" }} />
          <div className="form-grid">
            <Line label={{ si: "වයස", en: "Age" }} hint={{ si: "(60 හෝ ඊට වැඩි)", en: "(60 or above)" }} />
            <Line label={{ si: "දිස්ත්‍රික්කය", en: "District" }} />
          </div>
          <Line wide label={{ si: "සම්බන්ධතා විස්තර", en: "Contact details" }} />
          <Line wide label={{ si: "සේවා කාලය (අවුරුදු)", en: "Years of service" }} />

          <h3 className="form-sub">{tr({ si: "සේවා ක්ෂේත්‍රය (එකක් සලකුණු කරන්න)", en: "Service category (mark one)" })}</h3>
          <ul className="form-checks">
            {FIELDS.map((f, i) => (
              <li key={f.name.en}>
                <span className="form-box" />
                <span>
                  {String(i + 1).padStart(2, "0")}. {tr(f.name)}
                </span>
              </li>
            ))}
          </ul>

          <h3 className="form-sub">{tr({ si: "දායකත්වය පිළිබඳ සවිස්තර විස්තරය", en: "Detailed description of contributions" })}</h3>
          <p className="form-note">
            {tr({
              si: "කරුණාකර අවම වශයෙන් අක්ෂර 100ක විස්තරයක් ලබා දෙන්න. අදාළ ක්ෂේත්‍රයේ ඇගයීම් නිර්ණායක ආවරණය වන ලෙස ලියන්න.",
              en: "Please provide at least 100 characters, covering the evaluation criteria of the chosen category.",
            })}
          </p>
          {Array.from({ length: 8 }, (_, i) => (
            <div key={i} className="form-write-line" />
          ))}

          <h3 className="form-sub">{tr({ si: "සහාය සාක්ෂි සහ ඡායාරූප", en: "Supporting evidence & photos" })}</h3>
          <p className="form-note">
            {tr({
              si: "විකල්ප — PDF, JPG, PNG, උපරිම 10MB. මෙම පෝරමය සමඟ අමුණා එවන්න.",
              en: "Optional — PDF, JPG, PNG, max 10MB. Attach with this form.",
            })}
          </p>
        </section>

        <section className="print-body">
          <h2 className="form-section">{tr({ si: "නාමයෝජකයා", en: "Nominator" })}</h2>
          <Line wide label={{ si: "ඔබේ නම", en: "Your name" }} />
          <div className="form-grid">
            <Line label={{ si: "දුරකථන අංකය", en: "Phone" }} />
            <Line label={{ si: "ඊමේල්", en: "Email" }} />
          </div>
        </section>

        <section className="print-body">
          <h2 className="form-section">{tr({ si: "තහවුරු කිරීම", en: "Declaration" })}</h2>
          <p className="form-note">
            {tr({
              si: "ලබා දුන් තොරතුරු නිවැරදි බවත්, ඒවා තේරීම් ක්‍රියාවලිය සඳහා පමණක් රහසිගතව භාවිත කිරීමට එකඟ වන බවත් මම තහවුරු කරමි.",
              en: "I confirm the information is accurate and consent to its confidential use solely for the selection process.",
            })}
          </p>
          <div className="form-grid mt-6">
            <Line label={{ si: "අත්සන", en: "Signature" }} />
            <Line label={{ si: "දිනය", en: "Date" }} />
          </div>
        </section>

        <footer className="print-tagline">
          {tr({ si: "ඔබ නිහඬව කළ සියල්ල — අපි හදවතින්ම දැක්කෙමු.", en: "All that you did in silence — we saw it with our hearts." })}
        </footer>
      </article>
    </div>
  );
}