// ─── Janus 设计系统：主题令牌 + 共享原子组件 ───
const { createContext, useContext } = React;

function hexA(hex, a) {
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
  const r = parseInt(n.slice(0, 2), 16), g = parseInt(n.slice(2, 4), 16), b = parseInt(n.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

function tokens(dark, accent) {
  const acc2 = '#A98BFF'; // 紫，AI 渐变的另一端
  if (dark) {
    return {
      dark: true, accent, acc2,
      bg: '#080B12',
      bgGrad: `radial-gradient(120% 80% at 50% -10%, ${hexA(accent, 0.10)} 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg,#0A0E16 0%,#080A11 100%)`,
      surface: '#10151F', surface2: '#161D2A', surfaceUp: '#1B2433',
      line: 'rgba(255,255,255,0.07)', line2: 'rgba(255,255,255,0.13)',
      text: '#EAEEF7', sub: '#98A2B4', faint: '#626D80', faint2: '#525C6E',
      muted: '#7A8094',
      good: '#3FD896', goodBg: 'rgba(63,216,150,0.12)',
      warn: '#F7B13C', warnBg: 'rgba(247,177,60,0.12)',
      bad: '#FF6F6F', badBg: 'rgba(255,111,111,0.12)',
      accSoft: hexA(accent, 0.16), accLine: hexA(accent, 0.40),
      shadow: '0 10px 34px rgba(0,0,0,0.45)', shadowSm: '0 2px 10px rgba(0,0,0,0.35)',
      glass: 'rgba(20,26,38,0.72)',
    };
  }
  return {
    dark: false, accent, acc2,
    bg: '#EFF2F8',
    bgGrad: `radial-gradient(120% 80% at 50% -10%, ${hexA(accent, 0.14)} 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg,#F4F6FB 0%,#EAEEF6 100%)`,
    surface: '#FFFFFF', surface2: '#F6F8FC', surfaceUp: '#FFFFFF',
    line: 'rgba(15,23,42,0.08)', line2: 'rgba(15,23,42,0.14)',
    text: '#101725', sub: '#5A6577', faint: '#94A0B2', faint2: '#9AA6B6',
    muted: '#7B8696',
    good: '#16A973', goodBg: 'rgba(22,169,115,0.10)',
    warn: '#D8870B', warnBg: 'rgba(216,135,11,0.10)',
    bad: '#E2474C', badBg: 'rgba(226,71,76,0.10)',
    accSoft: hexA(accent, 0.12), accLine: hexA(accent, 0.32),
    shadow: '0 10px 30px rgba(20,30,60,0.10)', shadowSm: '0 2px 10px rgba(20,30,60,0.06)',
    glass: 'rgba(255,255,255,0.78)',
  };
}

const ThemeCtx = createContext(null);
const useT = () => useContext(ThemeCtx);

// 应用级上下文：导航栈 + Sheet 层 + BANT/笔记存储
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);

const FONT = '"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif';
const NUMF = '"SF Pro Display",-apple-system,"PingFang SC",system-ui,sans-serif';

// ── 原子 ──
function Card({ children, style = {}, pad = 16, onClick, glow }) {
  const T = useT();
  return (
    <div onClick={onClick} style={{
      background: T.surface, borderRadius: 18, padding: pad,
      border: `0.5px solid ${T.line}`,
      boxShadow: glow ? `0 0 0 1px ${T.accLine}, ${T.shadowSm}` : T.shadowSm,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}

function Sparkle({ size = 14, color }) {
  const T = useT();
  const c = color || T.accent;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <path d="M12 2.5l1.8 5.7a3 3 0 002 2L21.5 12l-5.7 1.8a3 3 0 00-2 2L12 21.5l-1.8-5.7a3 3 0 00-2-2L2.5 12l5.7-1.8a3 3 0 002-2L12 2.5z"
        fill={c} />
      <path d="M19 3l.7 2.1a1.4 1.4 0 00.9.9L22.7 6.7l-2.1.7a1.4 1.4 0 00-.9.9L19 10.3l-.7-2.1a1.4 1.4 0 00-.9-.9L15.3 6.7l2.1-.7a1.4 1.4 0 00.9-.9L19 3z"
        fill={c} opacity="0.55" />
    </svg>
  );
}

// AI 标签头
function AIeyebrow({ label }) {
  const T = useT();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <Sparkle size={13} />
      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, color: T.accent, textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
}

function Tag({ children, tone = 'accent', style = {} }) {
  const T = useT();
  const map = {
    accent: [T.accSoft, T.accent], good: [T.goodBg, T.good],
    warn: [T.warnBg, T.warn], bad: [T.badBg, T.bad],
    plain: [T.surface2, T.sub],
  };
  const [bg, fg] = map[tone] || map.accent;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontSize: 11.5, fontWeight: 600, color: fg, background: bg,
      padding: '3px 9px', borderRadius: 999, lineHeight: 1.3, whiteSpace: 'nowrap', ...style,
    }}>{children}</span>
  );
}

function Avatar({ name, tone = 'accent', size = 38 }) {
  const T = useT();
  const map = { champion: T.good, decider: T.accent, blocker: T.warn, unknown: T.faint, accent: T.accent };
  const c = map[tone] || T.accent;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: hexA(typeof c === 'string' && c.startsWith('#') ? c : '#888', 0.16),
      color: c, display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.4, fontWeight: 700, border: `1px solid ${hexA(c.startsWith && c.startsWith('#') ? c : '#888', 0.3)}`,
    }}>{name.slice(-2)}</div>
  );
}

// 胜率环
function Ring({ value, size = 46, stroke = 4, label }) {
  const T = useT();
  const r = (size - stroke) / 2, c = 2 * Math.PI * r;
  const col = value >= 70 ? T.good : value >= 40 ? T.accent : T.warn;
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r} stroke={T.line2} strokeWidth={stroke} fill="none" />
        <circle cx={size / 2} cy={size / 2} r={r} stroke={col} strokeWidth={stroke} fill="none"
          strokeDasharray={c} strokeDashoffset={c * (1 - value / 100)} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 0.9s cubic-bezier(.4,0,.2,1)' }} />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{ fontFamily: NUMF, fontSize: size * 0.30, fontWeight: 700, color: T.text, lineHeight: 1 }}>{value}</span>
        {label && <span style={{ fontSize: 7.5, color: T.sub }}>{label}</span>}
      </div>
    </div>
  );
}

function SectionLabel({ children, right }) {
  const T = useT();
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '0 4px 10px' }}>
      <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: 0.3, color: T.sub }}>{children}</span>
      {right}
    </div>
  );
}

function Chevron({ size = 16, dir = 'right' }) {
  const T = useT();
  const rot = { right: 0, down: 90, left: 180, up: 270 }[dir];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ transform: `rotate(${rot}deg)`, flexShrink: 0 }}>
      <path d="M9 6l6 6-6 6" stroke={T.faint} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, {
  hexA, tokens, ThemeCtx, useT, AppCtx, useApp, FONT, NUMF,
  Card, Sparkle, AIeyebrow, Tag, Avatar, Ring, SectionLabel, Chevron,
});