"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeft, BadgeDollarSign, ShieldCheck, Zap } from "lucide-react";
import { Logo } from "@/components/common/Logo";
import { LanguageDropdown } from "@/components/i18n/LanguageDropdown";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { GlobePulse } from "@/components/ui/cobe-globe-pulse";
import { PageTransition } from "@/components/motion/PageTransition";
import { useTranslation } from "@/hooks/useTranslation";

interface Props {
  children: ReactNode;
}

const TRUST = [
  { icon: ShieldCheck, key: "trust.badge1" },
  { icon: Zap, key: "calculator.minutes" },
  { icon: BadgeDollarSign, key: "rates.feature2Title" },
];

export function AuthShell({ children }: Props) {
  const { t } = useTranslation();

  return (
    <div className="relative grid min-h-dvh bg-slate-950 lg:grid-cols-[1.05fr_1fr]">
      {/* ── Left panel — shared globe stage (pinned to the viewport) ── */}
      <aside className="relative isolate hidden overflow-hidden bg-slate-950 text-white lg:sticky lg:top-0 lg:flex lg:h-dvh lg:flex-col lg:self-start">
        {/* Dark stage + brand/cyan glows behind the globe */}
        <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
          <div
            className="absolute left-1/2 top-[58%] h-[38rem] w-[38rem] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-50 blur-3xl"
            style={{
              background:
                "radial-gradient(circle, rgba(51,204,221,0.18) 0%, rgba(99,102,241,0.14) 40%, transparent 70%)",
            }}
          />
          <div
            className="absolute -bottom-24 -left-20 h-80 w-80 rounded-full opacity-45 blur-3xl"
            style={{
              background:
                "radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(51,204,221,0.1) 45%, transparent 72%)",
            }}
          />
          <div className="absolute inset-0 grid-pattern opacity-[0.05]" />
        </div>

        <div className="flex items-center justify-between p-8">
          <Logo variant="dark" />
          <Link
            href="/"
            className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur-md transition hover:bg-white/15"
          >
            <ArrowLeft className="h-4 w-4" />
            {t("app.auth.backToHome")}
          </Link>
        </div>

        <div className="flex min-h-0 flex-1 flex-col px-12 py-6">
          <div>
            <h1 className="!text-white text-balance text-4xl font-bold leading-tight drop-shadow-sm">
              {t("app.auth.splitTitle")}
            </h1>
            <p className="mt-4 max-w-md text-pretty leading-relaxed text-white/80">
              {t("app.auth.splitSubtitle")}
            </p>
          </div>

          {/* Globe + trust — grouped near the top so the text sits right under the globe */}
          <div className="flex min-h-0 flex-1 flex-col items-center gap-4 -translate-y-3">
            <GlobePulse className="aspect-square max-h-[26rem] w-full max-w-[26rem]" />
            <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-white/65">
              {TRUST.map((item) => (
                <span key={item.key} className="inline-flex items-center gap-1.5 text-xs font-medium">
                  <item.icon className="h-3.5 w-3.5 text-brand-300" aria-hidden />
                  {t(item.key)}
                </span>
              ))}
            </div>
          </div>
        </div>

        <p className="px-12 pb-8 text-xs text-white/60">
          © {new Date().getFullYear()} XRemit · Licensed money transmitter
        </p>
      </aside>

      {/* ── Right panel — form ── */}
      <main className="relative flex min-h-dvh flex-col overflow-hidden bg-[#060d1f]">
        {/* Subtle rounded glow — top right (desktop) */}
        <div aria-hidden className="pointer-events-none absolute inset-0 hidden lg:block">
          <div
            className="absolute -right-24 -top-24 h-96 w-96 rounded-full opacity-45 blur-3xl"
            style={{
              background:
                "radial-gradient(circle, rgba(99,102,241,0.18) 0%, rgba(51,204,221,0.10) 45%, transparent 72%)",
            }}
          />
        </div>

        {/* Navy geometric bg — mobile only */}
        <div aria-hidden className="pointer-events-none absolute inset-0 lg:hidden">
          <div className="absolute inset-0" style={{ background: "linear-gradient(145deg, #060d1f 0%, #0a1628 50%, #0d0a20 100%)" }} />
          <div className="absolute -end-16 -top-16 h-72 w-72 rounded-full blur-3xl" style={{ background: "radial-gradient(circle, rgba(99,102,241,0.35) 0%, transparent 70%)" }} />
          <div className="absolute -start-12 bottom-20 h-64 w-64 rounded-full blur-3xl" style={{ background: "radial-gradient(circle, rgba(139,92,246,0.25) 0%, transparent 70%)" }} />
          <div className="absolute start-1/2 top-1/3 h-40 w-40 -translate-x-1/2 -translate-y-1/2 rounded-full blur-2xl" style={{ background: "radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%)" }} />
          <div className="absolute -end-20 -top-20 h-80 w-80 rounded-full border border-white/[0.06]" />
          <div className="absolute -end-10 -top-10 h-60 w-60 rounded-full border border-white/[0.04]" />
          <div className="absolute -start-24 bottom-8 h-72 w-72 rounded-full border border-white/[0.05]" />
          <div className="absolute -start-12 bottom-20 h-48 w-48 rounded-full border border-indigo-400/10" />
          <div className="absolute inset-0 grid-pattern opacity-[0.04]" />
        </div>

        {/* Mobile top bar */}
        <div className="relative z-20 flex items-center justify-between gap-3 px-6 py-5 sm:px-8 lg:hidden">
          <Logo variant="dark" />
          <div className="flex items-center gap-2">
            <LanguageDropdown />
            <Link
              href="/"
              className="inline-flex items-center gap-1.5 text-sm font-semibold text-white/80 transition hover:text-white dark:text-white/70 dark:hover:text-white"
            >
              <ArrowLeft className="h-4 w-4" />
              {t("app.auth.backToHome")}
            </Link>
          </div>
        </div>

        {/* Desktop top-right controls */}
        <div className="absolute end-6 top-5 z-20 hidden items-center gap-2 lg:flex">
          <LanguageDropdown />
          <ThemeToggle />
        </div>

        <div className="relative flex flex-1 items-center justify-center px-4 py-6 sm:px-8 sm:py-10 lg:px-10 lg:py-14">
          <div className="w-full max-w-md">
            {/* Glass card — dark navy panel keeps it consistent with the left in both themes */}
            <div className="rounded-3xl bg-white/95 p-7 shadow-2xl ring-1 ring-white/20 backdrop-blur-xl sm:p-9 dark:bg-slate-900/95 dark:ring-white/10">
              <PageTransition>{children}</PageTransition>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}