// ===== SHARED UI COMPONENTS =====
const { useState, useEffect, useRef } = React;

function Card({ t, children, style, onClick, pad = 16 }) {
  return (
    <div onClick={onClick} style={{
      background: t.card,
      border: `1px solid ${t.border}`,
      borderRadius: 20,
      padding: pad,
      boxShadow: t.shadow,
      overflow: 'hidden',
      ...style,
    }}>{children}</div>
  );
}

function Badge({ t, color, children, style }) {
  return (
    <span style={{
      fontSize: 10,
      fontWeight: 700,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      background: color + (t.dark ? '33' : '22'),
      color: t.dark ? lighten(color) : color,
      borderRadius: 6,
      padding: '3px 8px',
      display: 'inline-block',
      lineHeight: 1.3,
      ...style,
    }}>{children}</span>
  );
}

// Slightly lighten a hex color for legibility on dark bg
function lighten(hex) {
  try {
    const n = parseInt(hex.slice(1), 16);
    let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    r = Math.min(255, Math.round(r + (255 - r) * 0.35));
    g = Math.min(255, Math.round(g + (255 - g) * 0.35));
    b = Math.min(255, Math.round(b + (255 - b) * 0.35));
    return `rgb(${r},${g},${b})`;
  } catch (e) { return hex; }
}

function ProgressRing({ pct, size = 120, stroke = 12, color = '#2556a8', track = '#e6eaf2', children, animate = true }) {
  const r = (size - stroke) / 2;
  const circ = 2 * Math.PI * r;
  const [shown, setShown] = useState(animate ? 0 : pct);
  useEffect(() => {
    if (!animate) { setShown(pct); return; }
    const id = requestAnimationFrame(() => setShown(pct));
    return () => cancelAnimationFrame(id);
  }, [pct, animate]);
  const offset = circ - (shown / 100) * circ;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)' }} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
    </div>
  );
}

function Pill({ active, color, t, children, onClick, style }) {
  const c = color || t.mid;
  return (
    <button onClick={onClick} className="no-select" style={{
      flexShrink: 0,
      border: `1px solid ${active ? c : t.border}`,
      background: active ? c : t.card,
      color: active ? '#fff' : t.subtext,
      borderRadius: 999,
      padding: '8px 14px',
      fontSize: 13,
      fontWeight: 600,
      minHeight: 36,
      whiteSpace: 'nowrap',
      transition: 'all 0.18s ease',
      ...style,
    }}>{children}</button>
  );
}

function ProgressBar({ pct, color, t, height = 8 }) {
  const [w, setW] = useState(0);
  useEffect(() => { const id = requestAnimationFrame(() => setW(pct)); return () => cancelAnimationFrame(id); }, [pct]);
  return (
    <div style={{ background: t.dark ? '#0d1117' : '#eef1f7', borderRadius: 999, height, overflow: 'hidden', width: '100%' }}>
      <div style={{ width: `${w}%`, height: '100%', background: color, borderRadius: 999, transition: 'width 1s cubic-bezier(.4,0,.2,1)' }} />
    </div>
  );
}

// Screen wrapper: title + scrollable body
function ScreenHeader({ t, title, subtitle, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '8px 16px 14px', gap: 12 }}>
      <div>
        <h1 style={{ margin: 0, fontSize: 'clamp(20px, 6vw, 24px)', fontWeight: 800, color: t.text, letterSpacing: '-0.02em' }}>{title}</h1>
        {subtitle && <p style={{ margin: '4px 0 0', fontSize: 13, color: t.subtext, fontWeight: 500 }}>{subtitle}</p>}
      </div>
      {right}
    </div>
  );
}

function SectionTitle({ t, children, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '4px 0 10px' }}>
      <h2 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: t.text, letterSpacing: '-0.01em' }}>{children}</h2>
      {action}
    </div>
  );
}

// Icon tile with soft tinted background
function IconTile({ icon, color, t, size = 44, radius = 14, fontSize = 22 }) {
  return (
    <div style={{
      width: size, height: size, minWidth: size,
      borderRadius: radius,
      background: color + (t.dark ? '2e' : '1c'),
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize, lineHeight: 1,
    }}>{icon}</div>
  );
}

// Primary action button
function Btn({ t, children, onClick, color, full, variant = 'solid', style, icon }) {
  const c = color || t.mid;
  const base = {
    border: 'none', borderRadius: 14, padding: '14px 18px',
    fontSize: 15, fontWeight: 700, minHeight: 48,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    width: full ? '100%' : 'auto', transition: 'transform 0.12s ease, opacity 0.2s',
  };
  const variants = {
    solid: { background: c, color: '#fff' },
    soft: { background: c + (t.dark ? '33' : '1c'), color: t.dark ? lighten(c) : c },
    outline: { background: 'transparent', color: t.text, border: `1.5px solid ${t.border}` },
  };
  return (
    <button onClick={onClick} className="no-select"
      onPointerDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
      onPointerUp={e => e.currentTarget.style.transform = 'scale(1)'}
      onPointerLeave={e => e.currentTarget.style.transform = 'scale(1)'}
      style={{ ...base, ...variants[variant], ...style }}>
      {icon && <Icon name={icon} size={18} />}{children}
    </button>
  );
}

function Divider({ t }) {
  return <div style={{ height: 1, background: t.border, margin: '12px 0' }} />;
}

Object.assign(window, { Card, Badge, ProgressRing, ProgressBar, Pill, ScreenHeader, SectionTitle, IconTile, Btn, Divider, lighten });