// テーマ③ 見積業務効率化 — 部署横断ステータスフロー（カンバン）+ 一覧 + 詳細
const ThemeEstimate = ({ onBack }) => {
  const d = CXDATA;
  const [view, setView] = useState('flow');   // flow | list
  const [detail, setDetail] = useState(null); // 見積詳細

  if (detail) return <EstimateDetail est={detail} onBack={()=>setDetail(null)}/>;

  return (
    <div className="cx-main">
      <PageHeader crumb="ポータル / 見積業務効率化" title="見積ステータス管理" onBack={onBack}
        actions={<>
          <Chip tone="warn">β版</Chip>
          <div style={{display:'flex',border:'1px solid var(--c-border)',borderRadius:8,overflow:'hidden'}}>
            <button className={`cx-btn ${view==='flow'?'pri':'ghost'} sm`} style={{borderRadius:0}} onClick={()=>setView('flow')}>フロー</button>
            <button className={`cx-btn ${view==='list'?'pri':'ghost'} sm`} style={{borderRadius:0}} onClick={()=>setView('list')}>一覧</button>
          </div>
          <Btn icon="plus">新規見積</Btn>
        </>}/>

      <div className="cx-stats" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>
        <Stat lab="今月の見積件数" icon="fileText" val="24" unit="件" delta="+6" up/>
        <Stat lab="技術部 査定待ち" icon="beaker" val="2" unit="件"/>
        <Stat lab="承認待ち" icon="shield" val="1" unit="件"/>
        <Stat lab="今月の提出額" icon="chart" val="¥1.8" unit="億" delta="+12%" up/>
      </div>

      {view==='flow' ? (
        <>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12,fontSize:12.5,color:'var(--c-text-2)'}}>
            <CXIcon name="link" size={15} color="#2f8f5b"/>「今どの部署にボールがあるか」を可視化。承認後は社内申請システムへ自動連携し、重複入力を排除します。
          </div>
          <div className="cx-kanban">
            {d.estimateCols.map(col=>{
              const items = d.estimates.filter(e=>e.col===col.id);
              return (
                <div className="cx-col" key={col.id}>
                  <div className="ch"><CXIcon name={col.icon} size={15} color="#656c87"/>{col.label}<span className="cnt">{items.length}</span></div>
                  {items.map(e=>(
                    <div className="cx-kcard" key={e.id} onClick={()=>setDetail(e)} style={{cursor:'pointer'}}>
                      <div className="t">{e.name}</div>
                      <div style={{fontSize:15,fontWeight:700,marginBottom:8}}>{e.amount}</div>
                      <div className="m"><span style={{fontFamily:'ui-monospace,Menlo,monospace'}}>#{e.id}</span><span>{e.who} ・ {e.age}</span></div>
                    </div>
                  ))}
                  {items.length===0 && <div style={{fontSize:12,color:'var(--c-text-3)',textAlign:'center',padding:'16px 0'}}>なし</div>}
                </div>
              );
            })}
          </div>
        </>
      ) : (
        <div className="cx-card" style={{overflow:'hidden'}}>
          <table className="cx-tbl">
            <thead><tr><th>見積番号</th><th>件名</th><th className="right">金額</th><th>ステータス</th><th>保有部署</th><th>経過</th></tr></thead>
            <tbody>
              {d.estimates.map(e=>{
                const col = d.estimateCols.find(c=>c.id===e.col);
                const tone = e.col==='sent'?'ok':e.col==='mgr'?'warn':e.col==='tech'?'primary':'muted';
                return (
                  <tr key={e.id} onClick={()=>setDetail(e)}>
                    <td className="mut" style={{fontFamily:'ui-monospace,Menlo,monospace',fontSize:12}}>#{e.id}</td>
                    <td className="strong">{e.name}</td>
                    <td className="right strong">{e.amount}</td>
                    <td><Chip tone={tone} dot>{col.label}</Chip></td>
                    <td className="mut">{e.who}</td>
                    <td className="mut">{e.age}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};
window.ThemeEstimate = ThemeEstimate;

// 見積詳細 — 明細フォーム + 部署横断ステータス + 他システム連携
const EstimateDetail = ({ est, onBack }) => {
  const x = CXDATA.estimateDetail;
  return (
    <div className="cx-main">
      <PageHeader crumb="見積業務効率化 / 見積詳細" title={est.name} onBack={onBack}
        actions={<><Btn kind="out" icon="download" size="sm">PDF出力</Btn><Btn kind="out" size="sm">差し戻し</Btn><Btn icon="check">技術部へ回付</Btn></>}/>

      {/* ステータスフロー（横） */}
      <div className="cx-card pad" style={{marginBottom:18}}>
        <div className="cx-wiz" style={{margin:0}}>
          {[['作成',true],['技術部 査定',true,'active'],['部長 承認',false],['提出',false]].map((s,i)=>(
            <React.Fragment key={i}>
              <div className={`step ${s[2]==='active'?'active':s[1]?'done':''}`}><span className="n">{s[1]&&s[2]!=='active'?'✓':i+1}</span>{s[0]}</div>
              {i<3 && <div className="conn"/>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="cx-grid2" style={{gridTemplateColumns:'1.6fr 1fr',alignItems:'start'}}>
        {/* 明細 */}
        <div className="cx-card" style={{overflow:'hidden'}}>
          <div className="cx-card-h"><h3>見積明細</h3><span className="hint">#{x.id}</span></div>
          <table className="cx-tbl">
            <thead><tr><th>区分</th><th>項目</th><th className="right">数量</th><th>単位</th><th className="right">単価</th><th className="right">金額</th></tr></thead>
            <tbody>
              {x.lines.map((l,i)=>(
                <tr key={i}>
                  <td><Chip tone={l.cat==='直接工事費'?'primary':l.cat==='仮設費'?'accent':'muted'}>{l.cat}</Chip></td>
                  <td className="strong">{l.item}</td>
                  <td className="right">{l.qty}</td><td className="mut">{l.unit}</td>
                  <td className="right mut">{l.price}</td><td className="right strong">{l.amount}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{borderTop:'1px solid var(--c-border)',padding:'14px 18px'}}>
            <dl className="cx-kv" style={{gridTemplateColumns:'1fr auto',rowGap:8,fontSize:13.5,marginLeft:'auto',maxWidth:320}}>
              <dt>小計</dt><dd className="strong">{x.subtotal}</dd>
              <dt>諸経費</dt><dd className="strong">{x.overhead}</dd>
              <dt style={{fontSize:15,fontWeight:700,color:'var(--c-text)'}}>見積金額（税抜）</dt>
              <dd style={{fontSize:20,fontWeight:700,color:'var(--c-primary)'}}>{x.total}</dd>
            </dl>
          </div>
        </div>

        {/* 右：概要 / 連携 / 履歴 */}
        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <div className="cx-card pad">
            <h3 style={{fontSize:15,fontWeight:700,marginBottom:14}}>案件情報</h3>
            <dl className="cx-kv" style={{rowGap:12,fontSize:13.5}}>
              <dt>発注者</dt><dd className="strong">{x.client}</dd>
              <dt>工法</dt><dd><Chip tone="accent">{x.method}</Chip></dd>
              <dt>工事場所</dt><dd>{x.loc}</dd>
              <dt>希望納期</dt><dd>{x.due}</dd>
              <dt>作成者</dt><dd>{x.owner}</dd>
            </dl>
          </div>

          <div className="cx-card pad">
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
              <CXIcon name="link" size={16} color="#2f8f5b"/><h3 style={{fontSize:15,fontWeight:700}}>他システム連携</h3>
            </div>
            <p style={{fontSize:12,color:'var(--c-text-3)',lineHeight:1.7,marginBottom:12}}>承認後、入力済みの情報を自動連携し重複入力を排除します。</p>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {x.linked.map((l,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'10px 12px',background:'var(--c-surface)',borderRadius:10}}>
                  <CXIcon name="db" size={15} color="#656c87"/>
                  <span style={{fontSize:13,fontWeight:600,flex:1}}>{l.sys}</span>
                  <Chip tone="muted">{l.state}</Chip>
                </div>
              ))}
            </div>
          </div>

          <div className="cx-card pad">
            <h3 style={{fontSize:15,fontWeight:700,marginBottom:14}}>進捗履歴</h3>
            <div className="cx-timeline">
              {x.history.map((h,i)=>(
                <div className="ti" key={i}>
                  <span className={`d ${h.tone}`}/>
                  <div><div style={{fontSize:13}}><b>{h.who}</b> {h.act}</div><div style={{fontSize:11.5,color:'var(--c-text-3)',marginTop:2}}>{h.time}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
window.EstimateDetail = EstimateDetail;