import Link from "next/link";
import { ArrowLeft, Check, Zap } from "lucide-react";
import { ThemeToggle } from "@/components/shared/theme-toggle";
import { authTexts } from "@/lib/i18n/auth";
import { commonTexts } from "@/lib/i18n/common";

const BRAND_GRADIENT =
  "radial-gradient(900px 620px at 12% 8%, rgba(37,99,235,0.45), transparent 62%), " +
  "radial-gradient(760px 520px at 92% 88%, rgba(6,182,212,0.26), transparent 58%), " +
  "linear-gradient(158deg, #0b1430 0%, #0e1a3a 46%, #070d1c 100%)";

const BRAND_PATTERN =
  "radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px)";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-svh bg-background lg:grid lg:grid-cols-[0.92fr_1.08fr]">
      {/* ---------------------------------------------------- brand panel */}
      <aside className="relative hidden overflow-hidden p-10 text-white lg:flex lg:flex-col lg:justify-between xl:p-14">
        <div
          aria-hidden
          className="absolute inset-0"
          style={{ background: BRAND_GRADIENT }}
        />
        <div
          aria-hidden
          className="absolute inset-0 opacity-[0.13]"
          style={{ backgroundImage: BRAND_PATTERN, backgroundSize: "22px 22px" }}
        />
        <div
          aria-hidden
          className="absolute -top-24 -left-24 size-[420px] rounded-full bg-blue-500/20 blur-3xl"
        />
        <div
          aria-hidden
          className="absolute -right-32 bottom-0 size-[380px] rounded-full bg-cyan-400/10 blur-3xl"
        />

        <div className="relative">
          <Link href="/" className="inline-flex items-center gap-2.5">
            <span className="flex size-9 items-center justify-center rounded-xl bg-blue-600 shadow-lg shadow-blue-600/30">
              <Zap className="size-5" strokeWidth={2.5} />
            </span>
            <span className="font-display text-lg font-semibold tracking-tight">
              {commonTexts.appName}
            </span>
          </Link>
        </div>

        <div className="relative max-w-md">
          <h2 className="font-display text-[2.1rem] leading-[1.15] font-semibold tracking-tight xl:text-[2.4rem]">
            {authTexts.brandPitch}
          </h2>
          <p className="mt-4 text-sm leading-relaxed text-white/60">
            {authTexts.brandLead}
          </p>

          <ul className="mt-9 space-y-3.5">
            {authTexts.brandPoints.map((point) => (
              <li key={point} className="flex items-start gap-3 text-sm text-white/75">
                <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-cyan-400/15 text-cyan-300 ring-1 ring-cyan-400/25">
                  <Check className="size-3" strokeWidth={3} />
                </span>
                <span>{point}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="relative flex items-center gap-3 text-[11px] tracking-wider text-white/35 uppercase">
          <span className="h-px w-8 bg-white/20" />
          {authTexts.brandFootnote}
        </div>
      </aside>

      {/* ------------------------------------------------------ form side */}
      <main className="relative flex min-h-svh flex-col">
        <header className="flex items-center justify-between px-5 py-5 sm:px-8">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <ArrowLeft className="size-4" />
            {authTexts.backToSite}
          </Link>
          <ThemeToggle />
        </header>

        <div className="flex flex-1 items-center justify-center px-5 pb-14 sm:px-8">
          {children}
        </div>
      </main>
    </div>
  );
}