'use client';

/**
 * A11y - section 6 of /design-system.
 *
 * Mounts AccessibilityTrigger live and demos SkipLink, font-scale slider,
 * and contrast toggle (driven by usePrefs).
 */

import { AccessibilityTrigger } from '@/components/ui/a11y/AccessibilityTrigger';
import { SkipLink } from '@/components/ui/a11y/SkipLink';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { useT, usePrefs } from '@/lib/i18n/react';
import type { FontScale } from '@/lib/i18n/store';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';

const FONT_SCALES: FontScale[] = ['S', 'M', 'L', 'XL'];

function FontScaleControl() {
  const { fontScale, setFontScale } = usePrefs();
  const tA11y = useT('a11y');
  return (
    <Row gap="2" wrap align="center">
      <span className="text-text-secondary text-sm">{tA11y('text_size')}:</span>
      {FONT_SCALES.map((s) => (
        <Button
          key={s}
          variant={fontScale === s ? 'primary' : 'secondary'}
          size="sm"
          onClick={() => setFontScale(s)}
          aria-pressed={fontScale === s}
        >
          {s}
        </Button>
      ))}
    </Row>
  );
}

function ContrastControl() {
  const { contrast, setContrast } = usePrefs();
  const tA11y = useT('a11y');
  return (
    <Row gap="2" align="center">
      <span className="text-text-secondary text-sm">{tA11y('high_contrast')}:</span>
      <Button
        variant={contrast === 'high' ? 'primary' : 'secondary'}
        size="sm"
        onClick={() => setContrast(contrast === 'high' ? 'normal' : 'high')}
        aria-pressed={contrast === 'high'}
      >
        {contrast === 'high' ? 'On' : 'Off'}
      </Button>
    </Row>
  );
}

export function A11y() {
  const t = useT('design_system');

  return (
    <SectionShell id="a11y" title={t('sidebar_a11y')} description={t('section_intro')}>
      <ComponentEntry
        name="AccessibilityTrigger"
        id="accessibilitytrigger-a11y"
        path="src/components/ui/a11y/AccessibilityTrigger"
        description="IS 5568-compliant floating accessibility panel - already mounted on this page (bottom-end)."
        tokens={['z-a11y-trigger', 'shadow-lg']}
        a11yNotes={[
          'Always reachable on every Multideal page',
          'Native <dialog> with focus trap',
          'Stores preferences in zustand → persisted to localStorage',
        ]}
        importSnippet={`import { AccessibilityTrigger } from '@/components/ui/a11y/AccessibilityTrigger';`}
      >
        <p className="text-text-secondary text-sm">
          The trigger is rendered live in the bottom-end of this very page (mounted by AppShell).
          Open it to change text size and contrast.
        </p>
      </ComponentEntry>

      <ComponentEntry
        name="SkipLink"
        id="skiplink-a11y"
        path="src/components/ui/a11y/SkipLink"
        description="Keyboard-only 'skip to main content' link. Visible only on focus."
        tokens={['shadow-md', 'radius-md']}
        a11yNotes={[
          'First focusable element on every page',
          'Targets #main',
          'Visible only when focused',
        ]}
        importSnippet={`import { SkipLink } from '@/components/ui/a11y/SkipLink';`}
      >
        <Stack gap="3">
          <p className="text-text-secondary text-sm">
            Press Tab from the page header - the skip link should appear above the first input.
          </p>
          <SkipLink />
        </Stack>
      </ComponentEntry>

      <ComponentEntry
        name="Font scale slider"
        id="fontscale-a11y"
        path="src/lib/i18n/store.ts (usePrefs)"
        description="Live control bound to the same usePrefs() store the AccessibilityTrigger uses."
        tokens={['font-scale']}
        a11yNotes={['aria-pressed reflects active state', 'Live --font-scale CSS variable update']}
        importSnippet={`import { usePrefs } from '@/lib/i18n/react';`}
      >
        <FontScaleControl />
      </ComponentEntry>

      <ComponentEntry
        name="Contrast toggle"
        id="contrast-a11y"
        path="src/lib/i18n/store.ts (usePrefs)"
        description="Adds data-contrast=high on <html>, picked up by contrast-high.css overrides."
        tokens={['data-contrast=high']}
        a11yNotes={['Mirrors AccessibilityTrigger behavior', 'aria-pressed reflects active state']}
        importSnippet={`import { usePrefs } from '@/lib/i18n/react';`}
      >
        <ContrastControl />
      </ComponentEntry>

      {/* live mount of the trigger so it always appears even if not in AppShell context */}
      <AccessibilityTrigger />
    </SectionShell>
  );
}