import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight, Cookie, Fingerprint, Gauge, KeyRound, ScrollText, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Container, Eyebrow, Section, SectionHeading } from "@/components/marketing/section";
import { Reveal } from "@/components/marketing/reveal";
import { KeyLifecycle, SecurityFlow } from "@/components/marketing/security-flow";

export const metadata: Metadata = {
  title: "Security",
  description: "How PolyLLM protects your API keys and account: AES-256-GCM key encryption with HKDF-derived keys, Argon2id passwords, HttpOnly cookies, a strict Content-Security-Policy, per-route rate limits and an audit log. Every claim on this page is verified in the source code.",
  alternates: { canonical: "/security" },
  openGraph: { title: "PolyLLM — Security", description: "Where your keys go, how they are encrypted, and what we log.", url: "/security" },
};

/* ------------------------------------------------------------------------------------------------
 * Facts verified in code (see docs/upgrade-notes/F-marketing.md for the file references)
 * ---------------------------------------------------------------------------------------------- */
const AUTH_LIMITS: [string, string][] = [
  ["Sign in", "8 / min"],
  ["Sign up", "4 / min"],
  ["Password reset request", "4 / min"],
  ["Verification e-mail", "3 / min"],
  ["Change password", "5 / min"],
  ["Change e-mail", "3 / min"],
  ["Delete account", "3 / min"],
  ["Any other auth route", "100 / min"],
];
const APP_LIMITS: [string, string][] = [
  ["Chat requests", "60 / min"],
  ["Arena sessions", "20 / min"],
  ["Arena streams", "80 / min"],
  ["Save a key", "12 / min"],
  ["Validate a key", "10 / min"],
  ["Model sync", "6 / min"],
  ["File uploads", "40 / min"],
  ["Search", "120 / min"],
  ["Share / conversation actions", "20 / min"],
];

const HEADERS: [string, string][] = [
  ["Content-Security-Policy", "default-src 'self'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; connect-src 'self'; img-src 'self' data: blob: https:; font-src 'self' data:; worker-src 'self' blob:; upgrade-insecure-requests"],
  ["Strict-Transport-Security", "max-age=31536000; includeSubDomains (production)"],
  ["X-Frame-Options", "DENY"],
  ["X-Content-Type-Options", "nosniff"],
  ["Referrer-Policy", "strict-origin-when-cross-origin"],
  ["Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=()"],
];

const AUDIT_EVENTS = ["account.created", "login", "email.verified", "email.change_requested", "password.reset_requested", "password.reset", "provider.key_added", "provider.key_replaced", "provider.key_deleted", "account.deleted", "export · share · branch · duplicate"];

export default function SecurityPage() {
  return (
    <>
      {/* Header */}
      <section className="relative overflow-hidden">
        <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black_30%,transparent_100%)] dark:opacity-40" />
        <Container className="relative pb-10 pt-12 sm:pb-14 sm:pt-20">
          <Reveal className="max-w-3xl">
            <Eyebrow>Security</Eyebrow>
            <h1 className="mt-3 text-balance text-4xl font-semibold tracking-[-0.03em]">Where your keys go, how they are encrypted, and what we log.</h1>
            <p className="mt-5 max-w-2xl text-pretty text-base leading-7 text-fg-muted sm:text-lg sm:leading-8">
              PolyLLM handles the most sensitive thing a developer owns: API keys with a billing account attached. This page describes the actual implementation — every statement below is checked against the source code, not a policy document. When something is a trade-off, we say so.
            </p>
          </Reveal>
        </Container>
      </section>

      {/* Flow */}
      <Section tone="subtle" className="py-12 sm:py-16">
        <SectionHeading eyebrow="Request path" title="Browser → PolyLLM encrypted server layer → Provider" description="Your browser never holds a provider key after the moment you paste it. The server encrypts it, stores the envelope, and only decrypts it in memory when it is about to talk to the provider you chose." />
        <div className="mt-10">
          <SecurityFlow />
        </div>
      </Section>

      {/* Key lifecycle */}
      <Section id="keys" className="py-14 sm:py-20">
        <div className="grid gap-10 lg:grid-cols-12">
          <div className="lg:col-span-4">
            <SectionHeading eyebrow="API key lifecycle" title="From paste to provider, step by step" description="The implementation lives in a single module (src/lib/crypto/keys.ts) and one service (src/lib/providers/keys.ts). Here is what they do." />
          </div>
          <div className="lg:col-span-8">
            <KeyLifecycle />
          </div>
        </div>
      </Section>

      {/* Account & sessions */}
      <Section id="account" tone="subtle" className="py-14 sm:py-20">
        <SectionHeading eyebrow="Account & sessions" title="Passwords, cookies and e-mail verification" />
        <div className="mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          <Reveal className="flex gap-3.5">
            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent [&_svg]:size-4.5">
              <Fingerprint />
            </span>
            <div>
              <h3 className="text-[15px] font-semibold tracking-tight">Argon2id password hashing</h3>
              <p className="mt-1 text-[13.5px] leading-6 text-fg-muted">
                Passwords are hashed with Argon2id at the OWASP-recommended parameters: 19 MiB memory, 2 iterations, parallelism 1 (the <code className="rounded bg-bg-muted px-1 font-mono text-[12px] text-fg">argon2</code> native library, configured in Better Auth). Minimum 10 and maximum 128 characters. The password itself is never stored.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.05} className="flex gap-3.5">
            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent [&_svg]:size-4.5">
              <Cookie />
            </span>
            <div>
              <h3 className="text-[15px] font-semibold tracking-tight">HttpOnly, SameSite=Lax, Secure cookies</h3>
              <p className="mt-1 text-[13.5px] leading-6 text-fg-muted">
                Sessions live in Better Auth cookies prefixed <code className="rounded bg-bg-muted px-1 font-mono text-[12px] text-fg">polyllm</code>: HttpOnly (not readable by JavaScript), SameSite=Lax, and Secure in production. Sessions last 30 days and are refreshed daily; a 5-minute cookie cache avoids a database round-trip on every request. Nothing sensitive is kept in localStorage.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1} className="flex gap-3.5">
            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent [&_svg]:size-4.5">
              <KeyRound />
            </span>
            <div>
              <h3 className="text-[15px] font-semibold tracking-tight">Verified e-mail, revocable sessions</h3>
              <p className="mt-1 text-[13.5px] leading-6 text-fg-muted">
                E-mail verification is mandatory before the first sign-in (links valid 24 h). Password reset links expire after 60 minutes and every other session is revoked when the password changes. Changing your e-mail or deleting the account requires a confirmation link sent to the current address. Auth requests are only accepted from the app&apos;s own origin.
              </p>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Headers */}
      <Section id="headers" className="py-14 sm:py-20">
        <div className="grid gap-10 lg:grid-cols-12">
          <div className="lg:col-span-4">
            <SectionHeading
              eyebrow="Transport & headers"
              title="A strict Content-Security-Policy and hardened response headers"
              description={
                <>
                  Set globally in <code className="rounded bg-bg-muted px-1 font-mono text-[12px] text-fg">next.config.ts</code>. The site cannot be framed, scripts and connections are restricted to our own origin, and HTTPS is enforced for a year with HSTS. The <code className="rounded bg-bg-muted px-1 font-mono text-[12px] text-fg">X-Powered-By</code> header is removed.
                </>
              }
            />
            <Reveal delay={0.1}>
              <p className="mt-6 rounded-xl border border-dashed border-border-strong/70 p-4 text-[13px] leading-6 text-fg-muted">
                <span className="font-medium text-fg">Trade-off, stated plainly:</span> <code className="font-mono text-[12px]">script-src</code> and <code className="font-mono text-[12px]">style-src</code> include <code className="font-mono text-[12px]">&apos;unsafe-inline&apos;</code> because Next.js hydration and Radix components inject inline scripts and style attributes. There are no third-party scripts on the site, so the practical exposure is small, but nonces would be stricter and are on the list.
              </p>
            </Reveal>
          </div>
          <Reveal delay={0.05} className="lg:col-span-8">
            <dl className="divide-y divide-hairline rounded-2xl bg-bg-subtle">
              {HEADERS.map(([k, v]) => (
                <div key={k} className="grid gap-1 px-4 py-3.5 sm:grid-cols-[14rem_1fr] sm:gap-4 sm:px-5">
                  <dt className="font-mono text-[12.5px] font-medium text-fg">{k}</dt>
                  <dd className="break-words font-mono text-[12px] leading-5 text-fg-muted">{v}</dd>
                </div>
              ))}
            </dl>
          </Reveal>
        </div>
      </Section>

      {/* Rate limits */}
      <Section id="rate-limits" tone="subtle" className="py-14 sm:py-20">
        <SectionHeading
          eyebrow="Rate limits"
          title="Brute force and abuse are blunted per account"
          description="Authentication routes are limited by Better Auth per client; application routes use a sliding-window limiter keyed by user id. Limits are conservative for a single-user workspace and return HTTP 429 with a Retry-After header."
        />
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {[
            { title: "Authentication", rows: AUTH_LIMITS, icon: <ShieldCheck /> },
            { title: "Application", rows: APP_LIMITS, icon: <Gauge /> },
          ].map((group, gi) => (
            <Reveal key={group.title} delay={0.05 * gi}>
              <h3 className="flex items-center gap-2 text-[15px] font-semibold tracking-tight [&_svg]:size-4 [&_svg]:text-accent">
                {group.icon} {group.title}
              </h3>
              <dl className="mt-3 divide-y divide-hairline rounded-2xl bg-bg-elevated">
                {group.rows.map(([k, v]) => (
                  <div key={k} className="flex items-center justify-between gap-4 px-4 py-2.5 text-[13.5px]">
                    <dt className="text-fg-muted">{k}</dt>
                    <dd className="font-mono text-[12.5px] tabular-nums text-fg">{v}</dd>
                  </div>
                ))}
              </dl>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Audit log */}
      <Section id="audit" className="py-14 sm:py-20">
        <div className="grid gap-10 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <SectionHeading
              eyebrow="Audit log"
              title="Security-relevant actions are recorded and shown to you"
              description="Each event stores the action, your user id, the requesting IP address, a truncated user agent and non-sensitive metadata (for example which provider a key belongs to — never the key). The log is yours: the most recent events are displayed in Settings → Account, and deleting your account removes them with everything else."
            />
            <Reveal delay={0.1}>
              <p className="mt-5 flex items-start gap-2 text-[13.5px] leading-6 text-fg-muted">
                <ScrollText className="mt-1 size-4 shrink-0 text-accent" />
                Server logs are structured JSON; every string passes through a secret redactor (provider key patterns, bearer tokens) and keys named like api key, password, token, cookie, prompt or content are replaced by <code className="rounded bg-bg-muted px-1 font-mono text-[12px] text-fg">[redacted]</code>. Prompts and answers are not logged.
              </p>
            </Reveal>
          </div>
          <Reveal delay={0.05} className="lg:col-span-7">
            <ul className="flex flex-wrap gap-2">
              {AUDIT_EVENTS.map((e) => (
                <li key={e} className="rounded-lg bg-bg-subtle px-2.5 py-1.5 font-mono text-[12px] text-fg-muted">
                  {e}
                </li>
              ))}
            </ul>
            <div className="mt-6 rounded-2xl bg-bg-subtle p-4 sm:p-5">
              <p className="text-[13px] font-medium">What we deliberately do not do</p>
              <ul className="mt-2 space-y-1.5 text-[13.5px] leading-6 text-fg-muted">
                <li>· No analytics trackers, advertising pixels or fingerprinting scripts on any page.</li>
                <li>· No third-party inference brokers: requests go to the provider you picked and nowhere else.</li>
                <li>· No training on your data, and temporary chats are never written to the database.</li>
                <li>· No owner keys for user traffic: the operator&apos;s own provider keys are used only to sync the public model registry.</li>
              </ul>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* CTA */}
      <Section tone="subtle" className="py-14 sm:py-16">
        <Reveal className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
          <div>
            <h2 className="text-balance text-2xl font-semibold tracking-tight">Questions about any of this?</h2>
            <p className="mt-2 max-w-xl text-[15px] leading-7 text-fg-muted">
              Write to{" "}
              <a href="mailto:contact@spboucher.ai" className="font-medium text-accent underline-offset-4 hover:underline">
                contact@spboucher.ai
              </a>
              . Responsible disclosure is welcome; please give us a reasonable window before publishing.
            </p>
          </div>
          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Start using PolyLLM <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">
              <Link href="/privacy">Privacy policy</Link>
            </Button>
          </div>
        </Reveal>
      </Section>
    </>
  );
}