"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ShieldCheck } from "lucide-react";
import { useI18n } from "@/lib/i18n/context";
import { LanguageSwitch } from "@/components/common/LanguageSwitch";
import { AuthBrandPanel } from "./AuthBrandPanel";

/**
 * Split shell shared by /auth/login and /auth/signup: inverse-surface brand
 * panel on the left (desktop), form column on the right. Below `lg` the panel
 * drops away and the form takes the full width with a compact brand header.
 */
export function AuthLayout({ children }: { children: React.ReactNode }) {
  const { language } = useI18n();
  const isDe = language === "de";

  return (
    <div className="min-h-screen bg-[#F6F9FF] lg:grid lg:grid-cols-[1.05fr_minmax(520px,1fr)]">
      <aside className="hidden lg:block lg:h-screen lg:sticky lg:top-0">
        <AuthBrandPanel isDe={isDe} />
      </aside>

      <div className="flex flex-col min-h-screen">
        <header className="flex items-center justify-between gap-4 px-5 sm:px-8 lg:px-12 py-5 border-b border-[#E2E8F0] lg:border-b-0">
          <Link href="/" className="flex items-center gap-3 group lg:hidden">
            <div className="w-10 h-10 bg-white border-2 border-black p-0.5 overflow-hidden flex items-center justify-center shrink-0 transition-transform group-hover:scale-95">
              <Image
                src="/icon.png"
                alt=""
                width={40}
                height={40}
                className="w-full h-full object-contain"
                priority
              />
            </div>
            <span className="font-display font-black text-base tracking-tight text-black leading-none">
              SCANRECEIPTS
            </span>
          </Link>

          <div className="hidden lg:block" />

          <div className="flex items-center gap-3">
            <LanguageSwitch />
            <Link
              href="/"
              className="hidden sm:flex items-center gap-1.5 px-3 h-[34px] border border-[#E2E8F0] bg-white font-mono text-[11px] uppercase tracking-caps text-[#475569] hover:border-black hover:text-black transition-colors"
            >
              <ArrowLeft className="w-3.5 h-3.5" aria-hidden="true" />
              {isDe ? "Startseite" : "Home"}
            </Link>
          </div>
        </header>

        <main className="flex-1 flex items-center justify-center px-5 sm:px-8 lg:px-12 py-10 sm:py-14">
          <div className="w-full max-w-[420px] auth-rise">
            {children}

            {/* The brand panel carries this on desktop; keep the promise visible
                on small screens where the panel is dropped. */}
            <p className="lg:hidden mt-6 pt-5 border-t border-[#E2E8F0] flex items-center gap-2 text-[12px] text-[#64748B] leading-snug">
              <ShieldCheck className="w-4 h-4 text-emerald-600 shrink-0" aria-hidden="true" />
              {isDe ? "Sicher verschlüsselt" : "SSL encrypted"}
            </p>
          </div>
        </main>

        <footer className="px-5 sm:px-8 lg:px-12 py-6 border-t border-[#E2E8F0]">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 font-mono text-[11px] text-[#64748B]">
            <span>© {new Date().getFullYear()} SCANRECEIPTS</span>
            <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
              <Link href="/privacy" className="hover:text-black transition-colors">
                {isDe ? "Datenschutz" : "Privacy"}
              </Link>
              <Link href="/terms" className="hover:text-black transition-colors">
                {isDe ? "AGB" : "Terms"}
              </Link>
              <Link href="/disclaimer" className="hover:text-black transition-colors">
                {isDe ? "Haftungsausschluss" : "Legal Notice"}
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}
