import { describe, it, expect } from 'vitest';
import { generate } from '../generate.js';
import type { ScaffoldUiPrimitivesInput } from '../types.js';

function fixture(overrides: Partial<ScaffoldUiPrimitivesInput> = {}): ScaffoldUiPrimitivesInput {
  return { projectPath: '/tmp/web', appCode: 'crm', force: false, ...overrides };
}

const NEW_PRIMITIVES = [
  'src/components/ui/DateInput.tsx',
  'src/components/ui/EnumSelect.tsx',
  'src/components/ui/MultiSelect.tsx',
];

// Display-only primitives (no input contract): same theme rules, own describe.
const MODERN_KIT = [
  'src/components/ui/Skeleton.tsx',
  'src/components/ui/EmptyState.tsx',
  'src/components/ui/Badge.tsx',
  'src/components/ui/StatCard.tsx',
];

function fileByPath(path: string): { path: string; content: string; strategy: string } {
  const files = generate(fixture());
  const f = files.find((x) => x.path === path);
  if (!f) throw new Error(`missing generated file ${path}`);
  return f;
}

describe('scaffold-ui-primitives / new primitives — file shape', () => {
  it.each(NEW_PRIMITIVES)('emits %s with overwrite strategy + AUTO-GENERATED header', (path) => {
    const f = fileByPath(path);
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
    expect(f.content).toMatch(/scaffold-ui-primitives/);
  });
});

describe('scaffold-ui-primitives / new primitives — theme compliance (non-negotiable)', () => {
  const FORBIDDEN_PALETTES = [
    'slate', 'gray', 'zinc', 'neutral', 'stone',
    'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
    'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
  ];

  it.each(NEW_PRIMITIVES)('%s uses zero hardcoded Tailwind color classes', (path) => {
    const content = fileByPath(path).content;
    for (const palette of FORBIDDEN_PALETTES) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      const matches = content.match(re);
      expect(matches, `Hardcoded Tailwind color (${palette}): ${matches?.join(', ')}`).toBeNull();
    }
  });

  it.each(NEW_PRIMITIVES)('%s uses zero dark: prefix (theme swap handles dark mode at the token layer)', (path) => {
    expect(fileByPath(path).content).not.toMatch(/\bdark:/);
  });

  it.each(NEW_PRIMITIVES)('%s uses zero hex literals in className', (path) => {
    const content = fileByPath(path).content;
    const classNameBlocks = content.match(/className=[`"']([^`"']*)[`"']/g) ?? [];
    for (const block of classNameBlocks) {
      expect(block, `Hex literal in className: ${block}`).not.toMatch(/#[0-9a-fA-F]{3,8}/);
    }
  });

  it.each(NEW_PRIMITIVES)('%s references the SmartStack input tokens (radius-input, border-color, bg-card, accent-500)', (path) => {
    const content = fileByPath(path).content;
    expect(content).toMatch(/var\(--radius-input/);
    expect(content).toMatch(/var\(--border-color\)/);
    expect(content).toMatch(/var\(--bg-card\)/);
    expect(content).toMatch(/var\(--color-accent-500\)/);
  });
});

describe('scaffold-ui-primitives / new primitives — component contracts', () => {
  it('DateInput exports the component with an ISO value contract + calendar popover', () => {
    const c = fileByPath('src/components/ui/DateInput.tsx').content;
    expect(c).toMatch(/export function DateInput\(/);
    expect(c).toMatch(/value: string \| null/);
    expect(c).toMatch(/onChange: \(value: string \| null\) => void/);
    expect(c).toMatch(/label\?: string/);
    // Real calendar, not native input: month grid + Intl formatting.
    expect(c).toMatch(/Intl\.DateTimeFormat/);
    expect(c).toMatch(/grid-cols-7/);
    expect(c).toMatch(/role="dialog"/);
    expect(c).not.toMatch(/type="date"/);
  });

  it('EnumSelect exports a single-select listbox with options', () => {
    const c = fileByPath('src/components/ui/EnumSelect.tsx').content;
    expect(c).toMatch(/export function EnumSelect\(/);
    expect(c).toMatch(/options: SelectOption\[\]/);
    expect(c).toMatch(/value: string \| null/);
    expect(c).toMatch(/onChange: \(value: string \| null\) => void/);
    expect(c).toMatch(/role="listbox"/);
    expect(c).toMatch(/role="option"/);
    // Themed dropdown, not the native <select>.
    expect(c).not.toMatch(/<select/);
  });

  it('MultiSelect exports a multi-value chips control (string[])', () => {
    const c = fileByPath('src/components/ui/MultiSelect.tsx').content;
    expect(c).toMatch(/export function MultiSelect\(/);
    expect(c).toMatch(/value: string\[\]/);
    expect(c).toMatch(/onChange: \(value: string\[\]\) => void/);
    expect(c).toMatch(/aria-multiselectable="true"/);
    expect(c).not.toMatch(/<select/);
  });

  it('all three handle keyboard navigation + outside-click close', () => {
    for (const path of NEW_PRIMITIVES) {
      const c = fileByPath(path).content;
      expect(c, path).toMatch(/e\.key === 'Escape'/);
      expect(c, path).toMatch(/addEventListener\('mousedown'/);
    }
  });
});

describe('scaffold-ui-primitives / new primitives — i18n namespaces', () => {
  it('each locale common.json carries dateInput / enumSelect / multiSelect (entityLookup preserved)', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.entityLookup?.placeholder, `${locale} entityLookup preserved`).toBeTruthy();
      expect(parsed.dateInput?.placeholder, `${locale} dateInput`).toBeTruthy();
      expect(parsed.dateInput?.previousMonth).toBeTruthy();
      expect(parsed.enumSelect?.placeholder, `${locale} enumSelect`).toBeTruthy();
      expect(parsed.multiSelect?.placeholder, `${locale} multiSelect`).toBeTruthy();
      expect(parsed.multiSelect?.remove).toBeTruthy();
    }
  });

  it('components resolve their own i18n namespace via useTranslation("common")', () => {
    expect(fileByPath('src/components/ui/DateInput.tsx').content).toMatch(/dateInput\.placeholder/);
    expect(fileByPath('src/components/ui/EnumSelect.tsx').content).toMatch(/enumSelect\.placeholder/);
    expect(fileByPath('src/components/ui/MultiSelect.tsx').content).toMatch(/multiSelect\.placeholder/);
  });
});

const FORM_PRIMITIVES = [
  'src/components/ui/Textarea.tsx',
  'src/components/ui/Switch.tsx',
  'src/components/ui/SegmentedControl.tsx',
];

describe('scaffold-ui-primitives / modern form primitives — file shape + theme', () => {
  it.each(FORM_PRIMITIVES)('emits %s with overwrite strategy + AUTO-GENERATED header', (path) => {
    const f = fileByPath(path);
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
    expect(f.content).toMatch(/scaffold-ui-primitives/);
  });

  const FORBIDDEN_PALETTES = [
    'slate', 'gray', 'zinc', 'neutral', 'stone',
    'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
    'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
  ];
  it.each(FORM_PRIMITIVES)('%s uses zero hardcoded Tailwind color classes', (path) => {
    const content = fileByPath(path).content;
    for (const palette of FORBIDDEN_PALETTES) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      expect(content.match(re), `Hardcoded Tailwind color (${palette})`).toBeNull();
    }
  });
  it.each(FORM_PRIMITIVES)('%s uses zero dark: prefix and references theme tokens', (path) => {
    const content = fileByPath(path).content;
    expect(content).not.toMatch(/\bdark:/);
    expect(content).toMatch(/var\(--border-color\)/);
    expect(content).toMatch(/var\(--color-accent-500\)/);
  });
});

describe('scaffold-ui-primitives / Textarea contract', () => {
  const c = () => fileByPath('src/components/ui/Textarea.tsx').content;
  it('is a native auto-growing <textarea> with a string|null value + char counter', () => {
    expect(c()).toMatch(/export function Textarea\(/);
    expect(c()).toMatch(/value: string \| null/);
    expect(c()).toMatch(/onChange: \(value: string \| null\) => void/);
    expect(c()).toMatch(/<textarea/);
    expect(c()).not.toMatch(/<input/);
    // Auto-grow snaps the height to the content.
    expect(c()).toMatch(/scrollHeight/);
    // Live counter over the value length.
    expect(c()).toMatch(/maxLength/);
    expect(c()).toMatch(/length/);
  });
});

describe('scaffold-ui-primitives / Switch contract', () => {
  const c = () => fileByPath('src/components/ui/Switch.tsx').content;
  it('is an ARIA switch with a boolean value (1-click toggle)', () => {
    expect(c()).toMatch(/export function Switch\(/);
    expect(c()).toMatch(/value: boolean/);
    expect(c()).toMatch(/onChange: \(value: boolean\) => void/);
    expect(c()).toMatch(/role="switch"/);
    expect(c()).toMatch(/aria-checked=\{value\}/);
    expect(c()).toMatch(/onClick=\{\(\) => onChange\(!value\)\}/);
  });
});

describe('scaffold-ui-primitives / SegmentedControl contract', () => {
  const c = () => fileByPath('src/components/ui/SegmentedControl.tsx').content;
  it('is an ARIA radiogroup over options with a string value (1-click choice)', () => {
    expect(c()).toMatch(/export function SegmentedControl\(/);
    expect(c()).toMatch(/options: SegmentedOption\[\]/);
    expect(c()).toMatch(/value: string \| null/);
    expect(c()).toMatch(/onChange: \(value: string\) => void/);
    expect(c()).toMatch(/role="radiogroup"/);
    expect(c()).toMatch(/role="radio"/);
    expect(c()).toMatch(/aria-checked=\{isSel\}/);
    expect(c()).not.toMatch(/<select/);
  });
});

describe('scaffold-ui-primitives / DateInput inline mode + keyboard typing', () => {
  const c = () => fileByPath('src/components/ui/DateInput.tsx').content;
  it('exposes an `inline` prop that renders the calendar in-flow', () => {
    expect(c()).toMatch(/inline\?: boolean/);
    // Inline branch renders the calendar without the popover dialog wrapper.
    expect(c()).toMatch(/\{inline && \(/);
  });
  it('accepts tolerant dd/mm/yyyy keyboard typing (not a native date input)', () => {
    expect(c()).toMatch(/function parseTyped\(/);
    expect(c()).toMatch(/function formatTyped\(/);
    expect(c()).toMatch(/type="text"/);
    expect(c()).not.toMatch(/type="date"/);
    // Open-on-focus for the popover mode.
    expect(c()).toMatch(/onFocus=\{\(\) => \{ if \(!inline\) setOpen\(true\); \}\}/);
  });
  it('offers quick chips (today / tomorrow / +1 week / +1 month)', () => {
    // Chip i18n keys are built as `t('dateInput.' + c.key, …)` over chipDefs.
    expect(c()).toMatch(/t\('dateInput\.' \+ c\.key/);
    expect(c()).toMatch(/key: 'chipToday'/);
    expect(c()).toMatch(/key: 'chipTomorrow'/);
    expect(c()).toMatch(/key: 'chipNextWeek'/);
    expect(c()).toMatch(/key: 'chipNextMonth'/);
  });
  it('each locale common.json carries the date chips', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.dateInput?.chipToday, `${locale} chipToday`).toBeTruthy();
      expect(parsed.dateInput?.chipNextMonth, `${locale} chipNextMonth`).toBeTruthy();
    }
  });
});

describe('scaffold-ui-primitives / DateInput month + year dropdowns (jump to any year)', () => {
  const c = () => fileByPath('src/components/ui/DateInput.tsx').content;
  it('replaces the static month label with month + year <select> dropdowns bound to the view', () => {
    const src = c();
    expect(src).toMatch(/<select/);
    expect(src).toMatch(/value=\{view\.getMonth\(\)\}/);
    expect(src).toMatch(/value=\{view\.getFullYear\(\)\}/);
    // aria-labels resolve through i18n.
    expect(src).toMatch(/dateInput\.monthLabel/);
    expect(src).toMatch(/dateInput\.yearLabel/);
    // The prev/next month arrows are kept alongside the dropdowns.
    expect(src).toMatch(/dateInput\.previousMonth/);
    expect(src).toMatch(/dateInput\.nextMonth/);
  });
  it('builds a year list bounded by min/max but always stretched to include the viewed year', () => {
    const src = c();
    // Unbounded default is balanced (past AND future), not birthdate-skewed.
    expect(src).toMatch(/now - 120/);
    expect(src).toMatch(/now \+ 30/);
    // Bounds, when present, drive the list edges.
    expect(src).toMatch(/minD !== null \? minD\.getFullYear\(\)/);
    expect(src).toMatch(/maxD !== null \? maxD\.getFullYear\(\)/);
    // The viewed year is never dropped from the list.
    expect(src).toMatch(/Math\.min\(lo, vy\)/);
    expect(src).toMatch(/Math\.max\(hi, vy\)/);
  });
  it('each locale common.json carries the month/year dropdown labels', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.dateInput?.monthLabel, `${locale} monthLabel`).toBeTruthy();
      expect(parsed.dateInput?.yearLabel, `${locale} yearLabel`).toBeTruthy();
    }
  });
});

describe('scaffold-ui-primitives / DateInput temporal bounds (minDate / maxDate)', () => {
  const c = () => fileByPath('src/components/ui/DateInput.tsx').content;
  it('exposes minDate / maxDate props accepting an ISO date or the "today" sentinel', () => {
    const src = c();
    expect(src).toMatch(/minDate\?: string/);
    expect(src).toMatch(/maxDate\?: string/);
    // 'today' is resolved at runtime (not baked at generation time).
    expect(src).toMatch(/b === 'today'/);
  });
  it('enforces the bounds across day cells, typed dates, chips and commit', () => {
    const src = c();
    // One predicate gates every entry path.
    expect(src).toMatch(/const outOfRange = /);
    // Day-cell disabling.
    expect(src).toMatch(/const isDisabled = outOfRange\(d\)/);
    // Typed-date rejection.
    expect(src).toMatch(/if \(d && !outOfRange\(d\)\)/);
    // Chip filtering — future chips vanish on a past-only field and vice-versa.
    expect(src).toMatch(/\.filter\(\(c\) => !outOfRange\(c\.d\)\)/);
    // commit is the final guard.
    expect(src).toMatch(/if \(outOfRange\(d\)\) return;/);
  });
});

describe('scaffold-ui-primitives / EntityLookup valueLabel fallback', () => {
  const c = () => fileByPath('src/components/ui/EntityLookup.tsx').content;
  it('adds a valueLabel prop used as the display fallback — the raw Guid never renders', () => {
    expect(c()).toMatch(/valueLabel\?: string/);
    expect(c()).toMatch(/if \(!selectedItem\) return valueLabel \?\? '…'/);
    expect(c()).not.toMatch(/return valueLabel \?\? value/);
  });
  it('pick() stores the full item so the label never flashes through a refetch', () => {
    expect(c()).toMatch(/setSelectedItem\(opt\.raw\);\s*\n\s*onChange\(opt\.id, opt\.raw\);/);
    expect(c()).toMatch(/if \(selectedItem && selectedItem\.id === value\) return;/);
  });
  it('drops the left search icon so the typed text aligns at pl-3 like other fields', () => {
    // The lucide Search icon import is gone (it offset the text).
    expect(c()).not.toMatch(/import \{[^}]*\bSearch\b[^}]*\} from 'lucide-react'/);
    expect(c()).toMatch(/pl-3 pr-16/);
  });
});

describe('scaffold-ui-primitives / RowActionsMenu — the row-action overflow "…" menu', () => {
  const c = () => fileByPath('src/components/ui/RowActionsMenu.tsx').content;

  it('is emitted with overwrite strategy + AUTO-GENERATED header', () => {
    const f = fileByPath('src/components/ui/RowActionsMenu.tsx');
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
    expect(f.content).toMatch(/scaffold-ui-primitives/);
  });

  it('exports RowActionsMenu with an items[] API (key/label/icon/danger/permission/onClick)', () => {
    expect(c()).toMatch(/export function RowActionsMenu\(/);
    expect(c()).toMatch(/export interface RowActionItem/);
    expect(c()).toMatch(/items: RowActionItem\[\]/);
    expect(c()).toMatch(/key: string/);
    expect(c()).toMatch(/label: string/);
    expect(c()).toMatch(/icon\?: ReactNode/);
    expect(c()).toMatch(/danger\?: boolean/);
    expect(c()).toMatch(/permission\?: string/);
    expect(c()).toMatch(/onClick: \(\) => void/);
  });

  it('uses a MoreHorizontal "…" trigger with an ARIA menu', () => {
    expect(c()).toMatch(/import \{ MoreHorizontal \} from 'lucide-react'/);
    expect(c()).toMatch(/aria-haspopup="menu"/);
    expect(c()).toMatch(/role="menu"/);
    expect(c()).toMatch(/role="menuitem"/);
  });

  it('gates items through useAuth().hasPermission and hides the trigger when none are visible', () => {
    expect(c()).toMatch(/import \{ useAuth \} from '@\/business\/auth\/useAuth'/);
    expect(c()).toMatch(/const \{ hasPermission \} = useAuth\(\)/);
    expect(c()).toMatch(/items\.filter\(\(it\) => !it\.permission \|\| hasPermission\(it\.permission\)\)/);
    expect(c()).toMatch(/if \(visible\.length === 0\) return null/);
  });

  it('portals the menu to document.body with fixed positioning (escapes the table overflow clip)', () => {
    expect(c()).toMatch(/import \{ createPortal \} from 'react-dom'/);
    expect(c()).toMatch(/createPortal\(/);
    expect(c()).toMatch(/document\.body/);
    expect(c()).toMatch(/getBoundingClientRect\(\)/);
    expect(c()).toMatch(/position: 'fixed'/);
  });

  it('stops row-click propagation on the trigger and on item select', () => {
    // Trigger toggling the menu must not bubble to the table onRowClick.
    expect(c()).toMatch(/onClick=\{\(e\) => \{ e\.stopPropagation\(\); setOpen/);
    // Selecting an item stops propagation, runs onClick, then closes.
    expect(c()).toMatch(/e\.stopPropagation\(\); choose\(idx\)/);
  });

  it('handles keyboard nav + outside-click close (reuses the EnumSelect mechanics)', () => {
    expect(c()).toMatch(/e\.key === 'ArrowDown'/);
    expect(c()).toMatch(/e\.key === 'ArrowUp'/);
    expect(c()).toMatch(/e\.key === 'Enter'/);
    expect(c()).toMatch(/e\.key === 'Escape'/);
    expect(c()).toMatch(/addEventListener\('mousedown'/);
  });

  it('defaults the trigger label to the localised rowActions.more', () => {
    expect(c()).toMatch(/useTranslation\('common'\)/);
    expect(c()).toMatch(/t\('rowActions\.more'/);
  });

  it('is theme-compliant (tokens only, no hardcoded palettes / dark: / hex)', () => {
    const src = c();
    const FORBIDDEN = [
      'slate', 'gray', 'zinc', 'neutral', 'stone',
      'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
      'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
    ];
    for (const palette of FORBIDDEN) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      expect(src.match(re), `Hardcoded Tailwind color (${palette})`).toBeNull();
    }
    expect(src).not.toMatch(/\bdark:/);
    const classNameBlocks = src.match(/className=[`"']([^`"']*)[`"']/g) ?? [];
    for (const block of classNameBlocks) {
      expect(block, `Hex literal in className: ${block}`).not.toMatch(/#[0-9a-fA-F]{3,8}/);
    }
    // References the tokens it depends on.
    expect(src).toMatch(/var\(--bg-card\)/);
    expect(src).toMatch(/var\(--border-color\)/);
    expect(src).toMatch(/var\(--error-text\)/);
  });

  it('seeds rowActions.more in every locale common.json', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.rowActions?.more, `${locale} rowActions.more`).toBeTruthy();
    }
  });
});

describe('scaffold-ui-primitives / HeaderActionsMenu — the Priority+ page-header overflow menu', () => {
  const c = () => fileByPath('src/components/ui/HeaderActionsMenu.tsx').content;

  it('is emitted with overwrite strategy + AUTO-GENERATED header', () => {
    const f = fileByPath('src/components/ui/HeaderActionsMenu.tsx');
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
    expect(f.content).toMatch(/scaffold-ui-primitives/);
  });

  it('exports HeaderActionsMenu with an items[] API (key/label/icon/danger/permission/promoted/testId/onClick)', () => {
    expect(c()).toMatch(/export function HeaderActionsMenu\(/);
    expect(c()).toMatch(/export interface HeaderActionItem/);
    expect(c()).toMatch(/items: HeaderActionItem\[\]/);
    expect(c()).toMatch(/key: string/);
    expect(c()).toMatch(/label: string/);
    expect(c()).toMatch(/icon\?: ReactNode/);
    expect(c()).toMatch(/danger\?: boolean/);
    expect(c()).toMatch(/permission\?: string/);
    expect(c()).toMatch(/promoted\?: boolean/);
    expect(c()).toMatch(/testId\?: string/);
    expect(c()).toMatch(/onClick: \(\) => void/);
  });

  it('drops promoted items at desktop width via the sanctioned BREAKPOINTS.lg (matchMedia gate)', () => {
    // Width knowledge lives in ONE place — the primitive reads BREAKPOINTS.lg
    // so the JS gate flips at the same px as the buttons' `lg:` classes.
    expect(c()).toMatch(/import \{ BREAKPOINTS \} from '@\/components\/ui\/tableRepresentation'/);
    expect(c()).toMatch(/min-width: \$\{BREAKPOINTS\.lg\}px/);
    expect(c()).toMatch(/window\.matchMedia\(DESKTOP_QUERY\)/);
    expect(c()).toMatch(/isDesktop \? allowed\.filter\(\(it\) => !it\.promoted\) : allowed/);
  });

  it('unmounts entirely when nothing overflows at the current viewport', () => {
    expect(c()).toMatch(/if \(shown\.length === 0\) return null/);
  });

  it('uses a btn-secondary MoreHorizontal "…" trigger with an ARIA menu + stable testid', () => {
    expect(c()).toMatch(/import \{ MoreHorizontal \} from 'lucide-react'/);
    expect(c()).toMatch(/className="btn btn-secondary px-2\.5"/);
    expect(c()).toMatch(/aria-haspopup="menu"/);
    expect(c()).toMatch(/role="menu"/);
    expect(c()).toMatch(/role="menuitem"/);
    expect(c()).toMatch(/data-testid="header-actions-menu"/);
  });

  it('gates items through useAuth().hasPermission and forwards each item testId onto data-testid', () => {
    expect(c()).toMatch(/import \{ useAuth \} from '@\/business\/auth\/useAuth'/);
    expect(c()).toMatch(/const \{ hasPermission \} = useAuth\(\)/);
    expect(c()).toMatch(/items\.filter\(\(it\) => !it\.permission \|\| hasPermission\(it\.permission\)\)/);
    expect(c()).toMatch(/data-testid=\{it\.testId\}/);
  });

  it('portals the menu to document.body with fixed positioning + keyboard nav + outside-click close', () => {
    expect(c()).toMatch(/import \{ createPortal \} from 'react-dom'/);
    expect(c()).toMatch(/createPortal\(/);
    expect(c()).toMatch(/document\.body/);
    expect(c()).toMatch(/getBoundingClientRect\(\)/);
    expect(c()).toMatch(/position: 'fixed'/);
    expect(c()).toMatch(/e\.key === 'ArrowDown'/);
    expect(c()).toMatch(/e\.key === 'Escape'/);
    expect(c()).toMatch(/addEventListener\('mousedown'/);
  });

  it('defaults the trigger label to the localised headerActions.more', () => {
    expect(c()).toMatch(/useTranslation\('common'\)/);
    expect(c()).toMatch(/t\('headerActions\.more'/);
  });

  it('is theme-compliant (tokens only, no hardcoded palettes / dark: / hex)', () => {
    const src = c();
    const FORBIDDEN = [
      'slate', 'gray', 'zinc', 'neutral', 'stone',
      'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
      'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
    ];
    for (const palette of FORBIDDEN) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      expect(src.match(re), `Hardcoded Tailwind color (${palette})`).toBeNull();
    }
    expect(src).not.toMatch(/\bdark:/);
    const classNameBlocks = src.match(/className=[`"']([^`"']*)[`"']/g) ?? [];
    for (const block of classNameBlocks) {
      expect(block, `Hex literal in className: ${block}`).not.toMatch(/#[0-9a-fA-F]{3,8}/);
    }
    expect(src).toMatch(/var\(--bg-card\)/);
    expect(src).toMatch(/var\(--border-color\)/);
    expect(src).toMatch(/var\(--error-text\)/);
  });

  it('seeds headerActions.more in every locale common.json', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.headerActions?.more, `${locale} headerActions.more`).toBeTruthy();
    }
  });
});

describe('scaffold-ui-primitives / TabStrip — scrollable tab strip with arrow nudges', () => {
  const c = () => fileByPath('src/components/ui/TabStrip.tsx').content;

  it('is emitted with overwrite strategy + AUTO-GENERATED header', () => {
    const f = fileByPath('src/components/ui/TabStrip.tsx');
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
    expect(f.content).toMatch(/scaffold-ui-primitives/);
  });

  it('exports TabStrip with a label / activeKey / children contract', () => {
    expect(c()).toMatch(/export function TabStrip\(/);
    expect(c()).toMatch(/export interface TabStripProps/);
    expect(c()).toMatch(/label: string/);
    expect(c()).toMatch(/activeKey\?: string/);
    expect(c()).toMatch(/children: ReactNode/);
  });

  it('keeps the two-layer underlined-tabs contract (DEV-UI-027) inside the primitive', () => {
    // Outer layer carries the divider (and anchors the arrows via `relative`);
    // the inner row's -mb-px lets the active trigger's border-b-2 overlap it.
    expect(c()).toMatch(/className="relative border-b border-\[var\(--border-color\)\] mb-6"/);
    expect(c()).toMatch(/role="tablist"/);
    expect(c()).toMatch(/aria-label=\{label\}/);
    expect(c()).toMatch(/flex gap-1 -mb-px overflow-x-auto/);
  });

  it('hides the native scrollbar (the whole point — no scrollbar under the tabs)', () => {
    expect(c()).toMatch(/\[scrollbar-width:none\]/);
    expect(c()).toMatch(/\[&::-webkit-scrollbar\]:hidden/);
  });

  it('tracks overflow via a passive scroll listener + jsdom-guarded ResizeObserver', () => {
    expect(c()).toMatch(/addEventListener\('scroll', measure, \{ passive: true \}\)/);
    expect(c()).toMatch(/typeof ResizeObserver === 'undefined'/);
    // ±1px epsilon so zoom / subpixel rounding never pins an arrow on.
    expect(c()).toMatch(/el\.scrollLeft > 1/);
    expect(c()).toMatch(/el\.scrollLeft \+ el\.clientWidth < el\.scrollWidth - 1/);
  });

  it('renders the chevron arrows only on the side(s) that can still scroll', () => {
    expect(c()).toMatch(/import \{ ChevronLeft, ChevronRight \} from 'lucide-react'/);
    expect(c()).toMatch(/\{canLeft && \(/);
    expect(c()).toMatch(/\{canRight && \(/);
    // Pointer affordance only — keyboard users tab through the triggers.
    expect(c()).toMatch(/tabIndex=\{-1\}/);
    expect(c()).toMatch(/t\('tabStrip\.scrollLeft'/);
    expect(c()).toMatch(/t\('tabStrip\.scrollRight'/);
  });

  it('nudges by ~2/3 viewport with smooth scrolling (jsdom-safe optional chaining)', () => {
    expect(c()).toMatch(/scrollBy\?\.\(/);
    expect(c()).toMatch(/behavior: 'smooth'/);
    expect(c()).toMatch(/clientWidth \* 0\.66/);
  });

  it('scrolls the active trigger into view on activeKey change (deep-linked ?tab=)', () => {
    expect(c()).toMatch(/\[aria-selected="true"\]/);
    expect(c()).toMatch(/scrollIntoView\?\.\(/);
    expect(c()).toMatch(/\}, \[activeKey\]\)/);
  });

  it('is theme-compliant (tokens only, no hardcoded palettes / dark: / hex)', () => {
    const src = c();
    const FORBIDDEN = [
      'slate', 'gray', 'zinc', 'neutral', 'stone',
      'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
      'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
    ];
    for (const palette of FORBIDDEN) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      expect(src.match(re), `Hardcoded Tailwind color (${palette})`).toBeNull();
    }
    expect(src).not.toMatch(/\bdark:/);
    const classNameBlocks = src.match(/className=[`"']([^`"']*)[`"']/g) ?? [];
    for (const block of classNameBlocks) {
      expect(block, `Hex literal in className: ${block}`).not.toMatch(/#[0-9a-fA-F]{3,8}/);
    }
    expect(src).toMatch(/var\(--bg-card\)/);
    expect(src).toMatch(/var\(--border-color\)/);
    expect(src).toMatch(/var\(--text-secondary\)/);
  });

  it('seeds tabStrip.scrollLeft/scrollRight in every locale common.json', () => {
    const files = generate(fixture());
    for (const locale of ['fr', 'en', 'it', 'de']) {
      const f = files.find((x) => x.path === `src/i18n/locales/${locale}/common.json`)!;
      const parsed = JSON.parse(f.content);
      expect(parsed.tabStrip?.scrollLeft, `${locale} tabStrip.scrollLeft`).toBeTruthy();
      expect(parsed.tabStrip?.scrollRight, `${locale} tabStrip.scrollRight`).toBeTruthy();
    }
  });
});

describe('scaffold-ui-primitives / modern kit (Skeleton / EmptyState / Badge / StatCard)', () => {
  const FORBIDDEN_PALETTES = [
    'slate', 'gray', 'zinc', 'neutral', 'stone',
    'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
    'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose',
  ];

  it.each(MODERN_KIT)('%s emits with overwrite strategy + AUTO-GENERATED header', (path) => {
    const f = fileByPath(path);
    expect(f.strategy).toBe('overwrite');
    expect(f.content).toMatch(/AUTO-GENERATED/);
  });

  it.each(MODERN_KIT)('%s uses zero hardcoded Tailwind color classes and zero dark: prefix', (path) => {
    const content = fileByPath(path).content;
    for (const palette of FORBIDDEN_PALETTES) {
      const re = new RegExp(`\\b(?:bg|text|border|ring|placeholder|from|to|via|divide|outline)-${palette}-\\d{2,3}\\b`);
      expect(content.match(re), `Hardcoded Tailwind color (${palette})`).toBeNull();
    }
    expect(content).not.toMatch(/\bdark:/);
  });

  it('Skeleton: pulse block on the muted token, aria-hidden', () => {
    const c = fileByPath('src/components/ui/Skeleton.tsx').content;
    expect(c).toMatch(/animate-pulse/);
    expect(c).toMatch(/var\(--bg-muted\)/);
    expect(c).toMatch(/aria-hidden="true"/);
  });

  it('EmptyState: icon + title + description + CTA slot, tokens only', () => {
    const c = fileByPath('src/components/ui/EmptyState.tsx').content;
    expect(c).toMatch(/icon\?: ReactNode/);
    expect(c).toMatch(/title: string/);
    expect(c).toMatch(/description\?: string/);
    expect(c).toMatch(/action\?: ReactNode/);
    expect(c).toMatch(/var\(--text-primary\)/);
    expect(c).toMatch(/var\(--text-secondary\)/);
  });

  it('Badge: six tones on the status tokens; neutral/success mirror the historical inlined pills', () => {
    const c = fileByPath('src/components/ui/Badge.tsx').content;
    for (const tone of ['neutral', 'success', 'warning', 'error', 'info', 'accent']) {
      expect(c, `tone ${tone}`).toMatch(new RegExp(`${tone}:`));
    }
    // Visual parity with the pills the page generator used to inline.
    expect(c).toMatch(/success: 'bg-\[var\(--success-bg\)\] text-\[var\(--success-text\)\] border-\[var\(--success-border\)\]'/);
    expect(c).toMatch(/neutral: 'bg-\[var\(--bg-hover\)\] text-\[var\(--text-secondary\)\] border-\[var\(--border-color\)\]'/);
    expect(c).toMatch(/rounded-full text-xs font-medium border/);
  });

  it('StatCard: kpi tokens with theme fallbacks, trend arrows, loading skeleton', () => {
    const c = fileByPath('src/components/ui/StatCard.tsx').content;
    expect(c).toMatch(/var\(--kpi-value,var\(--text-primary\)\)/);
    expect(c).toMatch(/var\(--kpi-label,var\(--text-secondary\)\)/);
    expect(c).toMatch(/var\(--kpi-trend-up,var\(--success-text\)\)/);
    expect(c).toMatch(/var\(--kpi-trend-down,var\(--error-text\)\)/);
    expect(c).toMatch(/TrendingUp/);
    expect(c).toMatch(/import \{ Skeleton \} from '@\/components\/ui\/Skeleton'/);
  });
});

describe('scaffold-ui-primitives / URL list state + saved views (plan UI 3.1)', () => {
  it('useListState: URL-backed hooks with clean defaults and functional writes', () => {
    const c = fileByPath('src/components/ui/useListState.ts').content;
    for (const name of ['useListParam', 'useListParamOpt', 'useListNumberParam', 'useListRecordParam']) {
      expect(c, name).toMatch(new RegExp(`export function ${name}`));
    }
    // Defaults are removed from the URL; writes compose (functional form + replace).
    expect(c).toMatch(/value === defaultValue\) next\.delete\(key\)/);
    expect(c).toMatch(/\{ replace: true \}/);
    expect(c).toMatch(/useSearchParams/);
    // The record value identity is signature-stable (safe as an effect dep).
    expect(c).toMatch(/const sig = useMemo/);
  });

  it('SavedViewsMenu: localStorage-backed named snapshots of the query string', () => {
    const c = fileByPath('src/components/ui/SavedViewsMenu.tsx').content;
    expect(c).toMatch(/storageKey: string/);
    expect(c).toMatch(/localStorage\.getItem\(storageKey\)/);
    expect(c).toMatch(/localStorage\.setItem\(storageKey/);
    expect(c).toMatch(/searchParams\.toString\(\)/);
    expect(c).toMatch(/setSearchParams\(new URLSearchParams\(view\.search\)/);
    expect(c).toMatch(/data-testid="saved-views-menu"/);
    // Storage failures never crash the page (private mode / quota).
    expect(c).toMatch(/catch \{/);
  });
});