import Link from "next/link";
import { Check } from "lucide-react";
import { Logo, LogoMark, Wordmark } from "@/components/brand/logo";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { ThemeToggle } from "@/components/marketing/theme-toggle";
import { PROVIDER_ORDER } from "@/lib/client/providers";

const POINTS = ["Bring your own keys — encrypted with AES-256-GCM, never sent to the browser", "Chat, Arena, model catalog, projects and usage analytics in one workspace", "Free to use; you pay providers directly at list price"];

/**
 * Auth shell. Phones: full-height, brand mark on top, the form fills the width, safe areas
 * respected. Desktop (≥ lg): a quiet brand panel on the left, the form centered on the right.
 */
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative flex min-h-dvh flex-col overflow-x-clip lg:grid lg:grid-cols-[1.05fr_1fr]">
      {/* Brand panel — desktop only */}
      <aside className="relative hidden flex-col justify-between overflow-hidden border-r border-border bg-bg-subtle px-12 py-10 lg:flex" aria-label="About PolyLLM">
        <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-70 [mask-image:radial-gradient(ellipse_70%_60%_at_30%_20%,black_20%,transparent_100%)] dark:opacity-40" />
        <div aria-hidden className="pointer-events-none absolute -left-24 top-1/3 h-[24rem] w-[30rem] rounded-full bg-accent/15 blur-[110px] dark:bg-accent/10" />
        <Link href="/" className="relative inline-flex w-fit rounded-md" aria-label="PolyLLM home">
          <Logo size={26} />
        </Link>
        <div className="relative max-w-md">
          <h2 className="text-balance text-4xl font-semibold tracking-[-0.03em]">
            One interface.
            <br />
            <span className="text-gradient">Every model.</span>
          </h2>
          <ul className="mt-7 space-y-3">
            {POINTS.map((p) => (
              <li key={p} className="flex items-start gap-2.5 text-[15px] leading-6 text-fg-muted">
                <span className="mt-1 flex size-4 shrink-0 items-center justify-center rounded-full bg-success-soft text-success">
                  <Check className="size-2.5" strokeWidth={3} />
                </span>
                {p}
              </li>
            ))}
          </ul>
          <ul className="mt-8 flex flex-wrap gap-x-4 gap-y-2" aria-label="Supported providers">
            {PROVIDER_ORDER.map((p) => (
              <li key={p} className="inline-flex items-center text-fg-subtle">
                <ProviderIcon provider={p} size={16} />
              </li>
            ))}
          </ul>
        </div>
        <p className="relative text-xs text-fg-subtle">Hosted on MacLustr · Made by Simon-Pierre Boucher</p>
      </aside>

      {/* Form column */}
      <div className="relative flex min-h-dvh flex-col lg:min-h-0">
        <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_80%_55%_at_50%_0%,black_20%,transparent_100%)] dark:opacity-40 lg:hidden" />
        <header className="relative z-10 flex h-14 shrink-0 items-center justify-between px-5 pt-safe sm:px-8">
          <Link href="/" className="rounded-md lg:invisible" aria-label="PolyLLM home">
            <Logo size={24} />
          </Link>
          <ThemeToggle />
        </header>
        <main className="relative z-10 flex flex-1 flex-col justify-start px-4 pb-8 pt-2 sm:justify-center sm:px-8 sm:pb-12 sm:pt-0">
          <div className="mx-auto w-full max-w-[420px]">
            <div className="mb-6 flex items-center gap-2.5 sm:hidden">
              <LogoMark size={36} className="shadow-md" />
              <Wordmark className="text-[20px]" />
            </div>
            {children}
          </div>
        </main>
        <footer className="relative z-10 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 px-4 pb-[max(20px,var(--sab))] text-xs text-fg-subtle">
          <span>© {new Date().getFullYear()} PolyLLM</span>
          <Link href="/privacy" className="inline-flex min-h-[28px] items-center hover:text-fg">
            Privacy
          </Link>
          <Link href="/terms" className="inline-flex min-h-[28px] items-center hover:text-fg">
            Terms
          </Link>
          <Link href="/security" className="inline-flex min-h-[28px] items-center hover:text-fg">
            Security
          </Link>
          <Link href="/contact" className="inline-flex min-h-[28px] items-center hover:text-fg">
            Help
          </Link>
        </footer>
      </div>
    </div>
  );
}