'use client';

import type { ReactNode } from 'react';
import { ArrowLeft } from 'lucide-react';
import { Link } from '@/i18n/Link';
import { useT } from '@/i18n/I18nProvider';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { Logo } from '@/components/landing/Logo';
import { AuthSky } from './AuthSky';

// Auth shell that carries the Abrban brand straight from the landing: the same
// bright, cloud-filled sky (see AuthSky) sits behind the form, which lives in the
// same frosted dark-glass panel — so login/register read as one world with the
// public landing. Direction is inherited from the root layout.
export function AuthShell({
  title,
  subtitle,
  children,
  altPrompt,
  altHref,
  altLabel,
}: {
  title: string;
  subtitle: string;
  children: ReactNode;
  altPrompt?: string;
  altHref?: string;
  altLabel?: string;
}) {
  const t = useT();
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-[#9fb4d4] text-white">
      {/* Bright cloud-filled sky backdrop, shared with the landing */}
      <AuthSky />

      {/* Header */}
      <header className="relative z-10 mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
        {/* Brand returns to the auth entry; only the explicit "back to home"
            link leaves for the public landing page. */}
        <Link href="/login" aria-label={t.common.appName} className="transition hover:opacity-90">
          <Logo className="abrban-ink" />
        </Link>
        <div className="flex items-center gap-1">
          <LanguageSwitcher className="text-white/85 hover:text-white" />
          <Link
            href="/"
            className="rounded-lg px-3 py-2 text-sm font-medium text-white/85 transition hover:text-white"
          >
            {t.auth.backHome}
          </Link>
        </div>
      </header>

      {/* Form card */}
      <main className="relative z-10 flex min-h-[calc(100vh-80px)] items-center justify-center px-4 pb-16">
        <div className="w-full max-w-md">
          <div className="mb-7 text-center">
            <h1 className="abrban-ink text-3xl font-black tracking-tight sm:text-4xl">{title}</h1>
            <p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
          </div>

          <div className="auth-glass rounded-[1.75rem] p-6 sm:p-8">{children}</div>

          {altPrompt && altHref && altLabel && (
            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-2 gap-y-2">
              <span
                className="text-base font-semibold text-slate-900"
                style={{ textShadow: '0 1px 3px rgba(255,255,255,0.7)' }}
              >
                {altPrompt}
              </span>
              <Link
                href={altHref}
                className="inline-flex items-center gap-1.5 rounded-xl border border-white/45 bg-slate-900/45 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-black/25 backdrop-blur-md transition hover:border-white/70 hover:bg-slate-900/65"
              >
                {altLabel}
                <ArrowLeft className="h-4 w-4 ltr:rotate-180" />
              </Link>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}