import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";

export const LEGAL_VERSION = "2026-09-07";
export const LEGAL_EFFECTIVE = "2026-09-07";

export type LegalSection = { id: string; title: string; body: React.ReactNode };

const OTHER_DOCS: Array<[string, string]> = [
  ["Terms of Service", "/legal/terms"],
  ["Privacy Policy", "/legal/privacy"],
  ["Acceptable Use Policy", "/legal/acceptable-use"],
  ["Data Processing Addendum", "/legal/dpa"],
  ["Cookie Policy", "/legal/cookies"],
];

/** Prose styling without @tailwindcss/typography. Applied to each section body. */
export const legalProse = cn(
  "text-[15px] leading-[1.7] text-fg-muted",
  "[&_p]:mt-3.5 [&_p:first-child]:mt-0",
  "[&_h3]:mt-6 [&_h3]:text-[15px] [&_h3]:font-semibold [&_h3]:text-fg [&_h3]:tracking-tight",
  "[&_ul]:mt-3.5 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:mt-3.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mt-1.5 [&_li]:pl-0.5",
  "[&_a]:text-accent [&_a]:underline-offset-4 hover:[&_a]:underline",
  "[&_strong]:font-semibold [&_strong]:text-fg",
  "[&_code]:rounded-[4px] [&_code]:border [&_code]:border-border [&_code]:bg-bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-fg",
  "[&_table]:mt-4 [&_table]:w-full [&_table]:text-[13.5px] [&_th]:border-b [&_th]:border-border [&_th]:py-2 [&_th]:pr-4 [&_th]:text-left [&_th]:text-[11.5px] [&_th]:font-medium [&_th]:uppercase [&_th]:tracking-wide [&_th]:text-fg-subtle [&_td]:border-b [&_td]:border-border [&_td]:py-2 [&_td]:pr-4 [&_td]:align-top",
);

export function LegalLayout({ title, summary, current, sections }: { title: string; summary: string; current: string; sections: LegalSection[] }) {
  return (
    <div className="container-page py-12 sm:py-16">
      <header className="max-w-3xl">
        <p className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Legal</p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-[36px]">{title}</h1>
        <p className="mt-3 font-mono text-[12.5px] text-fg-subtle">
          Version {LEGAL_VERSION} · Effective {LEGAL_EFFECTIVE}
        </p>
        <p className="mt-5 text-[15.5px] leading-relaxed text-fg-muted">{summary}</p>
      </header>

      <div className="mt-10 grid gap-10 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-16">
        <aside className="lg:sticky lg:top-20 lg:self-start">
          <nav aria-label="Table of contents" className="rounded-lg border border-border bg-bg-subtle/60 p-4 lg:border-0 lg:bg-transparent lg:p-0">
            <h2 className="text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle">On this page</h2>
            <ol className="mt-3 space-y-1.5 text-[13px]">
              {sections.map((s, i) => (
                <li key={s.id} className="flex gap-2">
                  <span className="w-5 shrink-0 font-mono tabular text-fg-subtle">{i + 1}.</span>
                  <a href={`#${s.id}`} className="text-fg-muted transition-colors hover:text-fg">
                    {s.title}
                  </a>
                </li>
              ))}
            </ol>
            <h2 className="mt-6 text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle">Other documents</h2>
            <ul className="mt-3 space-y-1.5 text-[13px]">
              {OTHER_DOCS.filter(([, href]) => href !== current).map(([label, href]) => (
                <li key={href}>
                  <Link href={href} className="text-fg-muted transition-colors hover:text-fg">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </aside>

        <article className="min-w-0 max-w-3xl">
          {sections.map((s, i) => (
            <section key={s.id} id={s.id} className="scroll-mt-24 border-t border-border py-8 first:border-t-0 first:pt-0">
              <h2 className="text-[20px] font-semibold tracking-tight text-fg">
                <span className="mr-2 font-mono text-[14px] font-medium text-fg-subtle tabular">{i + 1}.</span>
                {s.title}
              </h2>
              <div className={cn("mt-4", legalProse)}>{s.body}</div>
            </section>
          ))}
          <footer className="mt-4 rounded-lg border border-border bg-bg-subtle/60 p-5 text-[13.5px] leading-relaxed text-fg-muted">
            Questions about this document? Write to <a className="text-accent underline-offset-4 hover:underline" href="mailto:legal@fetcha.co">legal@fetcha.co</a>. Previous versions are available on request. We will post material changes on this page and, for changes that reduce your rights, notify account owners by email at least 30 days before they take effect.
          </footer>
        </article>
      </div>
    </div>
  );
}