/* UI 原语 + 图标 */
const Icons = {
  home:'M3 10.5L12 3l9 7.5 M5 9.5V21h14V9.5 M9.5 21v-6h5v6',
  edit:'M12 20h9 M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z',
  list:'M8 6h13M8 12h13M8 18h13',
  chart:'M3 3v18h18 M7 14l3.5-4 3 3L21 7',
  gift:'M20 12v9H4v-9 M2 7h20v5H2z M12 22V7 M12 7S10.5 3 8 3a2.5 2.5 0 0 0 0 5 M12 7s1.5-4 4-4a2.5 2.5 0 0 1 0 5',
  heart:'M20.8 5.6a5 5 0 0 0-7 0L12 7.3l-1.8-1.7a5 5 0 1 0-7 7L12 21l8.8-8.4a5 5 0 0 0 0-7z',
  users:'M9 8a3.2 3.2 0 1 0 0-.01 M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6 M16 4.2A3.2 3.2 0 0 1 16 11 M18 14.2c2.3.7 4 2.8 4 5.3',
  settings:'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
  search:'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M21 21l-4-4',
  bell:'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.7 21a2 2 0 0 1-3.4 0',
  chevron:'M6 9l6 6 6-6',
  check:'M5 12l5 5L20 6',
  cam:'M3 8h3l2-3h8l2 3h3v12H3z',
  refresh:'M3 12a9 9 0 0 1 15-6.7L21 8 M21 3v5h-5 M21 12a9 9 0 0 1-15 6.7L3 16 M3 21v-5h5',
  trash:'M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13',
  eye:'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z',
  download:'M12 3v12M7 11l5 5 5-5 M5 21h14',
  plus:'M12 5v14M5 12h14',
  logout:'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9',
  cap:'M22 10L12 5 2 10l10 5 10-5z M6 12v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5',
  star:'M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.8 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z',
  sheet:'M4 3h16v18H4z M4 9h16M4 15h16M10 3v18',
};
function Ico({ d, size=20, sw=2, fill='none', style }) {
  return <svg viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{width:size, height:size, ...style}}>
    {String(d).split(' M').map((seg,i)=><path key={i} d={(i?'M':'')+seg} />)}
  </svg>;
}

const Card = ({ pad=true, className='', style, children, ...p }) =>
  <div className={'card '+(pad?'card-pad ':'')+className} style={style} {...p}>{children}</div>;

const Tag = ({ tone='gray', dot=false, children, className='', ...p }) =>
  <span className={`tag ${tone} ${className}`} {...p}>{dot && <span className="dt"></span>}{children}</span>;

function Button({ variant='primary', size='', children, className='', icon, ...p }) {
  const v = { primary:'btn-primary', green:'btn-green', warm:'btn-warm', ghost:'btn-ghost', soft:'btn-soft' }[variant] || 'btn-primary';
  const s = size==='lg'?'btn-lg':size==='sm'?'btn-sm':'';
  return <button className={`btn ${v} ${s} ${className}`} {...p}>{icon}{children}</button>;
}

function Stat({ icon, iconCls='bg-blue-soft', label, value, unit, trend, trendKind='up', valueColor }) {
  return <div className="stat">
    <div className={'ico '+iconCls}>{icon}</div>
    <div className="label">{label}</div>
    <div className="value" style={valueColor?{color:valueColor}:null}>{value}{unit && <small>{unit}</small>}</div>
    {trend && <span className={'trend '+trendKind}>{trend}</span>}
  </div>;
}

const SubjDot = ({ name, size=9 }) => <span className="subj-dot" style={{background:SUBJECT_COLOR[name]||'#999', width:size, height:size}}></span>;

function Progress({ value, color }) {
  return <div className="progress"><i style={{width:value+'%', background:color}}></i></div>;
}

function Toast() {
  const { state } = useStore();
  if (!state.toast) return null;
  const c = { success:'#5fcfa0', info:'#4ea3dd', warn:'#f5a35e' }[state.toast.kind] || '#4ea3dd';
  return <div style={{position:'fixed', top:22, left:'50%', transform:'translateX(-50%)', zIndex:999,
    background:'#fff', border:'1px solid var(--line)', borderLeft:`4px solid ${c}`, borderRadius:12,
    padding:'13px 20px', boxShadow:'var(--shadow-lg)', display:'flex', alignItems:'center', gap:10, fontWeight:700, fontSize:13.5, animation:'toastIn .3s'}}>
    <span style={{width:20,height:20,borderRadius:'50%',background:c,color:'#fff',display:'grid',placeItems:'center'}}><Ico d={Icons.check} size={13} sw={3.5}/></span>
    {state.toast.msg}
  </div>;
}

// 通用弹窗
function Modal({ open, onClose, title, children, width=440 }) {
  if (!open) return null;
  return <div onClick={onClose} style={{position:'fixed', inset:0, background:'oklch(0.27 0.02 250 / .42)', zIndex:500, display:'grid', placeItems:'center', padding:20, animation:'fadeIn .2s'}}>
    <div onClick={e=>e.stopPropagation()} className="card" style={{width, maxWidth:'100%', padding:0, animation:'popIn .25s'}}>
      <div style={{padding:'20px 24px', borderBottom:'1px solid var(--line-2)', display:'flex', alignItems:'center'}}>
        <h3 style={{fontSize:17}}>{title}</h3>
        <button onClick={onClose} className="icon-btn" style={{marginLeft:'auto', width:32, height:32}}>✕</button>
      </div>
      <div style={{padding:24}}>{children}</div>
    </div>
  </div>;
}

Object.assign(window, { Icons, Ico, Card, Tag, Button, Stat, SubjDot, Progress, Toast, Modal });