// Design tokens for Compta — 4 directions
// Direction A: Savanna Warm (ocre, terracotta, crème)
// Direction B: Ledger Classic (bleu nuit + accent doré)
// Direction C: Playful Duolingo (vert vif + rose)
// Direction D: Kairos — ludique premium (ivoire + vert sapin + terracotta accent, serif éditorial)

const THEMES = {
  kairos: {
    name: 'Kairos',
    bg: '#F4EFE6',
    surface: '#FFFFFF',
    ink: '#18231C',
    inkSoft: '#566359',
    primary: '#2D5F3F',
    primaryDark: '#1E4129',
    primarySoft: '#D9E6DC',
    success: '#2D5F3F',
    successSoft: '#D9E6DC',
    warning: '#D88A3C',
    danger: '#C94A3F',
    accent: '#D88A3C',
    gold: '#C9A14A',
    border: '#E0D6C3',
    muted: '#EBE3D2',
    radius: 18,
    font: '"Fraunces", "DM Serif Display", Georgia, serif',
    fontBody: '"Inter", -apple-system, system-ui',
    headingWeight: 500,
  },
};

// Hook to access current theme via CSS var based approach
function useTheme(key) {
  return THEMES[key] || THEMES.kairos;
}

// Small UI primitives consuming theme
function Button({ theme, variant = 'primary', children, onClick, full, size = 'md', style = {} }) {
  const sz = size === 'lg' ? { h: 56, fs: 18, px: 24 } : size === 'sm' ? { h: 36, fs: 14, px: 14 } : { h: 48, fs: 16, px: 20 };
  const variants = {
    primary: {
      bg: theme.primary, color: '#fff', border: theme.primaryDark,
      shadow: `0 4px 0 ${theme.primaryDark}`,
    },
    success: {
      bg: theme.success, color: '#fff', border: '#3E7029',
      shadow: `0 4px 0 #3E7029`,
    },
    ghost: {
      bg: 'transparent', color: theme.primary, border: 'transparent', shadow: 'none',
    },
    outline: {
      bg: theme.surface, color: theme.ink, border: theme.border,
      shadow: `0 2px 0 ${theme.border}`,
    },
    danger: {
      bg: theme.danger, color: '#fff', border: '#9A2A2A',
      shadow: `0 4px 0 #9A2A2A`,
    },
  };
  const v = variants[variant];
  return (
    <button onClick={onClick} style={{
      height: sz.h, padding: `0 ${sz.px}px`,
      background: v.bg, color: v.color,
      border: `2px solid ${v.border === 'transparent' ? 'transparent' : v.bg}`,
      borderRadius: 14, cursor: 'pointer',
      fontFamily: theme.fontBody, fontWeight: 700, fontSize: sz.fs,
      letterSpacing: 0.3, textTransform: 'uppercase',
      boxShadow: v.shadow, width: full ? '100%' : 'auto',
      transition: 'transform 0.08s, box-shadow 0.08s',
      ...style,
    }}
    onMouseDown={e => { e.currentTarget.style.transform = 'translateY(2px)'; e.currentTarget.style.boxShadow = v.shadow.replace('4px', '2px'); }}
    onMouseUp={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = v.shadow; }}
    onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = v.shadow; }}
    >{children}</button>
  );
}

function Card({ theme, children, style = {}, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: theme.surface, border: `1px solid ${theme.border}`,
      borderRadius: theme.radius, padding: 16,
      boxShadow: `0 2px 0 ${theme.border}`,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}

function ProgressBar({ theme, value, max = 100, color, height = 14 }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div style={{
      height, background: theme.muted, borderRadius: height,
      overflow: 'hidden', position: 'relative',
    }}>
      <div style={{
        width: `${pct}%`, height: '100%',
        background: color || theme.primary,
        borderRadius: height,
        transition: 'width 0.4s ease',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 3, left: 8, right: 8, height: 3,
          background: 'rgba(255,255,255,0.5)', borderRadius: 3,
        }} />
      </div>
    </div>
  );
}

function Chip({ theme, children, icon, color }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: color ? `${color}20` : theme.muted,
      color: color || theme.inkSoft,
      fontSize: 13, fontWeight: 600,
      fontFamily: theme.fontBody,
    }}>
      {icon && <span>{icon}</span>}
      {children}
    </div>
  );
}

// Streak flame icon
function FlameIcon({ size = 20, active = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path d="M12 2 C14 6 18 7 18 13 C18 17.4 15.3 20 12 20 C8.7 20 6 17.4 6 13 C6 11 7 9.5 8 9 C8 11 9 12 10 12 C10 9 11 6 12 2 Z"
        fill={active ? '#FF9500' : '#D0D0D0'}/>
      <path d="M12 8 C13 10 14.5 11 14.5 14 C14.5 16 13.3 17.5 12 17.5 C10.7 17.5 9.5 16 9.5 14 C9.5 13 10 12 10.5 11.5 C10.5 12.5 11 13 11.5 13 C11.5 11.5 12 10 12 8 Z"
        fill={active ? '#FFD93D' : '#E5E5E5'}/>
    </svg>
  );
}

function HeartIcon({ size = 20, filled = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path d="M12 21 C6 16 2 12 2 8 C2 5 4 3 7 3 C9 3 11 4.5 12 6 C13 4.5 15 3 17 3 C20 3 22 5 22 8 C22 12 18 16 12 21 Z"
        fill={filled ? '#FF4B4B' : 'none'} stroke="#FF4B4B" strokeWidth="2"/>
    </svg>
  );
}

function GemIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <polygon points="12,3 20,9 16,21 8,21 4,9" fill="#00CFFF" stroke="#0099CC" strokeWidth="1.5"/>
      <polygon points="12,3 16,21 8,21" fill="#7FE3FF"/>
    </svg>
  );
}

Object.assign(window, { THEMES, useTheme, Button, Card, ProgressBar, Chip, FlameIcon, HeartIcon, GemIcon });