// テーマ⑥ 図面数量照査 — アップロード → 照合実行 → 結果一覧 + 図面ハイライト
const ThemeDrawing = ({ onBack }) => {
  const d = CXDATA;
  const [phase, setPhase] = useState('done');   // upload | running | done
  const [active, setActive] = useState(d.drawingResults[1]);

  const STATE = {
    ok:       { tone:'ok',     label:'一致' },
    mismatch: { tone:'danger', label:'不一致' },
    missing:  { tone:'warn',   label:'欠落' },
    surplus:  { tone:'primary',label:'余剰' },
  };
  const counts = {
    mismatch: d.drawingResults.filter(r=>r.state==='mismatch').length,
    missing:  d.drawingResults.filter(r=>r.state==='missing').length,
    surplus:  d.drawingResults.filter(r=>r.state==='surplus').length,
    ok:       d.drawingResults.filter(r=>r.state==='ok').length,
  };

  if (phase!=='done') {
    return (
      <div className="cx-main">
        <PageHeader crumb="ポータル / 図面数量照査" title="杭図面の数量照査" onBack={onBack}/>
        <div style={{maxWidth:620,margin:'10px auto'}}>
          <div className="cx-drop">
            <div className="ic"><CXIcon name="upload" size={26}/></div>
            <div style={{fontSize:15,fontWeight:700,marginBottom:6}}>杭図面(DWG)と数量表をアップロード</div>
            <div style={{fontSize:13,color:'var(--c-text-2)',marginBottom:18,lineHeight:1.7}}>
              平面図・断面図から杭情報を自動抽出し、数量表と照合します。<br/>複数葉の図面をまとめて処理できます。
            </div>
            <Btn icon="upload" onClick={()=>{setPhase('running'); setTimeout(()=>setPhase('done'),1400);}}>ファイルを選択</Btn>
          </div>
          {phase==='running' && (
            <div className="cx-card pad" style={{marginTop:18,display:'flex',alignItems:'center',gap:14}}>
              <CXIcon name="refresh" size={20} color="#0b57c4"/>
              <div style={{flex:1}}>
                <div style={{fontSize:13.5,fontWeight:700,marginBottom:6}}>照合を実行中…（非同期処理）</div>
                <div className="cx-bar"><i style={{width:'66%'}}/></div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="cx-main">
      <PageHeader crumb="ポータル / 図面数量照査" title="照合結果" onBack={onBack}
        actions={<><Chip tone="warn">PoC</Chip><Btn kind="out" icon="upload" size="sm" onClick={()=>setPhase('upload')}>別の図面</Btn><Btn icon="download">CSV出力</Btn></>}/>

      <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16,fontSize:13}}>
        <CXIcon name="file" size={16} color="#656c87"/><b>{d.drawingFile}</b>
        <span className="mut" style={{color:'var(--c-text-3)'}}>＋ 数量表.pdf</span>
        <Chip tone="ok" dot style={{marginLeft:8}}>抽出完了</Chip>
      </div>

      {/* 不整合サマリ */}
      <div className="cx-stats" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
        <Stat lab="不一致" icon="alert" val={counts.mismatch} unit="件"/>
        <Stat lab="欠落" icon="x" val={counts.missing} unit="件"/>
        <Stat lab="余剰" icon="plus" val={counts.surplus} unit="件"/>
        <Stat lab="一致" icon="check" val={counts.ok} unit="件"/>
      </div>

      <div className="cx-grid2" style={{gridTemplateColumns:'1fr 1fr',alignItems:'start'}}>
        {/* 結果一覧 */}
        <div className="cx-card" style={{overflow:'hidden'}}>
          <div className="cx-card-h"><h3>照合一覧</h3><span className="hint">行をクリックで図面上の該当箇所を表示</span></div>
          <table className="cx-tbl">
            <thead><tr><th>杭番号</th><th>項目</th><th>図面</th><th>数量表</th><th>判定</th></tr></thead>
            <tbody>
              {d.drawingResults.map(r=>(
                <tr key={r.id} onClick={()=>setActive(r)} style={active.id===r.id?{background:'var(--c-primary-bg)'}:undefined}>
                  <td className="strong">{r.pile}</td><td className="mut">{r.item}</td>
                  <td>{r.dwg}</td><td>{r.tbl}</td>
                  <td><Chip tone={STATE[r.state].tone} dot>{STATE[r.state].label}</Chip></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* 図面ビュー（ハイライト） */}
        <div className="cx-card" style={{overflow:'hidden'}}>
          <div className="cx-card-h"><h3>図面プレビュー</h3><span className="hint">{active.pile}・{active.item}</span></div>
          <div style={{background:'#eef1f5',padding:24,display:'flex',justifyContent:'center'}}>
            <div style={{transform:'scale(.78)',transformOrigin:'top center'}}>
              <BlueprintPage>
                {/* highlight on the mismatched pile */}
                <div className={`cx-hl${active.state==='ok'?' ok':''}`}
                     style={{left:active.state==='ok'?'40%':'66%',top:'30%',width:'56px',height:'56px'}}>
                  <span className="tag">{active.pile} {STATE[active.state].label}</span>
                </div>
              </BlueprintPage>
            </div>
          </div>
          <div style={{padding:'12px 16px',borderTop:'1px solid var(--c-border)',fontSize:12.5,color:'var(--c-text-2)',lineHeight:1.7}}>
            断面図の寸法線・引出線を解析し、杭径・杭長・天端標高・根入れ深度を該当杭へ自動で紐付けています。
          </div>
        </div>
      </div>
    </div>
  );
};
window.ThemeDrawing = ThemeDrawing;