// ui.jsx — 暖色系共用元件（大字、圓角、柔和卡片）
const { useState, useEffect, useRef } = React;

// 色調系統：每個 tone 一組 底色 / 文字 / 實色
const TONES = {
  mint:  { soft: '#E4F3EC', ink: '#1F6B4A', solid: '#3E9E6E' },
  sky:   { soft: '#E2EFF8', ink: '#1E5E86', solid: '#3C8FC0' },
  sun:   { soft: '#FCEFCF', ink: '#9A6B11', solid: '#F2B100' },
  rose:  { soft: '#FBE6EC', ink: '#9E3358', solid: '#E0608A' },
  grape: { soft: '#ECE6F6', ink: '#5B3E92', solid: '#8C6BD0' },
  coral: { soft: '#FCE6DD', ink: '#B14A2C', solid: '#EE7A4E' },
  primary: { soft: '#FCE7CE', ink: '#B5641A', solid: '#F2913D' },
};
function tone(t) { return TONES[t] || TONES.primary; }

// 大按鈕（長者端主要 CTA）
function BigButton({ children, onClick, tone: t = 'primary', size = 'lg', full, disabled, style = {} }) {
  const c = tone(t);
  const sizes = {
    lg: { fontSize: 'var(--fs-btn)', padding: '20px 40px', minHeight: 72, borderRadius: 999 },
    md: { fontSize: 'var(--fs-lead)', padding: '14px 26px', minHeight: 56, borderRadius: 999 },
    sm: { fontSize: 'var(--fs-body)', padding: '10px 18px', minHeight: 44, borderRadius: 999 },
  };
  return (
    <button onClick={onClick} disabled={disabled} className="bigbtn"
      style={{
        background: disabled ? 'var(--border)' : c.solid, color: '#fff', border: 'none',
        fontWeight: 800, cursor: disabled ? 'default' : 'pointer', boxShadow: disabled ? 'none' : 'inset 0 1px 0 rgba(255,255,255,0.30), var(--shadow-btn)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        width: full ? '100%' : 'auto', transition: 'transform .12s, filter .12s', ...sizes[size], ...style,
      }}>
      {children}
    </button>
  );
}

// 次要 / 返回 按鈕
function GhostButton({ children, onClick, style = {} }) {
  return (
    <button onClick={onClick} className="ghostbtn" style={{
      background: 'var(--surface)', color: 'var(--ink-2)', border: '2px solid var(--border)',
      borderRadius: 999, padding: '12px 24px', fontSize: 'var(--fs-lead)', fontWeight: 700,
      cursor: 'pointer', minHeight: 56, display: 'inline-flex', alignItems: 'center', gap: 8, ...style,
    }}>{children}</button>
  );
}

// 卡片
function Card({ children, pad = 24, style = {}, onClick, hover }) {
  return (
    <div onClick={onClick} className={hover ? 'card-hover' : ''} style={{
      background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
      boxShadow: 'var(--shadow-soft)', padding: pad, cursor: onClick ? 'pointer' : 'default', ...style,
    }}>{children}</div>
  );
}

// 圓形頭像
function Avatar({ tone: t = 'mint', face, name, size = 64 }) {
  const c = tone(t);
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: c.soft, color: c.ink,
      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.5,
      flex: '0 0 auto', fontWeight: 800,
    }}>{face || (name ? name[0] : '')}</div>
  );
}

// 標籤
function Tag({ children, tone: t = 'primary' }) {
  const c = tone(t);
  return <span style={{
    background: c.soft, color: c.ink, borderRadius: 999, padding: '5px 14px',
    fontSize: 'var(--fs-small)', fontWeight: 800, whiteSpace: 'nowrap',
  }}>{children}</span>;
}

// 進度步驟點（長者端精靈流程）
function Steps({ total, current }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', justifyContent: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{
          width: i === current ? 30 : 12, height: 12, borderRadius: 999,
          background: i === current ? 'var(--primary)' : i < current ? 'var(--tone-done)' : 'var(--border)',
          transition: 'all .2s',
        }} />
      ))}
    </div>
  );
}

// 本次 vs 上次 對比長條（成績結算用）
function CompareBars({ metric }) {
  const up = metric.now - metric.last;
  const dir = up > 0 ? 'up' : up < 0 ? 'down' : 'flat';
  const arrow = dir === 'up' ? '▲' : dir === 'down' ? '▼' : '＝';
  const dColor = dir === 'up' ? 'var(--gain)' : dir === 'down' ? 'var(--loss)' : 'var(--ink-3)';
  const Bar = ({ label, v, solid }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '10px 0' }}>
      <span style={{ width: 52, fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700 }}>{label}</span>
      <div style={{ flex: 1, height: 26, background: 'var(--sunken)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{ width: Math.max(4, Math.min(100, v)) + '%', height: '100%', background: solid, borderRadius: 999, transition: 'width .6s' }} />
      </div>
      <span className="num" style={{ width: 56, textAlign: 'right', fontSize: 'var(--fs-lead)', fontWeight: 800 }}>{v}%</span>
    </div>
  );
  return (
    <Card>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 800 }}>{metric.key}</span>
        <span className="num" style={{ fontSize: 'var(--fs-lead)', fontWeight: 800, color: dColor }}>
          {arrow} {dir === 'flat' ? '持平' : (up > 0 ? '+' : '') + up + ' 分'}
        </span>
      </div>
      <Bar label="上次" v={metric.last} solid="var(--ink-3)" />
      <Bar label="這次" v={metric.now} solid="var(--primary)" />
    </Card>
  );
}

Object.assign(window, { TONES, tone, BigButton, GhostButton, Card, Avatar, Tag, Steps, CompareBars });