// tokens.jsx — Design tokens for TeamCaddy
// A clean, Apple-native system with team-color accents

const THEME_PRESETS = {
  // Team accent colors — single hue, iOS-style saturation
  accents: {
    strikers: '#FF3B30',      // warm red (our team)
    galaxy:   '#5856D6',      // indigo
    pitch:    '#34C759',      // soccer green
    sunrise:  '#FF9500',      // orange
    ocean:    '#0A84FF',      // iOS blue
    rose:     '#FF2D55',      // magenta
  },
};

function buildTheme({ dark = false, accent = '#FF3B30', density = 'cozy', font = 'sf' } = {}) {
  const fonts = {
    sf: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif',
    serif: '"New York", "Times New Roman", ui-serif, Georgia, serif',
    mono: '"SF Mono", ui-monospace, Menlo, monospace',
    geometric: '"Helvetica Neue", Helvetica, Arial, sans-serif',
  };
  const body = fonts[font] || fonts.sf;
  const display = font === 'serif' ? fonts.serif : body;

  const d = density === 'compact'
    ? { rowH: 44, gap: 10, cardPad: 14, sectionGap: 20, listRadius: 18 }
    : { rowH: 56, gap: 14, cardPad: 18, sectionGap: 28, listRadius: 22 };

  if (dark) return {
    dark: true, accent, density, font: body, displayFont: display, ...d,
    bg: '#000000',
    bg2: '#1C1C1E',
    bg3: '#2C2C2E',
    card: '#1C1C1E',
    cardElev: '#2C2C2E',
    label: '#FFFFFF',
    label2: 'rgba(235,235,245,0.60)',
    label3: 'rgba(235,235,245,0.30)',
    sep: 'rgba(84,84,88,0.65)',
    sepOpaque: '#38383A',
    fill: 'rgba(120,120,128,0.36)',
    fill2: 'rgba(120,120,128,0.24)',
    green: '#30D158',
    red: '#FF453A',
    yellow: '#FFD60A',
    blue: '#0A84FF',
  };
  return {
    dark: false, accent, density, font: body, displayFont: display, ...d,
    bg: '#F2F2F7',
    bg2: '#FFFFFF',
    bg3: '#E5E5EA',
    card: '#FFFFFF',
    cardElev: '#FFFFFF',
    label: '#000000',
    label2: 'rgba(60,60,67,0.60)',
    label3: 'rgba(60,60,67,0.30)',
    sep: 'rgba(60,60,67,0.12)',
    sepOpaque: '#C6C6C8',
    fill: 'rgba(120,120,128,0.20)',
    fill2: 'rgba(120,120,128,0.12)',
    green: '#34C759',
    red: '#FF3B30',
    yellow: '#FFCC00',
    blue: '#007AFF',
  };
}

// Utility: hex -> rgba
function hexA(hex, a = 1) {
  const h = hex.replace('#','');
  const n = parseInt(h.length === 3 ? h.split('').map(c=>c+c).join('') : h, 16);
  return `rgba(${(n>>16)&255},${(n>>8)&255},${n&255},${a})`;
}

// Icon primitives — monoline SVG icons (SF Symbols style)
function Icon({ name, size = 22, color = 'currentColor', weight = 2 }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: weight, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'home':         return <svg {...props}><path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V11z"/></svg>;
    case 'calendar':     return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'message':      return <svg {...props}><path d="M4 5h16a1 1 0 011 1v10a1 1 0 01-1 1H9l-5 4V6a1 1 0 011-1z"/></svg>;
    case 'photos':       return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M21 17l-5-5-8 8"/></svg>;
    case 'team':         return <svg {...props}><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="10" r="2.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M15 20c0-2.2 1.8-4 4-4s2 1 2 2"/></svg>;
    case 'bell':         return <svg {...props}><path d="M6 8a6 6 0 0112 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 004 0"/></svg>;
    case 'check':        return <svg {...props}><path d="M5 12l5 5L20 7"/></svg>;
    case 'x':            return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'chevron-right':return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-left': return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'chevron-down': return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'plus':         return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'pin':          return <svg {...props}><path d="M12 2v20M5 8l7-4 7 4-3 4-4-1-4 1-3-4z"/></svg>;
    case 'location':     return <svg {...props}><path d="M12 2a7 7 0 017 7c0 5.5-7 13-7 13S5 14.5 5 9a7 7 0 017-7z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'clock':        return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'soccer':       return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 3l3 5-1.5 4.5h-3L9 8zM12 21l-3-5M12 21l3-5M3 12l5.5-1.5M21 12l-5.5-1.5"/></svg>;
    case 'whistle':      return <svg {...props}><circle cx="9" cy="13" r="5"/><path d="M14 13h7M20 13v-3"/></svg>;
    case 'cloud-sun':    return <svg {...props}><circle cx="8" cy="10" r="3"/><path d="M8 3v2M3 10H1M14 5l-1 1M3 16a4 4 0 014-4 5 5 0 0110 1 3 3 0 010 6H7a4 4 0 01-4-3z"/></svg>;
    case 'cloud-rain':   return <svg {...props}><path d="M6 15a5 5 0 014-8 6 6 0 0111 3 3 3 0 010 6H6a5 5 0 01-5-5 4 4 0 015-3"/><path d="M8 20l1-2M12 20l1-2M16 20l1-2"/></svg>;
    case 'car':          return <svg {...props}><path d="M3 13l2-5a2 2 0 012-1h10a2 2 0 012 1l2 5v6h-3v-2H6v2H3v-6z"/><circle cx="7" cy="16" r="1.5"/><circle cx="17" cy="16" r="1.5"/></svg>;
    case 'send':         return <svg {...props}><path d="M4 12l16-8-6 16-2-7-8-1z"/></svg>;
    case 'heart':        return <svg {...props}><path d="M12 21s-8-5-8-11a5 5 0 019-3 5 5 0 019 3c0 6-8 11-8 11z"/></svg>;
    case 'search':       return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>;
    case 'filter':       return <svg {...props}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5z"/></svg>;
    case 'megaphone':    return <svg {...props}><path d="M3 10v4a1 1 0 001 1h3l7 5V4l-7 5H4a1 1 0 00-1 1z"/><path d="M18 8a5 5 0 010 8"/></svg>;
    case 'trophy':       return <svg {...props}><path d="M8 21h8M12 17v4M6 4h12v4a6 6 0 01-12 0V4zM6 6H3v2a3 3 0 003 3M18 6h3v2a3 3 0 01-3 3"/></svg>;
    case 'user':         return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case 'settings':     return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.6-2-3.4-2.4.9a7 7 0 00-2-1.2L14 3h-4l-.5 2.5a7 7 0 00-2 1.2l-2.4-.9-2 3.4 2 1.6A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.6 2 3.4 2.4-.9a7 7 0 002 1.2L10 21h4l.5-2.5a7 7 0 002-1.2l2.4.9 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"/></svg>;
    case 'dots':         return <svg {...props}><circle cx="5" cy="12" r="1.5" fill={color}/><circle cx="12" cy="12" r="1.5" fill={color}/><circle cx="19" cy="12" r="1.5" fill={color}/></svg>;
    case 'edit':         return <svg {...props}><path d="M3 17v4h4L20 8l-4-4L3 17zM14 6l4 4"/></svg>;
    case 'map':          return <svg {...props}><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6zM9 4v14M15 6v14"/></svg>;
    case 'star':         return <svg {...props}><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>;
    case 'coach':        return <svg {...props}><circle cx="12" cy="7" r="3"/><path d="M6 21v-3a6 6 0 0112 0v3M8 14l-2 7M16 14l2 7"/></svg>;
    case 'shield':       return <svg {...props}><path d="M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z"/></svg>;
    case 'camera':       return <svg {...props}><path d="M3 7h4l2-3h6l2 3h4v13H3V7z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'more':         return <svg {...props}><circle cx="12" cy="5" r="1.5" fill={color}/><circle cx="12" cy="12" r="1.5" fill={color}/><circle cx="12" cy="19" r="1.5" fill={color}/></svg>;
    case 'play':         return <svg {...props}><path d="M7 4l13 8-13 8V4z" fill={color}/></svg>;
    case 'pause':        return <svg {...props}><rect x="6" y="4" width="4" height="16" fill={color}/><rect x="14" y="4" width="4" height="16" fill={color}/></svg>;
    case 'mail':         return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case 'lock':         return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>;
    case 'eye':          return <svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'eye-off':      return <svg {...props}><path d="M2 12s4-7 10-7c2 0 4 .5 5.5 1.5M22 12s-4 7-10 7c-2 0-4-.5-5.5-1.5"/><path d="M9.5 9.5A3 3 0 0014.5 14.5M3 3l18 18"/></svg>;
    case 'apple':        return <svg viewBox="0 0 24 24" width={size} height={size} fill={color}><path d="M17.6 12.6c0-2.5 2-3.7 2.1-3.7-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-2-.9-3.2-.8-1.7 0-3.2.9-4 2.4-1.7 2.9-.5 7.3 1.2 9.7.9 1.2 1.9 2.5 3.2 2.4 1.3-.1 1.8-.8 3.4-.8s2 .8 3.3.8c1.4 0 2.3-1.2 3.1-2.3.9-1.3 1.3-2.5 1.3-2.6-.1 0-2.5-.9-2.5-3.8zM14.4 5.1c.7-.8 1.1-2 1-3.1-.9 0-2.1.6-2.8 1.4-.6.7-1.2 1.9-1 3 1 .1 2.1-.5 2.8-1.3z"/></svg>;
    case 'google':       return <svg viewBox="0 0 24 24" width={size} height={size}><path d="M22 12.2c0-.7-.1-1.4-.2-2.1H12v4.1h5.6c-.2 1.3-1 2.4-2 3.1v2.6h3.3c1.9-1.7 3-4.3 3-7.7z" fill="#4285F4"/><path d="M12 22c2.7 0 5-.9 6.7-2.4l-3.3-2.6c-.9.6-2.1 1-3.4 1-2.6 0-4.8-1.8-5.6-4.1H3v2.6C4.7 19.9 8.1 22 12 22z" fill="#34A853"/><path d="M6.4 13.9c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V7.5H3A10 10 0 002 12c0 1.6.4 3.2 1 4.5l3.4-2.6z" fill="#FBBC04"/><path d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8C17 2.9 14.7 2 12 2 8.1 2 4.7 4.1 3 7.5l3.4 2.6C7.2 7.7 9.4 5.9 12 5.9z" fill="#EA4335"/></svg>;
    case 'arrow-right':  return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    default: return null;
  }
}

Object.assign(window, { THEME_PRESETS, buildTheme, hexA, Icon });