"use client";

import { useTranslations } from "next-intl";
import BrandLogo from "@/components/brand/BrandLogo";
import LanguageSwitcher from "@/components/layout/LanguageSwitcher";
import { useBrand } from "@/components/providers/BrandProvider";

interface AuthLayoutProps {
  children: React.ReactNode;
  title: string;
  subtitle: string;
}

export default function AuthLayout({ children, title, subtitle }: AuthLayoutProps) {
  const t = useTranslations("auth");
  const brand = useBrand();
  const brandTitle = brand.tagline ?? t("brandTitle");

  return (
    <div className="min-h-screen flex">
      <div className="hidden lg:flex lg:w-[45%] relative overflow-hidden bg-[var(--bg-elevated)]" aria-hidden="true">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_30%_20%,var(--accent-muted),transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_70%_80%,var(--accent-glow),transparent_50%)]" />
        <div className="absolute top-0 end-0 w-px h-full bg-gradient-to-b from-transparent via-[var(--accent)]/30 to-transparent" />

        <div className="relative z-10 flex flex-col justify-between p-12 w-full">
          <div className="flex items-center">
            <BrandLogo size="lg" glow />
          </div>

          <div className="space-y-6 max-w-md">
            <h2 className="text-4xl font-semibold leading-tight tracking-tight">
              {brandTitle}
            </h2>
            <p className="text-[var(--text-muted)] text-lg leading-relaxed">
              {t("brandSubtitle", { appName: brand.name })}
            </p>
            <div className="flex flex-col gap-4 pt-4 sm:flex-row sm:gap-6">
              {[
                { label: t("featureFreshLabel"), desc: t("featureFresh") },
                { label: t("featureCraftLabel"), desc: t("featureCraft") },
                { label: t("featureWarmLabel"), desc: t("featureWarm") },
              ].map((f) => (
                <div key={f.label}>
                  <p className="text-sm font-semibold text-[var(--accent)]">{f.label}</p>
                  <p className="text-xs text-[var(--text-faint)] mt-0.5">{f.desc}</p>
                </div>
              ))}
            </div>
          </div>

          <p className="text-xs text-[var(--text-faint)]">
            {t("copyright", { year: new Date().getFullYear(), appName: brand.name })}
          </p>
        </div>
      </div>

      <main className="relative flex flex-1 items-center justify-center bg-[var(--bg)] p-4 sm:p-6 lg:p-12">
        <div className="absolute top-4 end-4 z-10 sm:top-6 sm:end-6">
          <LanguageSwitcher />
        </div>
        <div className="w-full max-w-[400px] animate-fade-in pt-12 sm:pt-10 lg:pt-0">
          <div className="mb-8 flex items-center lg:hidden">
            <BrandLogo size="md" />
          </div>

          <div className="mb-6 sm:mb-8">
            <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">{title}</h1>
            <p className="mt-1.5 text-sm text-[var(--text-muted)]">{subtitle}</p>
          </div>

          {children}
        </div>
      </main>
    </div>
  );
}