// atoms.jsx — shared building blocks
// Loaded after React+Babel and before screen scripts.

function Eyebrow({ children, style }) {
  return <div className="h-eyebrow" style={style}>{children}</div>;
}

function Band({ band, label, dot = true }) {
  const cls = band === 'green' ? 'band-green'
            : band === 'amber' ? 'band-amber'
            : band === 'red'   ? 'band-red'
            : 'band-neutral';
  return (
    <span className={`band ${cls}`}>
      {dot && <span className="dot" />}
      {label || band}
    </span>
  );
}

function Card({ children, style, dark, flush, bare, className = '' }) {
  const cls = dark ? 'card-dark' : bare ? 'card-bare' : flush ? 'card card-flush' : 'card';
  return <div className={`${cls} ${className}`} style={style}>{children}</div>;
}

// Big editorial number with unit
function BigNum({ value, unit, mono, style }) {
  return (
    <div className={mono ? 't-mono' : 't-num'} style={{
      fontSize: 56, lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 400,
      display: 'flex', alignItems: 'baseline', gap: 4, ...style,
    }}>
      <span>{value}</span>
      {unit && <span style={{ fontSize: 16, color: 'var(--ink-3)', fontFamily: 'var(--sans)', letterSpacing: 0 }}>{unit}</span>}
    </div>
  );
}

// Recovery ring (SVG)
function RecoveryRing({ score, band, size = 168, label = 'Recovery' }) {
  const stroke = 10;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(1, score ?? 0));
  const dash = c * pct;
  const color = band === 'green' ? 'var(--green)'
              : band === 'amber' ? 'var(--amber)'
              : band === 'red'   ? 'var(--red)'
              : 'var(--ink)';
  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} stroke="rgba(28,26,20,0.08)" strokeWidth={stroke} fill="none" />
        <circle cx={size/2} cy={size/2} r={r}
          stroke={color} strokeWidth={stroke} fill="none"
          strokeLinecap="round"
          strokeDasharray={`${dash} ${c - dash}`}
          style={{ transition: 'stroke-dasharray .6s cubic-bezier(.3,.7,.4,1)' }}
        />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 4,
      }}>
        <div className="h-eyebrow" style={{ fontSize: 10 }}>{label}</div>
        <div className="t-num" style={{ fontSize: 54, lineHeight: 1, letterSpacing: '-0.04em' }}>
          {score == null ? '—' : Math.round(score * 100)}
        </div>
        <Band band={band} label={band || 'idle'} />
      </div>
    </div>
  );
}

// 7-day band trend (one block per day)
function BandTrend({ logs }) {
  // logs: oldest→newest, last 7
  const colorFor = (b) => b === 'green' ? 'var(--green)' : b === 'amber' ? 'var(--amber)' : b === 'red' ? 'var(--red)' : 'rgba(28,26,20,0.18)';
  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 44 }}>
      {logs.map((l, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 4 }}>
          <div style={{
            background: colorFor(l.computed?.recovery_band),
            height: Math.max(8, (l.computed?.recovery_score ?? 0) * 38),
            borderRadius: 3,
            opacity: 0.9,
          }} />
        </div>
      ))}
    </div>
  );
}

function Slider1to10({ label, value, onChange, anchors = ['Low', 'High'], inverse }) {
  const pct = ((value - 1) / 9) * 100;
  return (
    <div>
      <div className="row between baseline mb-8">
        <div className="t-body" style={{ fontWeight: 500, color: 'var(--ink)' }}>{label}</div>
        <div className="t-num" style={{ fontSize: 24, lineHeight: 1 }}>{value}<span style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 2 }}>/10</span></div>
      </div>
      <input type="range" min={1} max={10} step={1} value={value}
        className="slider"
        style={{ '--p': pct + '%' }}
        onChange={(e) => onChange(Number(e.target.value))}
      />
      <div className="row between t-small" style={{ marginTop: -4 }}>
        <span>{anchors[0]}</span><span>{anchors[1]}</span>
      </div>
    </div>
  );
}

// Generic icon
function Icon({ name, size = 22, stroke = 1.8, color = 'currentColor' }) {
  const s = size, c = color, sw = stroke;
  const paths = {
    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"/></>,
    calendar:<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
    chart:   <><path d="M3 20V8M9 20V12M15 20v-6M21 20V4"/></>,
    user:    <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>,
    arrow:   <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    flame:   <><path d="M12 3c1 4 5 5 5 10a5 5 0 11-10 0c0-3 2-4 3-6 1 2 2 3 2 6"/></>,
    sparkle: <><path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5L12 3z"/></>,
    plus:    <><path d="M12 5v14M5 12h14"/></>,
    check:   <><path d="M5 12l5 5L20 7"/></>,
    info:    <><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 8v.01"/></>,
    alert:   <><path d="M12 3L2 20h20L12 3z"/><path d="M12 10v5M12 17v.01"/></>,
    moon:    <><path d="M21 13A9 9 0 1111 3a7 7 0 0010 10z"/></>,
    activity:<><path d="M3 12h4l3-8 4 16 3-8h4"/></>,
    refresh: <><path d="M4 4v6h6M20 20v-6h-6"/><path d="M20 10A8 8 0 005.3 7.7M4 14a8 8 0 0014.7 2.3"/></>,
    chevron: <><path d="M9 6l6 6-6 6"/></>,
    chev_d:  <><path d="M6 9l6 6 6-6"/></>,
    bell:    <><path d="M6 8a6 6 0 1112 0c0 7 3 7 3 9H3c0-2 3-2 3-9zM10 21a2 2 0 004 0"/></>,
    target:  <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
    cycle:   <><circle cx="12" cy="12" r="8"/><path d="M12 4v4M12 16v4M4 12h4M16 12h4"/></>,
    dumbbell:<><path d="M6 8v8M3 10v4M21 10v4M18 8v8M6 12h12"/></>,
    leaf:    <><path d="M4 20c0-8 6-14 16-14 0 10-6 16-16 16zM4 20l7-7"/></>,
  };
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"
      stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0 }}>
      {paths[name] || paths.info}
    </svg>
  );
}

// A list row with hairline
function Row({ left, right, sub, onClick, last }) {
  return (
    <div onClick={onClick}
      style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '14px 18px',
        borderBottom: last ? '0' : '0.5px solid var(--line)',
        cursor: onClick ? 'pointer' : 'default',
      }}>
      <div className="grow col" style={{ gap: 2, minWidth: 0 }}>
        <div className="t-body" style={{ color: 'var(--ink)', fontWeight: 500 }}>{left}</div>
        {sub && <div className="t-small">{sub}</div>}
      </div>
      {right && <div className="t-small" style={{ color: 'var(--ink-2)', flexShrink: 0 }}>{right}</div>}
    </div>
  );
}

function Stat({ label, value, sub, accent }) {
  return (
    <div className="col gap-4">
      <Eyebrow>{label}</Eyebrow>
      <div className="t-num" style={{
        fontSize: 32, lineHeight: 1, letterSpacing: '-0.025em',
        color: accent || 'var(--ink)',
      }}>{value}</div>
      {sub && <div className="t-small">{sub}</div>}
    </div>
  );
}

// Block type prettifier
const BLOCK_LABELS = {
  warmup: 'Warm up', main: 'Main', accessory: 'Accessory',
  conditioning: 'Conditioning', cooldown: 'Cool down', mobility: 'Mobility',
  breathwork: 'Breathwork',
};
const SESSION_LABELS = {
  full_body: 'Full body', upper: 'Upper', lower: 'Lower',
  push: 'Push', pull: 'Pull', legs: 'Legs',
  conditioning: 'Conditioning', active_recovery: 'Active recovery',
  rest: 'Rest', custom: 'Custom',
};
const GOAL_LABELS = {
  hypertrophy: 'Hypertrophy', strength: 'Strength', fat_loss: 'Fat loss',
  recomp: 'Recomp', performance: 'Performance', longevity: 'Longevity',
  sexual_health: 'Sexual health', energy: 'Energy',
  pregnancy_prep: 'Pregnancy prep', postpartum_recovery: 'Postpartum',
};

Object.assign(window, {
  Eyebrow, Band, Card, BigNum, RecoveryRing, BandTrend, Slider1to10,
  Icon, Row, Stat, BLOCK_LABELS, SESSION_LABELS, GOAL_LABELS,
});