import Link from 'next/link';
import { ThemeToggle } from '@/components/ui/theme-toggle';

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative min-h-screen grid lg:grid-cols-2 bg-paper dark:bg-night">
      <div className="absolute top-6 right-6 z-20">
        <ThemeToggle />
      </div>
      {/* Brand panel — hidden on mobile, signature ambient signal-bars pattern */}
      <div className="hidden lg:flex relative flex-col justify-between overflow-hidden bg-night-deep p-12">
        <BackgroundSignalGrid />
        <Link href="/" className="relative z-10 font-display text-xl text-paper">
          Swift<span className="text-azure">Pay</span>
        </Link>
        <div className="relative z-10 max-w-md">
          <p className="font-display text-3xl leading-tight text-paper">
            Airtime, data, bills, and exam pins — settled in seconds.
          </p>
          <p className="mt-4 text-slate-muted text-sm">
            Built for the way Nigerians actually top up: fast, mobile-first, and always online.
          </p>
        </div>
        <p className="relative z-10 text-xs text-slate-muted">
          © {new Date().getFullYear()} SwiftPay VTU. All rights reserved.
        </p>
      </div>

      {/* Form panel */}
      <div className="flex items-center justify-center p-6 sm:p-12">
        <div className="w-full max-w-sm">{children}</div>
      </div>
    </div>
  );
}

/** Ambient background: rows of signal bars fading into the dark, at rest (no animation) so it reads as texture, not noise. */
function BackgroundSignalGrid() {
  const rows = 6;
  const cols = 10;
  return (
    <div className="absolute inset-0 opacity-[0.07] grid grid-rows-6 gap-8 p-8" aria-hidden>
      {Array.from({ length: rows }).map((_, r) => (
        <div key={r} className="flex gap-8">
          {Array.from({ length: cols }).map((_, c) => (
            <div key={c} className="flex items-end gap-0.5 h-4">
              <span className="w-1 h-1.5 bg-azure rounded-sm" />
              <span className="w-1 h-2.5 bg-azure rounded-sm" />
              <span className="w-1 h-3.5 bg-maroon rounded-sm" />
              <span className="w-1 h-4 bg-maroon rounded-sm" />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}