import { useEffect, useState } from "react";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { SiteLayout } from "@/components/site/SiteLayout";

import { LEGAL_DOCS } from "@/data/legal";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/terms")({
  validateSearch: (search: Record<string, unknown>): { doc?: string } => {
    const doc =
      typeof search.doc === "string" && LEGAL_DOCS.some((d) => d.id === search.doc)
        ? search.doc
        : undefined;
    return { doc };
  },
  head: () => ({
    meta: [
      { title: "Terms & Conditions — Airfis" },
      {
        name: "description",
        content:
          "Airfis terms, privacy policy, refund policy, partner agreement and data consent notice — expand any section to review it.",
      },
      { property: "og:title", content: "Airfis Terms & Conditions" },
      {
        property: "og:description",
        content:
          "Terms, privacy, refunds, partner agreement and data consent for Airfis apps and services.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Terms,
});

function Terms() {
  const { doc: searchDoc } = Route.useSearch();
  const navigate = useNavigate({ from: Route.fullPath });
  const [active, setActive] = useState(searchDoc ?? LEGAL_DOCS[0].id);
  useEffect(() => {
    if (searchDoc && searchDoc !== active) setActive(searchDoc);
  }, [searchDoc]);
  const selectDoc = (id: string) => {
    setActive(id);
    void navigate({ search: { doc: id }, replace: true });
  };
  const doc = LEGAL_DOCS.find((d) => d.id === active) ?? LEGAL_DOCS[0];

  return (
    <SiteLayout>
      <section className="pt-16 lg:pt-24 pb-24">
        <div className="container-airfis max-w-6xl">
          <p className="eyebrow">Legal · Last updated {doc.updated}</p>
          <h1 className="h-display mt-6 text-ink">Terms & Conditions</h1>
          <p className="mt-6 text-lg text-ink-2 max-w-3xl">
            Everything that governs your use of Airfis and Airfis Connect. Pick a document, then tap
            any section to read it.
          </p>

          <div className="mt-10 lg:grid lg:grid-cols-[240px_1fr] lg:gap-10">
            {/* Document menu — plain clickable list */}
            <aside className="mb-8 lg:mb-0">
              <nav
                aria-label="Legal documents"
                className="flex gap-6 overflow-x-auto pb-2 -mx-4 px-4 lg:mx-0 lg:px-0 lg:flex-col lg:gap-0 lg:overflow-visible lg:sticky lg:top-24 lg:border-l lg:border-border"
              >
                {LEGAL_DOCS.map((d) => (
                  <button
                    key={d.id}
                    type="button"
                    onClick={() => selectDoc(d.id)}
                    className={cn(
                      "bg-transparent text-sm transition-colors whitespace-nowrap lg:whitespace-normal lg:text-left lg:-ml-px lg:border-l-2 lg:py-2.5 lg:pl-4",
                      d.id === active
                        ? "font-semibold text-primary lg:border-primary"
                        : "font-medium text-ink-2 hover:text-ink lg:border-transparent",
                    )}
                  >
                    {d.label}
                  </button>
                ))}
              </nav>
            </aside>

            <div>
              <h2 className="text-2xl font-semibold text-ink">{doc.title}</h2>
              <p className="mt-3 text-ink-2 leading-relaxed">{doc.intro}</p>

              <div className="mt-10 space-y-10">
                {doc.sections.map((s) => (
                  <section key={s.t}>
                    <h3 className="text-lg font-semibold text-ink">{s.t}</h3>
                    <div className="mt-3 space-y-2">
                      {s.b.map((line, i) => (
                        <p
                          key={i}
                          className={cn(
                            "text-ink-2 leading-relaxed",
                            line.startsWith("•") && "pl-4",
                          )}
                        >
                          {line}
                        </p>
                      ))}
                    </div>
                  </section>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}