import React from 'react';
import { NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { LayoutDashboard, CalendarDays, Camera, Settings } from 'lucide-react';
import toast from 'react-hot-toast';
import { cn } from '@/lib/utils';
import {
  ADMIN_HOME_PATH,
  ADMIN_EVENTS_PATH,
  ADMIN_EVENT_VIEW_PATH,
  ADMIN_EVENT_PHOTOS_PATH,
  ADMIN_SETTINGS_PATH,
  ADMIN_BILLING_PATH,
} from '../constants';
import { registerApiErrorListener } from '../lib/apiError';
import { getDashboardSummary, getEvents, getTenantPackagesOverview } from '../api';
import { NotificationCenter } from './NotificationCenter';
import { UserMenu } from './UserMenu';
import { useEventContext } from '../context/EventContext';
import { EventSwitcher, EventMenuBar } from './EventNav';

type NavItem = {
  key: string;
  to: string;
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  end?: boolean;
  highlight?: boolean;
  prefetchKey?: string;
};

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

export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutProps) {
  const { t } = useTranslation('common');
  const prefetchedPathsRef = React.useRef<Set<string>>(new Set());
  const { events } = useEventContext();
  const singleEvent = events.length === 1 ? events[0] : null;
  const eventsPath = singleEvent?.slug ? ADMIN_EVENT_VIEW_PATH(singleEvent.slug) : ADMIN_EVENTS_PATH;
  const eventsLabel = events.length === 1
    ? t('navigation.event', { defaultValue: 'Event' })
    : t('navigation.events');

  const photosPath = singleEvent?.slug ? ADMIN_EVENT_PHOTOS_PATH(singleEvent.slug) : ADMIN_EVENTS_PATH;
  const photosLabel = t('navigation.photos', { defaultValue: 'Fotos' });
  const settingsLabel = t('navigation.settings');

  const navItems = React.useMemo<NavItem[]>(() => [
    {
      key: 'dashboard',
      to: ADMIN_HOME_PATH,
      label: t('navigation.dashboard'),
      icon: LayoutDashboard,
      end: true,
      prefetchKey: ADMIN_HOME_PATH,
    },
    {
      key: 'events',
      to: eventsPath,
      label: eventsLabel,
      icon: CalendarDays,
      end: Boolean(singleEvent?.slug),
      highlight: events.length === 1,
      prefetchKey: ADMIN_EVENTS_PATH,
    },
    {
      key: 'photos',
      to: photosPath,
      label: photosLabel,
      icon: Camera,
      end: Boolean(singleEvent?.slug),
      prefetchKey: singleEvent?.slug ? undefined : ADMIN_EVENTS_PATH,
    },
    {
      key: 'settings',
      to: ADMIN_SETTINGS_PATH,
      label: settingsLabel,
      icon: Settings,
      prefetchKey: ADMIN_SETTINGS_PATH,
    },
  ], [eventsLabel, eventsPath, photosPath, photosLabel, settingsLabel, singleEvent, events.length, t]);

  const prefetchers = React.useMemo(() => ({
    [ADMIN_HOME_PATH]: () =>
      Promise.all([
        getDashboardSummary(),
        getEvents(),
        getTenantPackagesOverview(),
      ]).then(() => undefined),
    [ADMIN_EVENTS_PATH]: () => getEvents().then(() => undefined),
    [ADMIN_BILLING_PATH]: () => getTenantPackagesOverview().then(() => undefined),
    [ADMIN_SETTINGS_PATH]: () => Promise.resolve(),
  }), []);

  const triggerPrefetch = React.useCallback(
    (path: string) => {
      if (prefetchedPathsRef.current.has(path)) {
        return;
      }

      const runner = prefetchers[path as keyof typeof prefetchers];
      if (!runner) {
        return;
      }

      prefetchedPathsRef.current.add(path);
      Promise.resolve(runner()).catch(() => {
        prefetchedPathsRef.current.delete(path);
      });
    },
    [prefetchers],
  );

  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="relative min-h-svh overflow-hidden bg-gradient-to-br from-rose-50 via-white to-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_10%_10%,rgba(255,137,170,0.25),transparent_55%),radial-gradient(circle_at_80%_0%,rgba(96,165,250,0.22),transparent_60%)] opacity-60 dark:opacity-30"
      />
      <div aria-hidden className="absolute inset-0 bg-gradient-to-b from-white/80 via-white/60 to-transparent dark:from-slate-950 dark:via-slate-950/90 dark:to-slate-950/80" />
      <div className="relative z-10 flex min-h-svh flex-col">
        <header className="sticky top-0 z-40 border-b border-slate-200/70 bg-white/90 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
            <div className="space-y-1">
              <p className="text-[10px] font-semibold uppercase tracking-[0.4em] text-rose-500 dark:text-rose-200">{t('app.brand')}</p>
              <div>
                <h1 className="text-xl font-semibold text-slate-900 dark:text-white sm:text-2xl">{title}</h1>
                {subtitle ? <p className="text-xs text-slate-600 dark:text-slate-300 sm:text-sm">{subtitle}</p> : null}
              </div>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <EventSwitcher />
              {actions}
              <NotificationCenter />
              <UserMenu />
            </div>
          </div>
          <nav className="hidden border-t border-slate-200/60 dark:border-white/5 sm:block">
            <div className="mx-auto flex w-full max-w-6xl items-center gap-1 px-4 py-2 sm:px-6">
              {navItems.map((item) => (
                <NavLink
                  key={item.key}
                  to={item.to}
                  end={item.end}
                  onPointerEnter={() => triggerPrefetch(item.prefetchKey ?? item.to)}
                  onFocus={() => triggerPrefetch(item.prefetchKey ?? item.to)}
                  onTouchStart={() => triggerPrefetch(item.prefetchKey ?? item.to)}
                  className={({ isActive }) =>
                    cn(
                      'flex items-center gap-2 rounded-2xl px-3 py-2 text-xs font-semibold uppercase tracking-wide transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/60',
                      isActive
                        ? 'bg-rose-600 text-white shadow shadow-rose-300/40'
                        : cn(
                            item.highlight
                              ? 'text-rose-600 dark:text-rose-200'
                              : 'text-slate-500 dark:text-slate-300',
                            'hover:text-slate-900 dark:hover:text-white'
                          )
                    )
                  }
                >
                  <item.icon className="h-4 w-4" />
                  {item.label}
                </NavLink>
              ))}
            </div>
          </nav>
          <EventMenuBar />
        </header>

        <main className="relative z-10 mx-auto w-full max-w-5xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+5.5rem)] pt-5 sm:px-6 md:pb-16">
          <div className="space-y-5">{children}</div>
        </main>

        <TenantMobileNav items={navItems} onPrefetch={triggerPrefetch} />
      </div>
    </div>
  );
}

function TenantMobileNav({
  items,
  onPrefetch,
}: {
  items: NavItem[];
  onPrefetch: (path: string) => void;
}) {
  const { t } = useTranslation('common');

  return (
    <nav className="md:hidden" aria-label={t('navigation.mobile', { defaultValue: 'Tenant Navigation' })}>
      <div
        aria-hidden
        className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-12 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-slate-950 dark:via-slate-950/60 dark:to-transparent"
      />
      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/80 bg-white/95 px-4 pb-[calc(env(safe-area-inset-bottom,0)+0.75rem)] pt-3 shadow-2xl shadow-rose-300/15 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800/70 dark:bg-slate-950/90">
        <div className="mx-auto flex max-w-xl items-center justify-around gap-1">
          {items.map((item) => (
            <NavLink
              key={item.key}
              to={item.to}
              end={item.end}
              onPointerEnter={() => onPrefetch(item.prefetchKey ?? item.to)}
              onFocus={() => onPrefetch(item.prefetchKey ?? item.to)}
              onTouchStart={() => onPrefetch(item.prefetchKey ?? item.to)}
              className={({ isActive }) =>
                cn(
                  'flex flex-col items-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-slate-300 dark:focus-visible:ring-offset-slate-950',
                  isActive
                    ? 'bg-rose-600 text-white shadow-md shadow-rose-400/25'
                    : cn(
                        item.highlight
                          ? 'text-rose-600 dark:text-rose-200'
                          : 'text-slate-600 dark:text-slate-300',
                        'hover:text-rose-700 dark:hover:text-rose-200'
                      )
                )
              }
            >
              <item.icon className="h-5 w-5" />
              <span>{item.label}</span>
            </NavLink>
          ))}
        </div>
      </div>
    </nav>
  );
}