'use client';

/**
 * Icons - section 8 of /design-system.
 *
 * Renders the full whitelisted Lucide icon grid + the Multideal logo marks.
 */

import { Icon, ICON_MAP } from '@/components/ui/icons/Icon';
import type { IconColor, IconName, IconSize } from '@/components/ui/icons/Icon';
import { MDLogo } from '@/components/ui/icons/MDLogo';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { Grid } from '@/components/ui/layout/Grid';
import { useT } from '@/lib/i18n/react';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';

const SIZES: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
const COLORS: IconColor[] = ['inherit', 'primary', 'vendor', 'muted', 'danger', 'success'];

export function Icons() {
  const t = useT('design_system');
  const allIconNames = Object.keys(ICON_MAP) as IconName[];

  return (
    <SectionShell id="icons" title={t('sidebar_icons')} description={t('section_intro')}>
      {/* Icon */}
      <ComponentEntry
        name="Icon"
        id="icon-component"
        path="src/components/ui/icons/Icon"
        description="Type-safe wrapper around lucide-react. Whitelist-only - 45 approved icons."
        tokens={[
          'color-brand-primary-600',
          'color-mode-vendor-600',
          'color-danger-600',
          'color-success-600',
        ]}
        a11yNotes={[
          'aria-hidden by default (decorative)',
          'aria-label required for standalone interactive use',
          'mirror flag flips directional icons in RTL',
        ]}
        importSnippet={`import { Icon } from '@/components/ui/icons/Icon';`}
      >
        <Stack gap="5">
          {/* Sizes */}
          <Stack gap="2">
            <h4 className="text-text-secondary text-xs font-bold uppercase">Sizes</h4>
            <Row gap="4" align="center">
              {SIZES.map((s) => (
                <Stack key={s} gap="1" align="center">
                  <Icon name="ShoppingBag" size={s} />
                  <code className="text-text-muted text-xs">{s}</code>
                </Stack>
              ))}
            </Row>
          </Stack>

          {/* Colors */}
          <Stack gap="2">
            <h4 className="text-text-secondary text-xs font-bold uppercase">Colors</h4>
            <Row gap="4" align="center">
              {COLORS.map((c) => (
                <Stack key={c} gap="1" align="center">
                  <Icon name="Heart" size="lg" color={c} />
                  <code className="text-text-muted text-xs">{c}</code>
                </Stack>
              ))}
            </Row>
          </Stack>

          {/* Mirror */}
          <Stack gap="2">
            <h4 className="text-text-secondary text-xs font-bold uppercase">
              Directional + mirror (flips in RTL)
            </h4>
            <Row gap="3" align="center">
              <Icon name="ChevronLeft" mirror />
              <Icon name="ChevronRight" mirror />
              <Icon name="ArrowLeft" mirror />
              <Icon name="ArrowRight" mirror />
            </Row>
          </Stack>

          {/* Full grid */}
          <Stack gap="2">
            <h4 className="text-text-secondary text-xs font-bold uppercase">
              Full whitelist ({allIconNames.length})
            </h4>
            <Grid cols={6} gap="3">
              {allIconNames.map((name) => (
                <Stack
                  key={name}
                  gap="1"
                  align="center"
                  className="border-border-default rounded-md border p-3"
                >
                  <Icon name={name} size="md" color="primary" />
                  <code className="text-text-muted truncate text-xs">{name}</code>
                </Stack>
              ))}
            </Grid>
          </Stack>
        </Stack>
      </ComponentEntry>

      {/* MDLogo */}
      <ComponentEntry
        name="MDLogo"
        id="mdlogo-component"
        path="src/components/ui/icons/MDLogo"
        description="Multideal MD pill icon: cream MD letters on a navy disc. Raster mark served from /brand/icon.png with 2x srcset; respects size prop."
        tokens={['color-brand-primary-900', 'color-brand-primary-50']}
        a11yNotes={['alt text on the img element', 'Symmetric, no RTL mirroring needed']}
        importSnippet={`import { MDLogo } from '@/components/ui/icons/MDLogo';`}
      >
        <Row gap="6" align="center">
          <MDLogo size={32} />
          <MDLogo size={48} />
          <MDLogo size={64} />
        </Row>
      </ComponentEntry>
    </SectionShell>
  );
}