// CombinedDetail — Mode C: drawing + quote combined audit
const CombinedDetail = ({ turn, onBack, onExport }) => {
  const [tab, setTab] = React.useState('overview');
  const [filterRisk, setFilterRisk] = React.useState('all');
  const [openClause, setOpenClause] = React.useState(null);
  const [zoomDrawing, setZoomDrawing] = React.useState(null);
  const isReal = turn && turn.source === 'real';
  const vm = isReal ? turn.viewModel : null;
  const hasRealResult = isReal && turn.status === 'done' && vm && !vm.reportMissing && !vm.baselineLowConfidence;
  const isError = isReal && turn.status === 'error';

  if (isReal && !hasRealResult) {
    const title = vm ? vm.projectName : '图纸+报价联审';
    const isBaselineLow = vm && vm.baselineLowConfidence;
    const isReportMissing = vm && vm.reportMissing;
    const message = isError
      ? (turn.error || '联审失败，请返回对话重新联审。')
      : isBaselineLow
        ? ((vm.reviewItems && vm.reviewItems[0]) || '图纸置信度过低，建议补图后重试。')
        : isReportMissing
          ? '报告模型缺失，请重新联审或下载旧报告。'
          : '后端 /api/review/combined 请求还在运行，完成后这里会展示真实联审报告。';
    return (
      <>
        <DetailHead skill="combined" title={`${title} · 联审状态`} onBack={onBack} />
        <div className="content">
          <div className="detail-wrap">
            <div className="detail-panel">
              <div className="detail-panel-head">
                <div>
                  <div className="detail-panel-title">{isError ? '联审失败' : isBaselineLow ? '图纸置信度过低' : isReportMissing ? '报告模型缺失' : '正在联审中'}</div>
                  <div className="detail-panel-sub">真实联审详情不回退 mock 数据</div>
                </div>
                <span className={`risk-pill risk-pill-${isError || isReportMissing ? 'high' : 'mid'}`}>{isError ? 'ERROR' : isBaselineLow ? 'LOW CONFIDENCE' : isReportMissing ? 'NO REPORT' : 'RUNNING'}</span>
              </div>
              <div className="review-list">
                <div className="review-item">
                  <Icon name={isError || isBaselineLow || isReportMissing ? 'circle-alert' : 'loader-2'} size={14} className={isError || isBaselineLow || isReportMissing ? '' : 'icon spinning'} style={{ marginTop: 1, color: isError || isReportMissing ? 'var(--risk-high)' : 'var(--combined)' }} />
                  <span>{message}</span>
                </div>
              </div>
              <DetailActions>
                <button className="btn btn-primary" disabled><Icon name="file-spreadsheet" size={14} /> 下载 Excel</button>
                <button className="btn btn-ghost" disabled><Icon name="file-text" size={14} /> 下载 PDF</button>
              </DetailActions>
            </div>
          </div>
        </div>
      </>
    );
  }

  const d = hasRealResult ? vm.detailData : window.BB_DATA.MOCK_REVIEW_C;
  const fileSources = hasRealResult ? (vm.files || []) : window.BB_DATA.FILE_SOURCES.combined;
  const handleExport = (format) => {
    if (hasRealResult && onExport && turn.jobId) onExport(turn.jobId, format);
  };

  const TABS = [
    { id: 'overview',  label: '概览',          icon: 'layout-dashboard' },
    { id: 'qty_check', label: '工程量比对',     icon: 'git-compare-arrows', badge: d.quantity_check.filter(q => Math.abs(q.diff_rate) > 0.1).length },
    { id: 'items',     label: '明细审核',      icon: 'list-checks' },
    { id: 'negotiate', label: '谈判 & 漏项',    icon: 'message-square-dot' },
    { id: 'clauses',   label: '合同条款',      icon: 'file-text' },
    { id: 'sources',   label: '文件来源',      icon: 'paperclip', badge: fileSources.length },
  ];

  const totalImpact = d.quantity_check.reduce((sum, q) => sum + (q.money_impact > 0 ? q.money_impact : 0), 0);
  const totalUnder  = d.quantity_check.reduce((sum, q) => sum + (q.money_impact < 0 ? q.money_impact : 0), 0);

  return (
    <>
      <DetailHead skill="combined" title={`${d.meta.company} · 图纸+报价联审`} onBack={onBack} />
      <div className="content">
        <div className="detail-wrap">
          <DetailSummary
            skill="combined"
            title={`${d.meta.company} · 图纸+报价联审`}
            metaItems={[
              { icon: 'folder', text: d.meta.project },
              { icon: 'map-pin', text: d.meta.city_tier },
              { icon: 'calendar', text: d.meta.review_date },
              { icon: 'user', text: d.meta.reviewer },
              { icon: 'file-image', text: `${d.meta.drawings_count} 张图纸` },
              { icon: 'shield-check', text: `≥${d.contract_clauses.filter(c => c.cFlag).length} 条 C 专项` },
            ]}
            metrics={[
              {
                label: '总分',
                node: <ScoreGauge value={d.total_score} max={100} color="var(--combined)" size={84} label="/100" />,
              },
              { label: '报价金额', value: fmtMoney(d.meta.quote_amount), style: { fontSize: 22 } },
              {
                label: '虚报合计',
                node: <span style={{ color: 'var(--risk-high)', fontSize: 22, fontWeight: 650 }}>+{fmtMoney(d.quantity_kpi.overstate_total)}</span>,
                sub: `${d.quantity_kpi.over_10pct_count} 项偏差 > 10%`,
              },
              {
                label: '漏项合计',
                node: <span style={{ color: 'var(--risk-mid)', fontSize: 22, fontWeight: 650 }}>{fmtMoney(d.quantity_kpi.understate_total)}</span>,
                sub: '需补列',
              },
              {
                label: '风险数',
                node: <RiskCountChips counts={d.risk_counts} layout="col" />,
              },
            ]}
          />

          <TabBar tabs={TABS} value={tab} onChange={setTab} />

          {tab === 'overview' && (
            <>
              <div className="detail-panel" style={{ marginBottom: 16 }}>
                <div className="detail-panel-head">
                  <div className="detail-panel-title">评分细则</div>
                  <div className="detail-panel-sub">总分 {d.total_score} / 100</div>
                </div>
                <div style={{ padding: '20px 24px' }}>
                  <ScoreBars scores={d.score_breakdown} color="var(--combined)" />
                </div>
              </div>

              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div className="detail-panel-title">TOP {d.top_risks.length} 风险点</div>
                  <button className="btn btn-ghost btn-sm" onClick={() => setTab('qty_check')}>
                    查看工程量比对 <Icon name="arrow-right" size={12} />
                  </button>
                </div>
                <div className="risk-card-list">
                  {d.top_risks.map((r, i) => (
                    <RiskItemCard key={i} {...r} idx={i} />
                  ))}
                </div>
              </div>
            </>
          )}

          {tab === 'qty_check' && (
            <div className="detail-panel">
              <div className="detail-panel-head" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div className="detail-panel-title">工程量比对（算量 vs 报价）</div>
                    <div className="detail-panel-sub">联审模式核心：基于图纸的真实工程量与报价的逐项核对</div>
                  </div>
                </div>
                {/* KPI bar */}
                <div className="qty-kpi-bar">
                  <div className="qty-kpi qty-kpi-over">
                    <div className="qty-kpi-label"><Icon name="trending-up" size={12} /> 虚报合计</div>
                    <div className="qty-kpi-value">+{fmtMoney(d.quantity_kpi.overstate_total)}</div>
                  </div>
                  <div className="qty-kpi qty-kpi-under">
                    <div className="qty-kpi-label"><Icon name="trending-down" size={12} /> 漏项合计</div>
                    <div className="qty-kpi-value">{fmtMoney(d.quantity_kpi.understate_total)}</div>
                  </div>
                  <div className="qty-kpi">
                    <div className="qty-kpi-label"><Icon name="alert-triangle" size={12} /> 偏差 &gt; 10%</div>
                    <div className="qty-kpi-value">{d.quantity_kpi.over_10pct_count} <small>项</small></div>
                  </div>
                  <div className="qty-kpi">
                    <div className="qty-kpi-label"><Icon name="circle-dot" size={12} /> 平均偏差</div>
                    <div className="qty-kpi-value">
                      ±{((d.quantity_check.reduce((s,q)=>s+Math.abs(q.diff_rate),0)/d.quantity_check.length)*100).toFixed(1)}%
                    </div>
                  </div>
                </div>
              </div>

              <table className="data-table qty-check-table">
                <thead>
                  <tr>
                    <th>项目</th>
                    <th>单位</th>
                    <th style={{ textAlign: 'right' }}>算量值</th>
                    <th style={{ textAlign: 'right' }}>报价值</th>
                    <th style={{ width: 220 }}>偏差率</th>
                    <th style={{ textAlign: 'right' }}>金额影响</th>
                    <th>风险</th>
                    <th>整改建议</th>
                  </tr>
                </thead>
                <tbody>
                  {d.quantity_check.map((q, i) => (
                    <tr key={i} className={riskRowClass(q.risk)}>
                      <td style={{ fontWeight: 500 }}>{q.name}</td>
                      <td style={{ color: 'var(--text-secondary)' }}>{q.unit}</td>
                      <td style={{ textAlign: 'right' }}>
                        <span className="qty-calc">{q.calc_qty}</span>
                      </td>
                      <td style={{ textAlign: 'right' }}>
                        <span className="qty-quote">{q.quote_qty}</span>
                      </td>
                      <td><DiffBar value={q.diff_rate} /></td>
                      <td style={{ textAlign: 'right', fontWeight: 600,
                        color: q.money_impact > 0 ? 'var(--risk-high)' : q.money_impact < 0 ? 'var(--risk-mid)' : 'var(--text-secondary)' }}>
                        {q.money_impact === 0 ? '—' : fmtMoneySigned(q.money_impact)}
                      </td>
                      <td><span className={`risk-pill risk-pill-${q.risk}`}>{q.risk === 'high' ? '高' : q.risk === 'mid' ? '中' : '低'}</span></td>
                      <td style={{ color: 'var(--text-secondary)', fontSize: 12 }}>{q.advice}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === 'items' && (
            <div className="detail-panel">
              <div className="detail-panel-head">
                <div className="detail-panel-title">明细审核 · {d.items.length} 项</div>
              </div>
              <div style={{ padding: '12px 16px 0' }}>
                <ItemsTable items={d.items} filterRisk={filterRisk} onSetFilter={setFilterRisk} />
              </div>
            </div>
          )}

          {tab === 'negotiate' && (
            <>
              <div className="detail-panel" style={{ marginBottom: 16 }}>
                <div className="detail-panel-head">
                  <div className="detail-panel-title">谈判清单</div>
                </div>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>项目</th>
                      <th style={{ textAlign: 'right' }}>当前</th>
                      <th style={{ textAlign: 'right' }}>目标</th>
                      <th style={{ textAlign: 'right' }}>降幅</th>
                      <th>理由</th>
                    </tr>
                  </thead>
                  <tbody>
                    {d.negotiation.map((n, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 500 }}>{n.item || n.name}</td>
                        <td style={{ textAlign: 'right' }}>{typeof n.current === 'number' ? '¥' + n.current.toLocaleString() : n.current}</td>
                        <td style={{ textAlign: 'right', color: 'var(--risk-low)', fontWeight: 600 }}>
                          {typeof n.target === 'number' ? '¥' + n.target.toLocaleString() : n.target}
                        </td>
                        <td style={{ textAlign: 'right' }}><span className="discount-pill">{n.discount}</span></td>
                        <td style={{ color: 'var(--text-secondary)', fontSize: 12 }}>{n.reason}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div className="detail-panel-title">疑似漏项 · {d.missing_items.length} 项</div>
                </div>
                <div className="missing-list">
                  {d.missing_items.map((m, i) => (
                    <div className="missing-item" key={i}>
                      <Icon name="plus-circle" size={16} style={{ color: 'var(--risk-mid)', flexShrink: 0 }} />
                      <div style={{ flex: 1 }}>
                        <div className="missing-item-name">{m.name}</div>
                        <div className="missing-item-why">{m.why}</div>
                      </div>
                      <button className="btn btn-ghost btn-sm">
                        <Icon name="plus" size={12} /> 加入清单
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </>
          )}

          {tab === 'clauses' && (
            <div className="detail-panel">
              <div className="detail-panel-head">
                <div className="detail-panel-title">合同条款审核</div>
                <button className="btn btn-ghost"><Icon name="copy" size={13} /> 复制全部</button>
              </div>
              {d.contract_clauses.map((c, i) => (
                <div className={`clause-item ${c.type === 'risk' ? 'clause-risk' : 'clause-ok'}`} key={i}>
                  <div className="clause-head" onClick={() => setOpenClause(openClause === i ? null : i)}>
                    <span className={`clause-pill ${c.type === 'risk' ? 'risk-pill-mid' : 'risk-pill-low'}`}>
                      {c.type === 'risk' ? '风险' : '合理'}
                    </span>
                    <span className="clause-title">{c.title}</span>
                    {c.cFlag && <span className="clause-cflag">C 专项</span>}
                    <Icon name={openClause === i ? 'chevron-up' : 'chevron-down'} size={14} style={{ marginLeft: 'auto', color: 'var(--text-secondary)' }} />
                  </div>
                  {openClause === i && (
                    <div className="clause-body">
                      <div className="clause-quote">「{c.content}」</div>
                      <div className="clause-advice">
                        <Icon name="lightbulb" size={12} style={{ color: 'var(--combined)' }} />
                        <span>{c.advice}</span>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {tab === 'sources' && (
            <FileSourcesPanel
              skill="combined"
              files={fileSources}
              summary={`本次联审基于 ${fileSources.length} 份输入文件 · ${fileSources.filter(f => f.kind === 'drawing').length} 张图纸 + 报价单 + 合同 + 业主补充`}
              onPreview={(f) => setZoomDrawing(f)}
            />
          )}

          <DetailActions>
            <button className="btn btn-primary" disabled={hasRealResult && !turn.jobId} onClick={() => handleExport('excel')}><Icon name="file-spreadsheet" size={14} /> 下载 Excel</button>
            <button className="btn btn-ghost" disabled={hasRealResult && !turn.jobId} onClick={() => handleExport('pdf')}><Icon name="file-text" size={14} /> 下载 PDF</button>
            <button className="btn btn-ghost" style={{ marginLeft: 'auto' }}>
              <Icon name="scale" size={14} /> 再叫一家公司报价做对比
            </button>
          </DetailActions>

          {zoomDrawing && (
            <div className="modal-backdrop" onClick={() => setZoomDrawing(null)}>
              <div className="modal" style={{ maxWidth: 720 }} onClick={e => e.stopPropagation()}>
                <div className="modal-head">
                  <div className="modal-icon" style={{ background: '#EEDDF5', color: 'var(--combined)' }}>
                    <Icon name={zoomDrawing.icon || 'file'} size={20} />
                  </div>
                  <div className="modal-heading">
                    <div className="modal-title">{zoomDrawing.label}</div>
                    <div className="modal-subtitle">{zoomDrawing.pages} 页 · {zoomDrawing.size} · {zoomDrawing.usage}</div>
                  </div>
                  <button className="modal-close" onClick={() => setZoomDrawing(null)}><Icon name="x" size={16} /></button>
                </div>
                <div style={{ padding: 24 }}>
                  <div className="drawing-zoom-canvas">
                    <Icon name={zoomDrawing.icon || 'file'} size={48} style={{ color: 'var(--text-muted)' }} />
                    <div style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 12, fontFamily: 'ui-monospace, monospace' }}>
                      [{zoomDrawing.kind} preview placeholder]
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

window.CombinedDetail = CombinedDetail;