// board.jsx — 看板首頁（Kanban）

function BoardCard({ c, onOpen, onNavPay, onMarkDeal }){
  const { Pill, Av } = window;
  const handleClick = c.stage==='finance' ? onNavPay : ()=>onOpen(c.id);
  return (
    <div className="kcard" onClick={handleClick}>
      <div style={{ display:'flex', gap:9, alignItems:'flex-start' }}>
        <Av bg={c.avatarBg} size={30}>{c.vendor.slice(0,1)}</Av>
        <div style={{ minWidth:0, flex:1 }}>
          <div className="ell" style={{ fontSize:12.5, fontWeight:600 }}>{c.vendor}</div>
          <div className="ell faint" style={{ fontSize:10.5 }}>{c.product}</div>
        </div>
        {c.pinned && <span style={{ fontSize:11 }}>📌</span>}
      </div>
      {c.risk==='high' && c.riskStatus!=='done' && (c.stage==='inquiry'||c.stage==='intent'||c.stage==='quote') && (
        <div className="riskbar">
          <Pill tone="risk-high" style={{ height:18, fontSize:10 }}>風控需注意</Pill>
          <span className="ell" style={{ fontSize:10, color:'var(--rose-ink)', marginTop:4 }}>進入案件執行風控審查</span>
        </div>
      )}
      <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:10 }}>
        <div style={{ display:'flex', gap:5 }}>
          <Pill tone={window.riskTone(c.risk)} style={{ height:19, fontSize:10.5 }}>{c.riskLabel}</Pill>
          {c.source==='開發信' && <span className="sourcebadge dev">↗開發</span>}
        </div>
        {c.stage==='quote' && (
          <button className="btn primary" style={{ height:24, fontSize:10.5, marginLeft:'auto', padding:'0 9px' }}
            onClick={(e)=>{ e.stopPropagation(); onMarkDeal(c.id); }}>✓ 成交</button>
        )}
      </div>
      {c.quoteSentDate && (()=>{
        const contractStages = ['contract','schedule','produce','finance'];
        const sentParts = c.quoteSentDate.split('/');
        const sentDate = new Date(+sentParts[0], +sentParts[1]-1, +sentParts[2]);
        const daysSince = Math.floor((Date.now() - sentDate) / 86400000);
        const needsFollowUp = daysSince >= 14 && !contractStages.includes(c.stage);
        return (
          <div style={{ marginTop:8, display:'flex', flexDirection:'column', gap:5 }}>
            <div style={{ display:'flex', alignItems:'center', gap:5, fontSize:10.5, color:'var(--ink-3)' }}>
              <span>寄發日：</span>
              <span className="mono">{c.quoteSentDate.slice(5)}</span>
              <span style={{ marginLeft:2, opacity:.6 }}>（{daysSince} 天前）</span>
            </div>
            {needsFollowUp && (
              <div style={{ padding:'5px 8px', background:'var(--gold-soft)', border:'1px solid oklch(0.85 0.06 80)', borderRadius:6, fontSize:10.5, color:'oklch(0.45 0.09 70)', lineHeight:1.4 }}>
                ⚠ 已逾兩週未簽約，建議再次寄信詢問
              </div>
            )}
          </div>
        );
      })()}
    </div>
  );
}

function Column({ stage, cases, onOpen, onNavPay, onMarkDeal }){
  const accent = stage.id==='risk'?'var(--clay)':'var(--line-2)';
  return (
    <div className="kcol">
      <div className="kcolhead">
        <span style={{ width:7, height:7, borderRadius:9, background:accent }}></span>
        <span style={{ fontSize:12.5, fontWeight:600 }}>{stage.name}</span>
        <span className="faint mono" style={{ fontSize:10.5 }}>{cases.length}</span>
        <span className="faint" style={{ fontSize:10, marginLeft:'auto' }}>{stage.hint}</span>
      </div>
      <div className="kcolbody">
        {cases.map(c=><BoardCard key={c.id} c={c} onOpen={onOpen} onNavPay={onNavPay} onMarkDeal={onMarkDeal} />)}
        {cases.length===0 && <div className="ph" style={{ height:46, fontSize:10 }}>—</div>}
      </div>
    </div>
  );
}

function Board({ cases: allCases, onOpen, onNavPay, onNew, onSyncSheet, syncing, sheetConnected, onMarkDeal }){
  const cases = allCases.filter(c=> c.progress!=='婉拒' && c.progress!=='未成交' && c.willing!=='婉拒');
  const need = cases.filter(c=>c.risk==='high'&&c.riskStatus!=='done'&&(c.stage==='inquiry'||c.stage==='intent'||c.stage==='quote')).length;
  return (
    <div className="viewcol">
      <div className="topbar">
        <div>
          <div className="serif" style={{ fontSize:17, fontWeight:700 }}>洽談看板</div>
          <div className="faint" style={{ fontSize:11 }}>{cases.filter(c=>c.stage!=='finance').length} 件進行中{need?` · ${need} 件需注意`:''}</div>
        </div>
        <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:9 }}>
          <div className="searchbox"><span>⌕</span><span>搜尋廠商／案件…</span></div>
          {window.getSheetId?.() && (
            <button className="btn" onClick={onSyncSheet} disabled={syncing} title="從共用 Google 試算表重新載入案件">
              {syncing ? '☁ 同步中…' : sheetConnected ? '☁ 重新整理' : '☁ 連結試算表'}
            </button>
          )}
          <button className="btn primary" onClick={onNew}>＋ 貼上廠商來信</button>
        </div>
      </div>
      <div className="board">
        {window.STAGES.map(s=>(
          <Column key={s.id} stage={s} cases={cases.filter(c=>c.stage===s.id)} onOpen={onOpen} onNavPay={onNavPay} onMarkDeal={onMarkDeal} />
        ))}
      </div>
    </div>
  );
}

window.Board = Board;