import React from 'react';
import { LanguageSwitcher } from '../../components/LanguageSwitcher';
import { FrostedSurface } from '../../components/tenant';

export interface TenantWelcomeLayoutProps {
  eyebrow?: string;
  title?: string;
  subtitle?: string;
  headerAction?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
}

export function TenantWelcomeLayout({
  eyebrow,
  title,
  subtitle,
  headerAction,
  footer,
  children,
}: TenantWelcomeLayoutProps) {
  React.useEffect(() => {
    document.body.classList.add('tenant-admin-theme', 'tenant-admin-welcome-theme');

    return () => {
      document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
    };
  }, []);

  return (
    <div className="relative min-h-svh w-full overflow-hidden bg-slate-950 text-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.28),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.25),_transparent_65%)] motion-safe:animate-[aurora_20s_ease-in-out_infinite]"
      />
      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900/70 to-[#1d1130]" />

      <div className="relative z-10 mx-auto flex min-h-svh w-full max-w-5xl flex-col gap-10 px-6 py-12 sm:px-8 md:py-16 lg:px-12">
        <FrostedSurface className="flex w-full flex-1 flex-col gap-10 rounded-[36px] border border-white/15 p-8 text-slate-900 shadow-2xl shadow-rose-300/20 backdrop-blur-2xl transition-colors duration-200 dark:text-slate-100 md:gap-14 md:p-14">
          <header className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
            <div className="max-w-xl space-y-4">
              {eyebrow ? (
                <p className="text-xs uppercase tracking-[0.35em] text-rose-300 dark:text-rose-200">{eyebrow}</p>
              ) : null}
              {title ? (
                <h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 md:text-5xl">
                  {title}
                </h1>
              ) : null}
              {subtitle ? (
                <p className="text-base text-slate-600 dark:text-slate-300 md:text-lg">{subtitle}</p>
              ) : null}
            </div>
            <div className="flex shrink-0 items-center gap-2">
              <LanguageSwitcher />
              {headerAction}
            </div>
          </header>

          <main className="flex flex-1 flex-col gap-8">
            {children}
          </main>

          {footer ? (
            <footer className="flex flex-col items-center gap-4 text-sm text-slate-600 dark:text-slate-400 md:flex-row md:justify-between">
              {footer}
            </footer>
          ) : null}
        </FrostedSurface>
      </div>
    </div>
  );
}

TenantWelcomeLayout.displayName = 'TenantWelcomeLayout';