import Link from "next/link";
import { ExternalLink, FileCheck2 } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { listLegalAcceptances } from "@/lib/queries/account";
import { formatDate } from "@/lib/format";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { EmptyState } from "@/components/ui/empty-state";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export const dynamic = "force-dynamic";

const DOCUMENTS: Record<string, { label: string; href: string }> = {
  terms: { label: "Terms of Service", href: "/legal/terms" },
  privacy: { label: "Privacy Policy", href: "/legal/privacy" },
  acceptable_use: { label: "Acceptable Use Policy", href: "/legal/acceptable-use" },
};

export default async function LegalPage() {
  const ws = await getWorkspace();
  const rows = await listLegalAcceptances(ws.user.id);

  return (
    <div className="grid gap-6">
      <div className="grid gap-4">
        <div>
          <h2 className="text-[15px] font-semibold tracking-tight">Accepted documents</h2>
          <p className="text-[13px] text-fg-muted">Every version you agreed to, with the time and IP address recorded at acceptance.</p>
        </div>
        {rows.length === 0 ? (
          <EmptyState icon={FileCheck2} title="No acceptances recorded" description="Acceptances are recorded when you sign up. If your account predates this record, they will be requested the next time terms change." />
        ) : (
          <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
            <Table>
              <TableHeader>
                <TableRow className="hover:bg-transparent">
                  <TableHead>Document</TableHead>
                  <TableHead>Version</TableHead>
                  <TableHead>Accepted</TableHead>
                  <TableHead>IP address</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((r) => {
                  const doc = DOCUMENTS[r.document];
                  return (
                    <TableRow key={r.id}>
                      <TableCell>
                        {doc ? (
                          <Link href={doc.href} className="inline-flex items-center gap-1 font-medium underline-offset-4 hover:underline">
                            {doc.label} <ExternalLink className="size-3 text-fg-subtle" aria-hidden />
                          </Link>
                        ) : (
                          <span className="font-medium">{r.document}</span>
                        )}
                      </TableCell>
                      <TableCell className="font-mono text-[12.5px] tabular">{r.version}</TableCell>
                      <TableCell className="whitespace-nowrap tabular text-fg-muted">{formatDate(r.acceptedAt)}</TableCell>
                      <TableCell className="font-mono text-[12.5px] tabular">{r.ipAddress ?? "—"}</TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        )}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Current documents</CardTitle>
          <CardDescription>The versions in force today. We email you before material changes take effect.</CardDescription>
        </CardHeader>
        <CardContent>
          <ul className="grid gap-2 text-[13.5px] sm:grid-cols-3">
            {Object.values(DOCUMENTS).map((d) => (
              <li key={d.href}>
                <Link href={d.href} className="inline-flex items-center gap-1.5 text-fg underline-offset-4 hover:underline">
                  {d.label} <ExternalLink className="size-3 text-fg-subtle" aria-hidden />
                </Link>
              </li>
            ))}
          </ul>
          <p className="mt-4 text-[12.5px] text-fg-subtle">
            Data processing questions: <a href="mailto:privacy@fetcha.co" className="underline-offset-4 hover:underline">privacy@fetcha.co</a>
          </p>
        </CardContent>
      </Card>
    </div>
  );
}