// ui.jsx — shared editorial primitives (米白墨色 system, Design.md §6)
const { useState } = React;

// kicker / 標籤
function Kicker({ children, style }) {
  return <div style={{ fontSize: 12, letterSpacing: '.08em', color: 'var(--ink-3)', ...style }}>{children}</div>;
}

// 區塊標題 (思源宋體)
function SectionTitle({ children, style }) {
  return <div className="sr" style={{ fontSize: 16, color: 'var(--ink)', marginBottom: 16, ...style }}>{children}</div>;
}

// hero 主數字 (Fraunces)
function Hero({ value, unit, label, blurb, deltaTone }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 24 }}>
      <div>
        <div className="fr" style={{ fontSize: 62, lineHeight: .92, color: deltaTone || 'var(--ink)' }}>
          {value}{unit && <span style={{ fontSize: 28 }}>{unit}</span>}
        </div>
        <Kicker style={{ marginTop: 8 }}>{label}</Kicker>
      </div>
      {blurb && <div className="sr" style={{ maxWidth: 250, textAlign: 'right', fontSize: 16, lineHeight: 1.65, color: 'var(--ink)' }}>{blurb}</div>}
    </div>
  );
}

// 摘要數字列 — hairline top/bottom, vertical dividers (no cards)
function StatStrip({ items }) {
  return (
    <div style={{ display: 'flex', borderTop: '0.5px solid var(--border-strong)', borderBottom: '0.5px solid var(--border-strong)' }}>
      {items.map((it, i) => (
        <div key={i} style={{ flex: 1, padding: i === 0 ? '14px 0' : '14px 0 14px 18px', borderLeft: i ? '0.5px solid var(--border)' : 'none' }}>
          <div className="fr" style={{ fontSize: 23, color: it.tone || 'var(--ink)' }}>{it.value}</div>
          <Kicker style={{ marginTop: 3 }}>{it.label}</Kicker>
        </div>
      ))}
    </div>
  );
}

// 狀態標記 — 形狀 + 文字 (顏色僅輔助). active / attention / inactive
function StatusMark({ status }) {
  if (status === '活躍') {
    return <span style={st.wrap}><span style={{ ...st.dot, background: 'var(--active)' }} /><span style={{ color: 'var(--active-text)' }}>活躍</span></span>;
  }
  if (status === '需關注') {
    return <span style={st.wrap}><span style={{ ...st.dot, background: 'transparent', border: '1.5px solid var(--attention)' }} /><span style={{ color: 'var(--ink-2)' }}>需關注</span></span>;
  }
  return <span style={st.wrap}><span style={{ ...st.dot, width: 6, height: 6, background: 'var(--inactive)' }} /><span style={{ color: 'var(--ink-3)' }}>未啟用</span></span>;
}
const st = {
  wrap: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12 },
  dot: { display: 'inline-block', width: 8, height: 8, borderRadius: '50%' },
};

// delta 變化 — ↑↓ + 顏色 (對紅綠色盲友善)
function Delta({ value, suffix }) {
  if (value === 0 || value == null) return <span style={{ color: 'var(--ink-3)' }}>→</span>;
  const up = value > 0;
  return <span style={{ color: up ? 'var(--gain)' : 'var(--loss)' }}>{up ? '↑' : '↓'} {Math.abs(value)}{suffix || ''}</span>;
}

// trend arrow (up/flat/down) — flat & down stay neutral ink (encouraging, no red alarm)
function TrendMark({ trend }) {
  if (trend === 'up') return <span style={{ color: 'var(--gain)' }}>↑</span>;
  if (trend === 'down') return <span style={{ color: 'var(--attention)' }}>↓</span>;
  return <span style={{ color: 'var(--ink-2)' }}>→</span>;
}

// 點圖 一列 — 共用 0–100 軸，墨色圓點落在數值位置
function DotRow({ label, value, labelWidth = 96 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 15 }}>
      <span style={{ width: labelWidth, fontSize: 13 }}>{label}</span>
      <div style={{ flex: 1, position: 'relative', height: 10 }}>
        <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', height: 1, background: 'var(--border)' }} />
        <div style={{ position: 'absolute', left: value + '%', top: '50%', width: 9, height: 9, background: 'var(--mark)', borderRadius: '50%', transform: 'translate(-50%,-50%)' }} />
      </div>
      <span className="fr" style={{ width: 26, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{value}</span>
    </div>
  );
}

// 排行/熱度 一列 — 序號 + 名稱 + 放大襯線數字 + 方端細線
function HeatRow({ rank, name, value, max }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
        <span style={{ fontSize: 13 }}>
          <span className="fr" style={{ color: 'var(--ink-3)', fontSize: 12, marginRight: 9 }}>{String(rank).padStart(2, '0')}</span>{name}
        </span>
        <span className="fr" style={{ fontSize: 18 }}>{value}</span>
      </div>
      <div style={{ marginTop: 7, height: 2, background: 'var(--border)', position: 'relative' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, height: 2, width: Math.round((value / max) * 100) + '%', background: 'var(--mark)' }} />
      </div>
    </div>
  );
}

// 描邊按鈕 (主動作可 solid)
function OutlineButton({ children, onClick, solid }) {
  const [h, setH] = useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 16px',
    fontSize: 13, cursor: 'pointer', fontFamily: "'Noto Sans TC',sans-serif",
    transition: 'background .15s, color .15s',
    border: '1px solid var(--ink)',
    background: solid ? (h ? '#000' : 'var(--ink)') : (h ? 'rgba(42,42,36,0.06)' : 'transparent'),
    color: solid ? 'var(--surface)' : 'var(--ink)',
  };
  return <button style={base} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</button>;
}

// hairline table row
function Row({ children, onClick, first, pad = 11 }) {
  const [h, setH] = useState(false);
  return (
    <div onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'flex', alignItems: 'center', padding: pad + 'px 0',
        borderTop: first ? 'none' : '0.5px solid var(--border)',
        cursor: onClick ? 'pointer' : 'default',
        background: onClick && h ? 'rgba(42,42,36,0.035)' : 'transparent',
        margin: '0 -8px', paddingLeft: 8, paddingRight: 8,
      }}>
      {children}
    </div>
  );
}

Object.assign(window, { Kicker, SectionTitle, Hero, StatStrip, StatusMark, Delta, TrendMark, DotRow, HeatRow, OutlineButton, Row });