// components.jsx — 共用 UI 元件

function Pill({ tone, children, style }){
  return <span className={'pill '+(tone||'')} style={style}>{tone&&tone.startsWith('risk')&&<span className="dot"></span>}{children}</span>;
}
function Av({ bg, children, size=34 }){
  return <div className="av" style={{ background:bg, width:size, height:size, fontSize:size*0.4 }}>{children}</div>;
}
function Tag({ children, style }){ return <span className="tag" style={style}>{children}</span>; }

function Sidebar({ active, onNav, onOpenSettings }){
  const Item = ({ icon, label, id }) => (
    <div onClick={()=>onNav&&onNav(id)} style={{ display:'flex', alignItems:'center', gap:10, height:34, padding:'0 11px',
      borderRadius:8, fontSize:12.5, cursor:'pointer',
      background: active===id ? 'var(--clay-soft)' : 'transparent',
      color: active===id ? 'var(--clay-ink)' : 'var(--ink-2)', fontWeight: active===id?600:400 }}>
      <span style={{ width:16, textAlign:'center', opacity:.85 }}>{icon}</span>{label}
    </div>
  );
  return (
    <div style={{ width:200, flex:'none', borderRight:'1px solid var(--line)', background:'var(--surface)',
      padding:'18px 14px', display:'flex', flexDirection:'column' }}>
      <div className="brandmark" style={{ padding:'0 4px 18px' }}>
        <span className="gm">果</span>
        <div style={{ lineHeight:1.2 }}>
          <div style={{ fontWeight:700, fontSize:12.5 }}>工作整合器</div>
          <div className="faint" style={{ fontSize:10 }}>果米工作室</div>
        </div>
      </div>
      <div className="faint mono navlbl">作業</div>
      <div className="navgrp">
        <Item icon="▦" label="洽談看板" id="board" />
        <Item icon="☷" label="案件追蹤" id="track" />
        <Item icon="▤" label="合約・委刊單" id="contract" />
        <Item icon="◵" label="行事曆・檔期" id="cal" />
      </div>
      <div className="faint mono navlbl">財務</div>
      <div className="navgrp">
        <Item icon="＄" label="收款紀錄" id="pay" />
        <Item icon="▣" label="發票紀錄" id="invoice" />
        <Item icon="▤" label="月報表・抽成" id="report" />
      </div>
      <div className="faint mono navlbl">法規</div>
      <div className="navgrp">
        <Item icon="§" label="法規參考庫" id="law" />
      </div>
      <div style={{ marginTop:'auto', display:'flex', alignItems:'center', gap:9, padding:'10px 8px', borderTop:'1px solid var(--line)' }}>
        <Av bg="var(--ink)" size={28}>多</Av>
        <div style={{ lineHeight:1.2, flex:1 }}>
          <div style={{ fontSize:11.5, fontWeight:600 }}>多多</div>
          <div className="faint" style={{ fontSize:9.5 }}>經紀人 · 果米工作室</div>
        </div>
        <button className="iconbtn" style={{ width:28, height:28, fontSize:11, border:'1px solid oklch(0.83 0.08 288)', background:'oklch(0.94 0.04 288)', color:'oklch(0.45 0.12 288)' }} onClick={onOpenSettings} title="AI 設定">❆</button>
      </div>
    </div>
  );
}

function Modal({ open, onClose, children, width=560, title, sub }){
  if(!open) return null;
  return (
    <div className="overlay" onMouseDown={onClose}>
      <div className="modal" style={{ width }} onMouseDown={e=>e.stopPropagation()}>
        {title && (
          <div className="modalhead">
            <div>
              <div className="serif" style={{ fontSize:17, fontWeight:700 }}>{title}</div>
              {sub && <div className="faint" style={{ fontSize:11.5, marginTop:2 }}>{sub}</div>}
            </div>
            <button className="iconbtn" onClick={onClose}>✕</button>
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

function Toast({ msg }){
  if(!msg) return null;
  return <div className="toast">{msg}</div>;
}

Object.assign(window, { Pill, Av, Tag, Sidebar, Modal, Toast });