import React from 'react';
import { NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
import toast from 'react-hot-toast';
import {
  ADMIN_HOME_PATH,
  ADMIN_EVENTS_PATH,
  ADMIN_SETTINGS_PATH,
  ADMIN_BILLING_PATH,
  ADMIN_ENGAGEMENT_PATH,
} from '../constants';
import { LanguageSwitcher } from './LanguageSwitcher';
import { registerApiErrorListener } from '../lib/apiError';

const navItems = [
  { to: ADMIN_HOME_PATH, labelKey: 'navigation.dashboard', end: true },
  { to: ADMIN_EVENTS_PATH, labelKey: 'navigation.events' },
  { to: ADMIN_ENGAGEMENT_PATH, labelKey: 'navigation.engagement' },
  { to: ADMIN_BILLING_PATH, labelKey: 'navigation.billing' },
  { to: ADMIN_SETTINGS_PATH, labelKey: 'navigation.settings' },
];

interface AdminLayoutProps {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
  children: React.ReactNode;
}

export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutProps) {
  const { t } = useTranslation('common');

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

  React.useEffect(() => {
    const unsubscribe = registerApiErrorListener((detail) => {
      const fallback = t('errors.generic');
      const message = detail?.message?.trim() ? detail.message : fallback;
      toast.error(message, {
        id: detail?.code ? `api-error-${detail.code}` : undefined,
      });
    });

    return unsubscribe;
  }, [t]);

  return (
    <div className="min-h-screen bg-brand-gradient text-brand-slate">
      <header className="border-b border-brand-rose-soft bg-brand-card/90 shadow-brand-primary backdrop-blur-md">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-6 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.35em] text-brand-rose">{t('app.brand')}</p>
            <h1 className="font-display text-3xl font-semibold text-brand-slate">{title}</h1>
            {subtitle && <p className="mt-1 text-sm font-sans-marketing text-brand-navy/75">{subtitle}</p>}
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <LanguageSwitcher />
            {actions}
          </div>
        </div>
        <nav className="mx-auto flex w-full max-w-6xl gap-3 px-6 pb-4 text-sm font-medium text-brand-navy/80">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              end={item.end}
              className={({ isActive }) =>
                cn(
                  'rounded-full px-4 py-2 transition-colors',
                  isActive
                    ? 'bg-brand-rose text-white shadow-md shadow-rose-400/40'
                    : 'bg-white/70 text-brand-navy/80 hover:bg-white hover:text-brand-slate'
                )
              }
            >
              {t(item.labelKey)}
            </NavLink>
          ))}
        </nav>
      </header>
      <main className="mx-auto w-full max-w-6xl px-6 py-10">
        <div className="grid gap-6">{children}</div>
      </main>
    </div>
  );
}