'use client';

/**
 * DesignSystem - top-level page assembly for /design-system.
 *
 * Sticky sidebar TOC + 12 numbered sections.
 * Wrapped in LocaleProvider so the language toggle and useT() hooks work
 * inside Astro's React island.
 */

import { useEffect, useState } from 'react';
import { useT, useLocale } from '@/lib/i18n/react';
import { LanguageToggle } from '@/components/ui/i18n/LanguageToggle';
import { AccessibilityTrigger } from '@/components/ui/a11y/AccessibilityTrigger';
import { SkipLink } from '@/components/ui/a11y/SkipLink';
import { MDLogo } from '@/components/ui/icons/MDLogo';
import { Stack } from '@/components/ui/layout/Stack';
import { dirForLocale } from '@/lib/i18n';

import { Tokens } from './sections/01-tokens/Tokens';
import { Primitives } from './sections/02-primitives/Primitives';
import { Layout } from './sections/03-layout/Layout';
import { Overlays } from './sections/04-overlays/Overlays';
import { Feedback } from './sections/05-feedback/Feedback';
import { A11y } from './sections/06-a11y/A11y';
import { I18n } from './sections/07-i18n/I18n';
import { Icons } from './sections/08-icons/Icons';
import { Domain } from './sections/09-domain/Domain';
import { ContrastChecker } from './sections/10-contrast-checker/ContrastChecker';
import { PerfBudget } from './sections/11-perf-budget/PerfBudget';
import { PageOrganizerModules } from './sections/12-page-organizer-modules/PageOrganizerModules';
import { AdminPageOrganizerUI } from './sections/13-admin-page-organizer-ui/AdminPageOrganizerUI';
import { WishlistFavoritesUI } from './sections/14-wishlist-favorites/WishlistFavoritesUI';
import { SupportInfraSection } from './sections/15-support-infra';
import { SupportTicketsSection } from './sections/16-support-tickets';
import { SystemPages } from './sections/17-system-pages/SystemPages';
import { Payments } from './sections/18-payments/Payments';
import { ChatSection } from './sections/20-chat/Chat';
import { HydratedIsland } from '@/components/HydratedIsland';

/** Sidebar TOC entries - id matches the section anchor. */
const TOC: {
  id: string;
  key:
    | 'sidebar_tokens'
    | 'sidebar_primitives'
    | 'sidebar_layout'
    | 'sidebar_overlays'
    | 'sidebar_feedback'
    | 'sidebar_a11y'
    | 'sidebar_i18n'
    | 'sidebar_icons'
    | 'sidebar_domain'
    | 'sidebar_contrast'
    | 'sidebar_perf'
    | 'sidebar_modules'
    | 'sidebar_admin_ui'
    | 'sidebar_wishlist_favorites'
    | 'sidebar_support_infra'
    | 'sidebar_support_tickets'
    | 'sidebar_system_pages'
    | 'sidebar_payments'
    | 'sidebar_chat';
}[] = [
  { id: 'tokens', key: 'sidebar_tokens' },
  { id: 'primitives', key: 'sidebar_primitives' },
  { id: 'layout', key: 'sidebar_layout' },
  { id: 'overlays', key: 'sidebar_overlays' },
  { id: 'feedback', key: 'sidebar_feedback' },
  { id: 'a11y', key: 'sidebar_a11y' },
  { id: 'i18n', key: 'sidebar_i18n' },
  { id: 'icons', key: 'sidebar_icons' },
  { id: 'domain', key: 'sidebar_domain' },
  { id: 'contrast', key: 'sidebar_contrast' },
  { id: 'perf', key: 'sidebar_perf' },
  { id: 'modules', key: 'sidebar_modules' },
  { id: 'admin-page-organizer', key: 'sidebar_admin_ui' },
  { id: 'wishlist-favorites', key: 'sidebar_wishlist_favorites' },
  { id: 'support-infra', key: 'sidebar_support_infra' },
  { id: 'support-tickets', key: 'sidebar_support_tickets' },
  { id: 'system-pages', key: 'sidebar_system_pages' },
  { id: 'payments', key: 'sidebar_payments' },
  { id: 'chat', key: 'sidebar_chat' },
];

function Sidebar() {
  const t = useT('design_system');
  const [active, setActive] = useState<string>('tokens');

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const handler = () => {
      let current = TOC[0]?.id ?? 'tokens';
      for (const entry of TOC) {
        const el = document.getElementById(entry.id);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top <= 120) {
          current = entry.id;
        }
      }
      setActive(current);
    };
    window.addEventListener('scroll', handler, { passive: true });
    handler();
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <nav aria-label={t('title')} className="sticky top-0 max-h-dvh overflow-y-auto p-4">
      <Stack gap="2">
        {TOC.map((entry) => {
          const isActive = active === entry.id;
          return (
            <a
              key={entry.id}
              href={`#${entry.id}`}
              aria-current={isActive ? 'true' : undefined}
              className={[
                'block rounded-md',
                'px-3 py-2',
                'text-sm font-medium',
                'transition-colors',
                'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:outline-none',
                isActive
                  ? 'bg-brand-primary-100 text-brand-primary-700'
                  : 'text-text-secondary hover:bg-neutral-100',
              ].join(' ')}
            >
              {t(entry.key)}
            </a>
          );
        })}
      </Stack>
    </nav>
  );
}

function PageHeader() {
  const t = useT('design_system');
  const { locale } = useLocale();

  // Sync html lang/dir on first mount in case the SSR shell rendered with a stale value
  useEffect(() => {
    if (typeof document === 'undefined') return;
    document.documentElement.lang = locale;
    document.documentElement.dir = dirForLocale(locale);
  }, [locale]);

  return (
    <header className="bg-brand-primary-700 text-text-inverse px-6 py-6">
      <div className="flex items-start justify-between gap-4">
        <Stack gap="2">
          <MDLogo />
          <h1 className="text-text-inverse text-3xl font-bold">{t('title')}</h1>
          <p className="text-brand-primary-100 text-sm">{t('subtitle')}</p>
        </Stack>
        <LanguageToggle />
      </div>
    </header>
  );
}

function DesignSystemInner() {
  return (
    <div className="bg-surface-raised min-h-dvh">
      <SkipLink />
      <PageHeader />
      <div className="grid gap-6 md:grid-cols-[260px_1fr]">
        <aside className="bg-surface-base border-border-default border-e">
          <Sidebar />
        </aside>
        <div className="flex min-w-0 flex-col gap-10 p-6">
          <Tokens />
          <Primitives />
          <Layout />
          <Overlays />
          <Feedback />
          <A11y />
          <I18n />
          <Icons />
          <Domain />
          <ContrastChecker />
          <PerfBudget />
          <PageOrganizerModules />
          <AdminPageOrganizerUI />
          <WishlistFavoritesUI />
          <SupportInfraSection />
          <SupportTicketsSection />
          <SystemPages />
          <Payments />
          <ChatSection />
        </div>
      </div>
      <AccessibilityTrigger />
    </div>
  );
}

/**
 * /design-system page React island.
 * Wrapped in LocaleProvider so language toggling works.
 */
export function DesignSystem() {
  return (
    <HydratedIsland enableLiveNotifications={false}>
      <DesignSystemInner />
    </HydratedIsland>
  );
}