// Atoms — Button, Card, Badge, Icon
// Shared across every screen. Keep implementations cosmetic, not functional.

const { useState, useEffect, useRef } = React;

function Icon({ name, size = 20, stroke = 1.75, className = '', style = {} }) {
  const paths = {
    home: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></>,
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    map: <><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/></>,
    activity: <><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></>,
    check: <><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    clipboard: <><path d="M12 6V2H8"/><rect x="2" y="6" width="20" height="16" rx="2"/><path d="M6 10h4M14 10h4M6 14h4M14 14h4"/></>,
    timer: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    chat: <><path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    pie: <><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></>,
    settings: <><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 0 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.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9 1.65 1.65 0 0 0 4.27 7.18l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0A1.65 1.65 0 0 0 10 3.09V3a2 2 0 0 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 19.4 9v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></>,
    arrow: <><path d="M5 12h14M13 5l7 7-7 7"/></>,
    moon: <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></>,
    send: <><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    bell: <><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    dots: <><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>,
    pen: <><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></>,
    scale: <><path d="M12 3v18M4 7h16M7 7l-3 8a5 5 0 0 0 6 0zM17 7l-3 8a5 5 0 0 0 6 0z"/></>,
    msg: <><path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    grad: <><path d="M22 10 12 5 2 10l10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>,
    refresh: <><path d="M1 4v6h6M23 20v-6h-6"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></>,
    chevron: <><path d="m9 18 6-6-6-6"/></>,
    play: <><path d="M5 3l14 9-14 9z" fill="currentColor"/></>,
    pause: <><rect x="6" y="4" width="4" height="16" fill="currentColor"/><rect x="14" y="4" width="4" height="16" fill="currentColor"/></>,
    video: <><rect x="2" y="6" width="15" height="12" rx="2"/><path d="M17 10l5-3v10l-5-3z"/></>,
    bookmark: <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    close: <><path d="M18 6L6 18M6 6l12 12"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         className={className} style={style}>
      {paths[name] || null}
    </svg>
  );
}

function Button({ variant = 'primary', children, onClick, iconLeft, iconRight, size='md', style={} }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontWeight: 500,
    fontSize: size === 'sm' ? 13 : 14,
    padding: size === 'sm' ? '7px 12px' : '10px 18px',
    borderRadius: 10, border: 'none', cursor: 'pointer',
    transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
    whiteSpace: 'nowrap',
  };
  const styles = {
    primary: { background: 'var(--accent)', color: '#fff', boxShadow: 'var(--elev-1)' },
    secondary: { background: 'var(--surface)', color: 'var(--fg-1)', border: '1px solid var(--border)' },
    ghost: { background: 'transparent', color: 'var(--accent)' },
    highlight: { background: 'var(--binah-saffron)', color: '#fff', borderRadius: 999, boxShadow: 'var(--elev-1)' },
    danger: { background: 'transparent', color: 'var(--danger)', border: '1px solid var(--danger-soft)' },
  };
  return <button style={{ ...base, ...styles[variant], ...style }} onClick={onClick}>
    {iconLeft && <Icon name={iconLeft} size={16} />}{children}{iconRight && <Icon name={iconRight} size={16} />}
  </button>;
}

function Card({ children, style = {}, hero = false, padding = 20, onClick }) {
  return <div onClick={onClick} style={{
    background: 'var(--surface)', borderRadius: hero ? 24 : 20,
    padding, boxShadow: hero ? 'var(--elev-3)' : 'var(--elev-1)',
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
    ...style,
  }}>{children}</div>;
}

function Badge({ children, variant = 'neutral', dot = false, style = {} }) {
  const variants = {
    neutral: { background: 'var(--surface)', color: 'var(--fg-2)', border: '1px solid var(--border)' },
    accent: { background: 'var(--accent-soft)', color: 'var(--accent)' },
    positive: { background: 'var(--positive-soft)', color: 'var(--positive-fg)' },
    highlight: { background: 'var(--highlight-soft)', color: 'var(--highlight-fg)' },
    danger: { background: 'var(--danger-soft)', color: 'var(--danger-fg)' },
  };
  const dotColors = { neutral: 'var(--fg-3)', accent: 'var(--accent)', positive: 'var(--binah-sage-mint)', highlight: 'var(--binah-saffron)', danger: 'var(--binah-terracotta)' };
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '4px 10px', borderRadius: 999,
    fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500, lineHeight: 1,
    ...variants[variant], ...style,
  }}>
    {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: dotColors[variant] }} />}
    {children}
  </span>;
}

function Ring({ value, size = 80, stroke = 8, gradient = false, label }) {
  const r = (size / 2) - stroke;
  const C = 2 * Math.PI * r;
  const off = C * (1 - value / 100);
  const gradId = 'g' + Math.random().toString(36).slice(2, 7);
  return <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
    <circle cx={size/2} cy={size/2} r={r} stroke="var(--bg-2)" strokeWidth={stroke} fill="none" />
    <circle cx={size/2} cy={size/2} r={r}
      stroke={gradient ? `url(#${gradId})` : 'var(--accent)'} strokeWidth={stroke} fill="none"
      strokeDasharray={C} strokeDashoffset={off} strokeLinecap="round"
      transform={`rotate(-90 ${size/2} ${size/2})`} />
    {gradient && <defs>
      <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="var(--binah-deep-teal)"/>
        <stop offset="100%" stopColor="var(--binah-sage-mint)"/>
      </linearGradient>
    </defs>}
    <text x={size/2} y={size/2+5} textAnchor="middle"
      style={{ fontFamily: 'var(--font-display)', fontVariantNumeric: 'tabular-nums',
               fontWeight: 700, fontSize: size*0.22, fill: 'var(--fg-1)', letterSpacing: '-0.02em' }}>
      {value}%
    </text>
  </svg>;
}

Object.assign(window, { Icon, Button, Card, Badge, Ring });