// Single source of truth for the site-wide Design System: category list,
// labels, CSS custom-property naming, and the default seed set used before
// the real jalpiEditorConfig.designSystem payload has loaded. Shared by
// editorStore.ts, GlobalStylesPanel.tsx, PropertiesPanel.tsx, CanvasNode.tsx,
// and App.tsx so the CSS var names below stay in exact lockstep with the PHP
// side (Jalpi_Settings::TOKEN_VAR_PREFIX / output_design_system_css()).

import type { TokenCategory, DesignSystem } from '../types';

export const TOKEN_CATEGORIES: TokenCategory[] = [
  'colors',
  'fontFamilies',
  'fontSizes',
  'lineHeights',
  'letterSpacing',
  'borderRadius',
  'boxShadows',
  'spacing',
  'containerWidths',
  'opacity',
];

export const TOKEN_CATEGORY_LABELS: Record<TokenCategory, string> = {
  colors: 'Colors',
  fontFamilies: 'Font Families',
  fontSizes: 'Font Sizes',
  lineHeights: 'Line Heights',
  letterSpacing: 'Letter Spacing',
  borderRadius: 'Border Radius',
  boxShadows: 'Box Shadows',
  spacing: 'Spacing',
  containerWidths: 'Container Widths',
  opacity: 'Opacity',
};

// Must match Jalpi_Settings::TOKEN_VAR_PREFIX in includes/class-jalpi-settings.php exactly.
const VAR_PREFIX: Record<TokenCategory, string> = {
  colors: 'color',
  fontFamilies: 'font',
  fontSizes: 'fs',
  lineHeights: 'lh',
  letterSpacing: 'ls',
  borderRadius: 'radius',
  boxShadows: 'shadow',
  spacing: 'space',
  containerWidths: 'container',
  opacity: 'opacity',
};

export function cssVarName(category: TokenCategory, id: string): string {
  return `--jalpi-${VAR_PREFIX[category]}-${id}`;
}

/** camelCase -> kebab-case, mirrors Jalpi_Settings::camel_to_kebab(). */
function camelToKebab(s: string): string {
  return s.replace(/([A-Z])/g, '-$1').toLowerCase();
}

export function typoVarName(presetId: string, prop: string): string {
  return `--jalpi-typo-${presetId}-${camelToKebab(prop)}`;
}

export function btnVarName(presetId: string, prop: string): string {
  return `--jalpi-btn-${presetId}-${camelToKebab(prop)}`;
}

// Independent seed literal — deliberately NOT importing DEFAULT_GLOBAL_STYLES
// from editorStore.ts to avoid a store<->utils circular import. Mirrors
// Jalpi_Settings::default_design_system_tokens() in includes/class-jalpi-settings.php
// (typography/buttons here reuse the same presets as the legacy DEFAULT_GLOBAL_STYLES
// so a fresh install's canvas preview and first-run panel look identical to before).
export const DEFAULT_DESIGN_SYSTEM: DesignSystem = {
  colors: [
    { id: 'primary', name: 'Primary', value: '#6366f1' },
    { id: 'secondary', name: 'Secondary', value: '#8b5cf6' },
    { id: 'dark', name: 'Dark', value: '#111827' },
    { id: 'white', name: 'White', value: '#ffffff' },
  ],
  fontFamilies: [],
  fontSizes: [
    { id: 'sm', name: 'Small', value: '14px' },
    { id: 'base', name: 'Base', value: '16px' },
    { id: 'lg', name: 'Large', value: '20px' },
  ],
  lineHeights: [
    { id: 'tight', name: 'Tight', value: '1.2' },
    { id: 'normal', name: 'Normal', value: '1.6' },
  ],
  letterSpacing: [
    { id: 'normal', name: 'Normal', value: '0' },
    { id: 'wide', name: 'Wide', value: '0.02em' },
  ],
  borderRadius: [
    { id: 'sm', name: 'Small', value: '4px' },
    { id: 'md', name: 'Medium', value: '8px' },
  ],
  boxShadows: [
    { id: 'sm', name: 'Small', value: '0 1px 4px rgba(0,0,0,0.1)' },
  ],
  spacing: [
    { id: 'xs', name: 'XS', value: '4px' },
    { id: 'sm', name: 'SM', value: '8px' },
    { id: 'md', name: 'MD', value: '16px' },
    { id: 'lg', name: 'LG', value: '32px' },
    { id: 'xl', name: 'XL', value: '64px' },
    { id: '2xl', name: '2XL', value: '128px' },
  ],
  containerWidths: [
    { id: 'default', name: 'Default', value: '1200px' },
  ],
  opacity: [
    { id: 'subtle', name: 'Subtle', value: '0.6' },
    { id: 'overlay', name: 'Overlay', value: '0.5' },
  ],
  typography: [
    { id: 'h1', name: 'Heading 1', fontSize: '48px', fontWeight: '800', lineHeight: '1.2', letterSpacing: '-0.02em', color: '#111827' },
    { id: 'h2', name: 'Heading 2', fontSize: '36px', fontWeight: '700', lineHeight: '1.25', letterSpacing: '-0.01em', color: '#111827' },
    { id: 'h3', name: 'Heading 3', fontSize: '28px', fontWeight: '700', lineHeight: '1.3', color: '#111827' },
    { id: 'body', name: 'Body', fontSize: '16px', fontWeight: '400', lineHeight: '1.7', color: '#374151' },
    { id: 'lead', name: 'Lead', fontSize: '20px', fontWeight: '400', lineHeight: '1.7', color: '#374151' },
    { id: 'sm', name: 'Small', fontSize: '14px', fontWeight: '400', lineHeight: '1.6', color: '#6b7280' },
  ],
  buttons: [
    { id: 'primary', name: 'Primary', backgroundColor: '#1a1a1a', color: '#ffffff', borderRadius: '8px', paddingTop: '12px', paddingBottom: '12px', paddingLeft: '28px', paddingRight: '28px', fontSize: '15px', fontWeight: '600', border: 'none', boxShadow: '0 2px 12px rgba(0,0,0,0.20)' },
    { id: 'secondary', name: 'Secondary', backgroundColor: 'transparent', color: '#1a1a1a', borderRadius: '8px', paddingTop: '11px', paddingBottom: '11px', paddingLeft: '27px', paddingRight: '27px', fontSize: '15px', fontWeight: '600', border: '1.5px solid #1a1a1a', boxShadow: 'none' },
    { id: 'ghost', name: 'Ghost', backgroundColor: 'rgba(0,0,0,0.04)', color: '#1a1a1a', borderRadius: '8px', paddingTop: '11px', paddingBottom: '11px', paddingLeft: '27px', paddingRight: '27px', fontSize: '15px', fontWeight: '500', border: 'none', boxShadow: 'none' },
  ],
};

/**
 * Map a StyleMap property name to the TokenCategory it can link to, e.g.
 * 'paddingTop' -> 'spacing', 'fontSize' -> 'fontSizes'. Returns undefined for
 * properties with no linkable category (e.g. 'textAlign', 'display').
 * Shared by PropertiesPanel.tsx so every relevant control opts into linking
 * via the same table instead of a hardcoded switch per call site.
 */
export const LINKABLE_PROPS: Record<string, TokenCategory> = {
  color: 'colors',
  backgroundColor: 'colors',
  backgroundColorHover: 'colors',
  borderColor: 'colors',
  borderColorHover: 'colors',
  gradientColor1: 'colors',
  gradientColor1Hover: 'colors',
  gradientColor2: 'colors',
  gradientColor2Hover: 'colors',
  colorHover: 'colors',
  linkColor: 'colors',
  linkColorHover: 'colors',
  fontFamily: 'fontFamilies',
  fontSize: 'fontSizes',
  lineHeight: 'lineHeights',
  letterSpacing: 'letterSpacing',
  borderRadius: 'borderRadius',
  boxShadow: 'boxShadows',
  marginTop: 'spacing',
  marginRight: 'spacing',
  marginBottom: 'spacing',
  marginLeft: 'spacing',
  paddingTop: 'spacing',
  paddingRight: 'spacing',
  paddingBottom: 'spacing',
  paddingLeft: 'spacing',
  gap: 'spacing',
  rowGap: 'spacing',
  columnGap: 'spacing',
  opacity: 'opacity',
};

export function tokenCategoryFor(styleProp: string): TokenCategory | undefined {
  return LINKABLE_PROPS[styleProp];
}
