// theme.jsx — three visual directions for Trainer Mike
// Bold (faithful to wireframes), Modern Athletic, Warm Wellness

const THEMES = {
  bold: {
    name: 'Bold',
    bg: '#FFF8EE',
    bgDark: '#1A1410',
    surface: '#FFFFFF',
    surfaceDark: '#241B14',
    sectionBg: '#FFB627',           // signature orange field
    sectionBgDark: '#7A4A00',
    text: '#1A1410',
    textDark: '#FFF6E5',
    muted: '#6B5A45',
    mutedDark: '#A89880',
    border: 'rgba(26,20,16,0.08)',
    borderDark: 'rgba(255,255,255,0.10)',
    primary: '#E8830B',
    primaryInk: '#FFFFFF',
    accent: '#7A1010',
    danger: '#C72727',
    success: '#2E7D32',
    radius: 18,
    cardShadow: '0 1px 0 rgba(26,20,16,0.04), 0 8px 24px rgba(232,131,11,0.08)',
    displayFamily: '"Inter", -apple-system, system-ui, sans-serif',
    uiFamily: '"Inter", -apple-system, system-ui, sans-serif',
    monoFamily: '"JetBrains Mono", ui-monospace, monospace',
    sectionColors: {
      next:    '#FFB627',
      history: '#E8830B',
      health:  '#7A1010',
      goals:   '#9B5DE5',
      assess:  '#1E3A8A',
    },
  },
  athletic: {
    name: 'Athletic',
    bg: '#0E0E10',
    bgDark: '#0E0E10',
    surface: '#1A1A1D',
    surfaceDark: '#1A1A1D',
    sectionBg: '#1A1A1D',
    sectionBgDark: '#1A1A1D',
    text: '#F4F4F5',
    textDark: '#F4F4F5',
    muted: '#9B9BA3',
    mutedDark: '#9B9BA3',
    border: 'rgba(255,255,255,0.08)',
    borderDark: 'rgba(255,255,255,0.08)',
    primary: '#D7FF1E',           // electric lime
    primaryInk: '#0E0E10',
    accent: '#FF4D4D',
    danger: '#FF4D4D',
    success: '#34D399',
    radius: 12,
    cardShadow: '0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4)',
    displayFamily: '"Space Grotesk", -apple-system, system-ui, sans-serif',
    uiFamily: '"Inter", -apple-system, system-ui, sans-serif',
    monoFamily: '"JetBrains Mono", ui-monospace, monospace',
    sectionColors: {
      next:    '#D7FF1E',
      history: '#7DD3FC',
      health:  '#FF4D4D',
      goals:   '#C4B5FD',
      assess:  '#34D399',
    },
    forceDark: true,
  },
  wellness: {
    name: 'Wellness',
    bg: '#F7F2EB',
    bgDark: '#1F1A14',
    surface: '#FFFFFF',
    surfaceDark: '#2A231C',
    sectionBg: '#EDE3D2',
    sectionBgDark: '#2A231C',
    text: '#2C241C',
    textDark: '#F2EAD9',
    muted: '#7A6B57',
    mutedDark: '#A89880',
    border: 'rgba(44,36,28,0.08)',
    borderDark: 'rgba(255,255,255,0.08)',
    primary: '#C2562A',          // terracotta
    primaryInk: '#FFFFFF',
    accent: '#5C7A52',           // sage
    danger: '#B33A3A',
    success: '#5C7A52',
    radius: 24,
    cardShadow: '0 1px 0 rgba(44,36,28,0.03), 0 12px 32px rgba(44,36,28,0.06)',
    displayFamily: '"Fraunces", Georgia, serif',
    uiFamily: '"Inter", -apple-system, system-ui, sans-serif',
    monoFamily: '"JetBrains Mono", ui-monospace, monospace',
    sectionColors: {
      next:    '#C2562A',
      history: '#D4A04A',
      health:  '#8B3A3A',
      goals:   '#7A6BA0',
      assess:  '#5C7A52',
    },
  },
};

function useTheme(themeKey, dark) {
  const t = THEMES[themeKey] || THEMES.bold;
  const useDark = t.forceDark || dark;
  return {
    ...t,
    isDark: useDark,
    bg: useDark ? t.bgDark : t.bg,
    surface: useDark ? t.surfaceDark : t.surface,
    sectionBg: useDark ? t.sectionBgDark : t.sectionBg,
    text: useDark ? t.textDark : t.text,
    muted: useDark ? t.mutedDark : t.muted,
    border: useDark ? t.borderDark : t.border,
  };
}

// Card component — respects card-style tweak
function Card({ theme, cardStyle = 'rounded-soft', children, style = {}, onClick, padding = 16 }) {
  const styles = {
    'rounded-soft': {
      borderRadius: theme.radius,
      background: theme.surface,
      boxShadow: theme.cardShadow,
      border: `1px solid ${theme.border}`,
    },
    'rounded-flat': {
      borderRadius: theme.radius,
      background: theme.surface,
      border: `1px solid ${theme.border}`,
    },
    'sharp-flat': {
      borderRadius: 4,
      background: theme.surface,
      border: `1px solid ${theme.border}`,
    },
    'sharp-shadow': {
      borderRadius: 4,
      background: theme.surface,
      boxShadow: theme.cardShadow,
      border: `1px solid ${theme.border}`,
    },
  };
  return (
    <div
      onClick={onClick}
      style={{
        ...styles[cardStyle],
        padding,
        cursor: onClick ? 'pointer' : 'default',
        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// Inline icon system — simple line icons
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.8 }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    home: <><path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V11z"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/></>,
    plus: <><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></>,
    receipt: <><path d="M5 3h14v18l-3-2-3 2-3-2-3 2-2-2V3z"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="16" x2="13" y2="16"/></>,
    chevron: <><polyline points="9 6 15 12 9 18"/></>,
    chevronLeft: <><polyline points="15 6 9 12 15 18"/></>,
    chevronDown: <><polyline points="6 9 12 15 18 9"/></>,
    flag: <><path d="M4 21V4h12l-2 4 2 4H4"/></>,
    play: <><polygon points="6 4 20 12 6 20 6 4" fill={color}/></>,
    check: <><polyline points="4 12 10 18 20 6"/></>,
    notes: <><rect x="5" y="3" width="14" height="18" rx="2"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="13" y2="16"/></>,
    mood: <><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r=".5" fill={color}/><circle cx="15" cy="10" r=".5" fill={color}/><path d="M8 14c1 1.5 2.4 2.5 4 2.5s3-1 4-2.5"/></>,
    energy: <><polyline points="13 3 4 14 11 14 10 21 19 10 12 10 13 3" fill={color} fillOpacity="0.15"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></>,
    history: <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 15"/></>,
    heart: <><path d="M12 21s-7-4.5-9.5-9C.7 8.4 3 4 7 4c2 0 3.5 1.2 5 3 1.5-1.8 3-3 5-3 4 0 6.3 4.4 4.5 8-2.5 4.5-9.5 9-9.5 9z"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill={color}/></>,
    chart: <><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></>,
    bell: <><path d="M6 9a6 6 0 1112 0c0 4 2 5 2 7H4c0-2 2-3 2-7z"/><path d="M10 21a2 2 0 004 0"/></>,
    edit: <><path d="M16 3l5 5L8 21H3v-5L16 3z"/></>,
    arrowUp: <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="6 11 12 5 18 11"/></>,
    arrowDown: <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="6 13 12 19 18 13"/></>,
    close: <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></>,
    expand: <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>,
    message: <><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/></>,
    dollar: <><line x1="12" y1="3" x2="12" y2="21"/><path d="M17 7c0-2-2-3-5-3s-5 1-5 3 2 3 5 3 5 1 5 3-2 3-5 3-5-1-5-3"/></>,
    weight: <><rect x="4" y="8" width="16" height="10" rx="2"/><line x1="8" y1="8" x2="8" y2="4"/><line x1="16" y1="8" x2="16" y2="4"/><line x1="8" y1="13" x2="16" y2="13"/></>,
    timer: <><circle cx="12" cy="13" r="8"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="9" y1="2" x2="15" y2="2"/></>,
    gear: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
  };
  return <svg {...props}>{paths[name] || paths.plus}</svg>;
}

// Tiny depth indicator — replaces literal asterisks with breadcrumb dots
function DepthDots({ depth, theme, active }) {
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {Array.from({ length: depth }).map((_, i) => (
        <div key={i} style={{
          width: 5, height: 5, borderRadius: 9999,
          background: active ? theme.primary : theme.muted,
          opacity: i === depth - 1 ? 1 : 0.4,
        }}/>
      ))}
    </div>
  );
}

Object.assign(window, { THEMES, useTheme, Card, Icon, DepthDots });