// QuantityDetail — drawing takeoff (existing, expanded with input_assessment + skirting/floor_loss + real MEP+water)
const QuantityDetail = ({ onBack, turn, onExport }) => {
  const [tab, setTab] = React.useState('overview');
  const { ROOMS, REVIEW_ITEMS, MEP, WATER, INPUT_ASSESSMENT, FILE_SOURCES } = window.BB_DATA;
  const [expanded, setExpanded] = React.useState({});
  const toggle = (k) => setExpanded(e => ({ ...e, [k]: !e[k] }));
  const isReal = turn && turn.source === 'real';
  const hasRealViewModel = isReal && turn.status === 'done' && turn.viewModel;
  const hasRealResult = hasRealViewModel && !turn.viewModel.reportMissing;
  const vm = hasRealViewModel ? turn.viewModel : null;
  const rooms = hasRealResult ? vm.rooms : ROOMS;
  const reviewItems = hasRealResult ? vm.reviewItems : REVIEW_ITEMS;
  const mep = hasRealResult ? vm.mep : MEP;
  const water = hasRealResult ? vm.water : WATER;
  const inputAssessment = hasRealResult ? vm.inputAssessment : INPUT_ASSESSMENT;
  const fileSources = hasRealResult ? vm.files : FILE_SOURCES.quantity;
  const summary = hasRealResult ? vm.summary : { totalArea: 75, roomCount: ROOMS.length, wetRoomCount: ROOMS.filter(r => r.type !== 'dry').length };
  const drawingCoverage = hasRealResult ? vm.drawingCoverageCheck : null;
  const title = hasRealResult ? `${vm.projectName} · 算量结果详情` : '张先生别墅 · 算量结果详情';
  const fmt1 = (value) => (value === undefined || value === null || value === '') ? '—' : (Number.isFinite(Number(value)) ? Number(value).toFixed(1) : '—');
  const roomTypeLabel = (type) => type === 'dry' ? '干区' : type === 'balcony' ? '阳台' : '湿区';
  const coverageStatusLabel = (status) => ({ complete: '完整', partial: '部分', unclear: '不明确' }[status] || status || '不明确');
  const coverageSummary = (coverage) => {
    if (!coverage) return '未返回图纸覆盖检查';
    return `图纸覆盖：${coverageStatusLabel(coverage.coverageStatus)} · 已分析 ${coverage.analyzedPageCount || 0}/${coverage.inputPageCount || 0} 页`;
  };
  const handleExport = (format) => {
    if (isReal && turn.jobId && onExport) onExport(turn.jobId, format);
  };
  const calcSections = hasRealResult ? [
    { k: 'assumptions', label: '模型假设', body: vm.assumptions && vm.assumptions.length ? <ul style={{ margin: 0, paddingLeft: 18 }}>{vm.assumptions.map((item, i) => <li key={i}>{item}</li>)}</ul> : '后端未返回额外假设。' },
    { k: 'warnings', label: '注意事项', body: vm.warnings && vm.warnings.length ? <ul style={{ margin: 0, paddingLeft: 18 }}>{vm.warnings.map((item, i) => <li key={i}>{item}</li>)}</ul> : '暂无警告。' },
    { k: 'job', label: '任务信息', body: <>job_id：<code>{turn.jobId}</code>；API：<code>/api/takeoff</code></> },
  ] : [
    { k: 'paint', label: '乳胶漆参数', body: <>刷涂层数：<code>底漆 1 层 + 面漆 2 层</code>；理论覆盖率：<code>10 ㎡/L</code>；损耗：<code>5%</code>；扣除门窗：<code>是</code></> },
    { k: 'mortar', label: '砂浆参数', body: <>贴砖砂浆厚度：<code>20 mm</code>；找平砂浆厚度：<code>30 mm</code>；配比：<code>1:3 水泥砂浆</code></> },
    { k: 'mep', label: '水电参数', body: <>水管：每户基础 <code>30 m</code> + 每房间 <code>8 m</code>；电线：按房间面积 <code>0.5 m/㎡</code>；线管同量</> },
  ];

  if (isReal && hasRealViewModel && vm.reportMissing) {
    return (
      <>
        <DetailHead skill="quantity" 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">报告模型缺失</div>
                  <div className="detail-panel-sub">真实详情页只展示后端统一 report_model，不再回退前端自行计算</div>
                </div>
                <span className="risk-pill risk-pill-mid">NO REPORT</span>
              </div>
              <div className="review-list">
                <div className="review-item">
                  <Icon name="file-warning" size={14} style={{ marginTop: 1, color: 'var(--risk-mid)' }} />
                  <span>{vm.reviewItems && vm.reviewItems[0] ? vm.reviewItems[0] : '当前结果缺少 report_model，请重新算量或下载旧报告。'}</span>
                </div>
              </div>
              <DetailActions>
                <button className="btn btn-primary" disabled={!turn.jobId} onClick={() => handleExport('excel')}><Icon name="file-spreadsheet" size={14} /> 下载 Excel</button>
                <button className="btn btn-ghost" disabled={!turn.jobId} onClick={() => handleExport('pdf')}><Icon name="file-text" size={14} /> 下载 PDF</button>
              </DetailActions>
            </div>
          </div>
        </div>
      </>
    );
  }

  if (isReal && !hasRealViewModel) {
    const isError = turn.status === 'error';
    return (
      <>
        <DetailHead skill="quantity" 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 ? '算量失败' : '算量处理中'}</div>
                  <div className="detail-panel-sub">真实任务不会回退展示示例数据</div>
                </div>
                <span className={`risk-pill risk-pill-${isError ? 'high' : 'mid'}`}>{isError ? 'ERROR' : 'RUNNING'}</span>
              </div>
              <div className="review-list">
                <div className="review-item">
                  <Icon name={isError ? 'circle-alert' : 'loader-2'} size={14} className={isError ? '' : 'icon spinning'} style={{ marginTop: 1, color: isError ? 'var(--risk-high)' : 'var(--primary)' }} />
                  <span>{isError ? (turn.error || '算量失败，请返回对话重新算量。') : '后端 /api/takeoff 请求还在运行，完成后这里会展示真实房间、面积和水电数据。'}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }

  if (hasRealResult) {
    const summaryCard = vm.summaryCard || {};
    const pointRows = vm.mepPointStats || [];
    const activeTab = ['summary', 'rooms', 'mep', 'sources'].includes(tab) ? tab : 'summary';
    const summaryGroups = [
      { key: 'paint', title: '涂料采购', icon: 'paintbrush' },
      { key: 'mortar', title: '砂浆采购', icon: 'package-2' },
      { key: 'electrical', title: '强电材料', icon: 'plug' },
      { key: 'plumbing', title: '给排水材料', icon: 'droplets' },
      { key: 'paving', title: '铺装材料组', icon: 'ruler' },
    ];
    const realTabs = [
      { id: 'summary', label: '算量汇总卡' },
      { id: 'rooms', label: '房间概览' },
      { id: 'mep', label: '水电点位统计' },
      { id: 'sources', label: '文件来源', icon: 'paperclip', badge: fileSources.length },
    ];

    return (
      <>
        <DetailHead skill="quantity" title={title} onBack={onBack} />
        <div className="content">
          <div className="detail-wrap">
            <DetailSummary
              skill="quantity"
              title={`${vm.projectName} · 工程量算量`}
              metaItems={[
                { icon: 'folder', text: vm.projectName },
                { icon: 'git-branch', text: vm.resultVersion || 'takeoff_report_v1' },
                { icon: 'calendar', text: vm.date },
                { icon: 'file-image', text: `真实 API · ${vm.inputMode}` },
                ...(drawingCoverage ? [{ icon: 'scan-line', text: `${drawingCoverage.analyzedPageCount || 0}/${drawingCoverage.inputPageCount || 0} 页覆盖` }] : []),
              ]}
              metrics={[
                { label: '总地面', value: summary.totalArea, unit: '㎡' },
                { label: '总墙面', value: summary.totalWallArea, unit: '㎡' },
                { label: '房间', value: summary.roomCount, unit: '间' },
                { label: '水电点', value: summary.waterPointCount, unit: '个' },
                { label: '置信度', node: <span style={{ fontSize: 18, color: 'var(--quantity)', letterSpacing: 1 }}>{vm.confidenceStars}</span> },
              ]}
              actions={(
                <>
                  <button className="btn btn-ghost" onClick={() => handleExport('excel')}><Icon name="file-spreadsheet" size={14} /> Excel</button>
                  <button className="btn btn-ghost" onClick={() => handleExport('pdf')}><Icon name="file-text" size={14} /> PDF</button>
                </>
              )}
            >
              <div className="material-cards" style={{ marginTop: 14 }}>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="ruler" size={13} /> 面积口径</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>总地面</span><span className="mat-card-row-value">{summary.totalArea} ㎡</span></div>
                    <div className="mat-card-row"><span>总墙面</span><span className="mat-card-row-value">{summary.totalWallArea} ㎡</span></div>
                    <div className="mat-card-row"><span>湿区/阳台</span><span className="mat-card-row-value">{summary.wetRoomCount} 间</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="plug" size={13} /> 电气点位</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>插座</span><span className="mat-card-row-value">{summary.socketCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>开关</span><span className="mat-card-row-value">{summary.switchCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>灯位</span><span className="mat-card-row-value">{summary.lightCount || 0} 个</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="droplets" size={13} /> 给排水</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>给排水点</span><span className="mat-card-row-value">{summary.waterPointCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>地漏</span><span className="mat-card-row-value">{summary.floorDrainCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>口径</span><span className="mat-card-row-value">report</span></div>
                  </div>
                </div>
              </div>
              {drawingCoverage && (
                <div className="review-list" style={{ marginTop: 14 }}>
                  <div className="review-item">
                    <Icon name={drawingCoverage.coverageStatus === 'complete' ? 'check-circle-2' : 'triangle-alert'} size={14} style={{ marginTop: 1 }} />
                    <span>{coverageSummary(drawingCoverage)} · {drawingCoverage.coverageNote || '未提供覆盖说明'}</span>
                  </div>
                  {drawingCoverage.omittedPages && drawingCoverage.omittedPages.length > 0 && (
                    <div className="review-item">
                      <Icon name="file-warning" size={14} style={{ marginTop: 1 }} />
                      <span>遗漏页：{drawingCoverage.omittedPages.join('、')}</span>
                    </div>
                  )}
                </div>
              )}
            </DetailSummary>

            <TabBar tabs={realTabs} value={activeTab} onChange={setTab} />

            {activeTab === 'summary' && (
              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div>
                    <div className="detail-panel-title">算量汇总卡</div>
                    <div className="detail-panel-sub">与 Excel/PDF 共用后端 report_model</div>
                  </div>
                  <DataSourceChip source="drawing" />
                </div>
                <div className="material-cards">
                  {summaryGroups.map(group => (
                    <div className="mat-card" key={group.key}>
                      <div className="mat-card-head"><Icon name={group.icon} size={13} /> {group.title}</div>
                      <div className="mat-card-rows">
                        {(summaryCard[group.key] || []).map((item, i) => (
                          <div className="mat-card-row" key={i}>
                            <span>{item.label}</span>
                            <span className="mat-card-row-value">{item.value}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
                {(vm.reviewItems.length > 0 || vm.warnings.length > 0) && (
                  <div className="review-list" style={{ marginTop: 14 }}>
                    {[...vm.warnings, ...vm.reviewItems].map((item, i) => (
                      <div className="review-item" key={i}>
                        <Icon name="alert-circle" size={14} style={{ marginTop: 1 }} />
                        <span>{item}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {activeTab === 'rooms' && (
              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div>
                    <div className="detail-panel-title">房间概览</div>
                    <div className="detail-panel-sub">{summary.roomCount} 间空间 · 总地面 {summary.totalArea} ㎡ · 总墙面 {summary.totalWallArea} ㎡</div>
                  </div>
                  <DataSourceChip source="drawing" />
                </div>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>房间</th>
                      <th>类型</th>
                      <th style={{ textAlign: 'right' }}>地面 ㎡</th>
                      <th>地面材料</th>
                      <th>规格</th>
                      <th style={{ textAlign: 'right' }}>墙面 ㎡</th>
                      <th>墙面做法</th>
                      <th style={{ textAlign: 'right' }}>顶面 ㎡</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rooms.map((r, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 500 }}>{r.name}</td>
                        <td><span className={`room-type ${r.type}`}>{r.typeLabel || roomTypeLabel(r.type)}</span></td>
                        <td style={{ textAlign: 'right' }}>{fmt1(r.floorArea)}</td>
                        <td>{r.floorMaterial}</td>
                        <td style={{ color: 'var(--text-secondary)' }}>{r.floorSpec || '—'}</td>
                        <td style={{ textAlign: 'right' }}>{fmt1(r.wallArea)}</td>
                        <td>{r.wallFinish}</td>
                        <td style={{ textAlign: 'right' }}>{fmt1(r.ceilingArea)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {activeTab === 'mep' && (
              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div>
                    <div className="detail-panel-title">水电点位统计</div>
                    <div className="detail-panel-sub">包含排水点，合计口径与结果卡一致</div>
                  </div>
                  <DataSourceChip source="inferred" />
                </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 style={{ textAlign: 'right' }}>灯位</th>
                      <th style={{ textAlign: 'right' }}>网络</th>
                      <th style={{ textAlign: 'right' }}>冷水</th>
                      <th style={{ textAlign: 'right' }}>热水</th>
                      <th style={{ textAlign: 'right' }}>排水</th>
                      <th style={{ textAlign: 'right' }}>地漏</th>
                      <th>来源</th>
                    </tr>
                  </thead>
                  <tbody>
                    {pointRows.map((p, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 500 }}>{p.room}</td>
                        <td style={{ textAlign: 'right' }}>{p.socket || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.ac || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.switch || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.light || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.net || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.cold || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.hot || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.drain || 0}</td>
                        <td style={{ textAlign: 'right' }}>{p.floorDrain || 0}</td>
                        <td><DataSourceChip source={(p.source === '经验估算' || p.source === '推算') ? 'inferred' : 'drawing'} /></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {activeTab === 'sources' && (
              <FileSourcesPanel
                skill="quantity"
                files={fileSources}
                summary={`本次算量基于 ${fileSources.length} 份上传图纸 · ${coverageSummary(drawingCoverage)} · 展示口径来自 report_model`}
              />
            )}

            <DetailActions>
              <button className="btn btn-primary" onClick={() => handleExport('excel')}><Icon name="file-spreadsheet" size={14} /> 下载 Excel</button>
              <button className="btn btn-ghost" onClick={() => handleExport('pdf')}><Icon name="file-text" size={14} /> 下载 PDF</button>
            </DetailActions>
          </div>
        </div>
      </>
    );
  }

  const TABS = [
    { id: 'overview', label: '概览' },
    { id: 'rooms', label: '房间明细' },
    { id: 'paint', label: '涂料工程' },
    { id: 'mep', label: '水电工程' },
    { id: 'materials', label: '材料采购' },
    { id: 'sources', label: '文件来源', icon: 'paperclip', badge: fileSources.length },
  ];

  return (
    <>
      <DetailHead skill="quantity" title={title} onBack={onBack} />
      <div className="content">
        <div className="detail-wrap">
          <DetailSummary
            skill="quantity"
            title={hasRealResult ? `${vm.projectName} · 工程量算量` : '张先生别墅 · 工程量算量'}
            metaItems={[
              { icon: 'folder', text: hasRealResult ? vm.projectName : '张先生别墅' },
              { icon: 'git-branch', text: hasRealResult ? (vm.resultVersion || 'v1.0') : 'v1.0' },
              { icon: 'calendar', text: hasRealResult ? vm.date : '2026-04-12' },
              { icon: 'file-image', text: hasRealResult ? `真实 API · ${vm.inputMode}` : 'A 模式 · 精算' },
            ]}
            metrics={[
              { label: '总面积', value: summary.totalArea, unit: '㎡' },
              { label: '室内净高', value: hasRealResult ? (vm.height || '—') : '2.8', unit: hasRealResult && !vm.height ? '' : 'm' },
              { label: '房间', value: summary.roomCount, unit: '间' },
              { label: '输入模式', node: <span style={{ fontSize: 16, color: 'var(--quantity)' }}>{hasRealResult ? vm.inputMode : 'A 精算'}</span> },
              { label: '置信度', node: <span style={{ fontSize: 18, color: 'var(--quantity)', letterSpacing: 1 }}>{hasRealResult ? vm.confidenceStars : '★★★★★'}</span> },
            ]}
            actions={hasRealResult ? (
              <>
                <button className="btn btn-ghost" onClick={() => handleExport('excel')}><Icon name="file-spreadsheet" size={14} /> Excel</button>
                <button className="btn btn-ghost" onClick={() => handleExport('pdf')}><Icon name="file-text" size={14} /> PDF</button>
              </>
            ) : undefined}
          >
            {/* Input assessment chip row */}
            <div className="assessment-row">
              <div className="assessment-row-label">
                <Icon name="scan-line" size={12} /> 图纸输入评估
              </div>
              <div className="assessment-chips">
                {inputAssessment.map(a => (
                  <span key={a.key} className={`assess-chip assess-${a.status}`}>
                    {a.status === 'ok' && <span className="assess-dot" />}
                    {a.status === 'partial' && <Icon name="triangle-alert" size={10} />}
                    {a.status === 'missing' && <Icon name="circle" size={10} />}
                    {a.label}
                    <span className="assess-note">{a.note}</span>
                  </span>
                ))}
              </div>
            </div>

            {hasRealResult ? (
              <div className="material-cards" style={{ marginTop: 14 }}>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="ruler" size={13} /> 房间面积</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>总地面</span><span className="mat-card-row-value">{summary.totalArea} ㎡</span></div>
                    <div className="mat-card-row"><span>总墙面</span><span className="mat-card-row-value">{summary.totalWallArea} ㎡</span></div>
                    <div className="mat-card-row"><span>湿区</span><span className="mat-card-row-value">{summary.wetRoomCount} 间</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="plug" size={13} /> 电气点位</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>插座</span><span className="mat-card-row-value">{summary.socketCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>开关</span><span className="mat-card-row-value">{summary.switchCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>灯位</span><span className="mat-card-row-value">{summary.lightCount || 0} 个</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="droplets" size={13} /> 给排水</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>给排水点</span><span className="mat-card-row-value">{summary.waterPointCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>地漏</span><span className="mat-card-row-value">{summary.floorDrainCount || 0} 个</span></div>
                    <div className="mat-card-row"><span>报告</span><span className="mat-card-row-value">可下载</span></div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="material-cards" style={{ marginTop: 14 }}>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="paintbrush" size={13} /> 涂料</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>乳胶漆</span><span className="mat-card-row-value">12 桶</span></div>
                    <div className="mat-card-row"><span>底漆</span><span className="mat-card-row-value">4 桶</span></div>
                    <div className="mat-card-row"><span>腻子</span><span className="mat-card-row-value">28 包</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="package-2" size={13} /> 砂浆</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>水泥</span><span className="mat-card-row-value">15 包</span></div>
                    <div className="mat-card-row"><span>黄沙</span><span className="mat-card-row-value">22 包</span></div>
                    <div className="mat-card-row"><span>防水涂料</span><span className="mat-card-row-value">4 桶</span></div>
                  </div>
                </div>
                <div className="mat-card">
                  <div className="mat-card-head"><Icon name="cable" size={13} /> 水电</div>
                  <div className="mat-card-rows">
                    <div className="mat-card-row"><span>PPR 水管</span><span className="mat-card-row-value">168 m</span></div>
                    <div className="mat-card-row"><span>电线</span><span className="mat-card-row-value">3 卷</span></div>
                    <div className="mat-card-row"><span>线管</span><span className="mat-card-row-value">120 m</span></div>
                  </div>
                </div>
              </div>
            )}
          </DetailSummary>

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

          {tab === 'overview' && (
            <>
              <div className="detail-panel" style={{ marginBottom: 16 }}>
                <div className="detail-panel-head">
                  <div>
                    <div className="detail-panel-title">房间概览</div>
                    <div className="detail-panel-sub">{summary.roomCount} 间空间 · 总建面 {summary.totalArea} ㎡</div>
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <DataSourceChip source="drawing" />
                    <DataSourceChip source="inferred" />
                  </div>
                </div>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>房间</th>
                      <th>类型</th>
                      <th style={{ textAlign: 'right' }}>地面 ㎡</th>
                      <th>地面做法</th>
                      <th style={{ textAlign: 'right' }}>墙面 ㎡</th>
                      <th>墙面做法</th>
                      <th>来源</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rooms.map((r, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 500 }}>{r.name}</td>
                        <td><span className={`room-type ${r.type}`}>{roomTypeLabel(r.type)}</span></td>
                        <td style={{ textAlign: 'right' }}>{fmt1(r.floor)}</td>
                        <td>{r.floorMat}</td>
                        <td style={{ textAlign: 'right' }}>{fmt1(r.wall)}</td>
                        <td>{r.wallMat}</td>
                        <td><DataSourceChip source={hasRealResult ? (r.source || 'drawing') : (r.name === '厨房' ? 'inferred' : 'drawing')} /></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="detail-panel" style={{ marginBottom: 16 }}>
                <div className="detail-panel-head"><div className="detail-panel-title">计算参数</div></div>
                {calcSections.map(s => (
                  <div className="accordion-item" key={s.k}>
                    <div className="accordion-head" onClick={() => toggle(s.k)}>
                      <span>{s.label}</span>
                      <Icon name={expanded[s.k] ? 'chevron-up' : 'chevron-down'} size={14} />
                    </div>
                    {expanded[s.k] && <div className="accordion-body">{s.body}</div>}
                  </div>
                ))}
              </div>

              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="alert-triangle" size={14} style={{ color: 'var(--risk-mid)' }} />
                    <div className="detail-panel-title">需复核项</div>
                  </div>
                  <div className="detail-panel-sub">{reviewItems.length} 项</div>
                </div>
                <div className="review-list">
                  {reviewItems.length ? reviewItems.map((t, i) => (
                    <div className="review-item" key={i}>
                      <Icon name="alert-circle" size={14} style={{ marginTop: 1 }} />
                      <span>{t}</span>
                    </div>
                  )) : (
                    <div className="review-item">
                      <Icon name="check-circle-2" size={14} style={{ marginTop: 1, color: 'var(--risk-low)' }} />
                      <span>暂无需复核项。</span>
                    </div>
                  )}
                </div>
              </div>
            </>
          )}

          {tab === 'rooms' && (
            <div className="detail-panel">
              <div className="detail-panel-head">
                <div className="detail-panel-title">房间详细明细</div>
                <button className="btn btn-ghost"><Icon name="filter" size={13} /> 筛选</button>
              </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>
                    <th style={{ textAlign: 'right' }}>踢脚 m</th>
                    <th style={{ textAlign: 'right' }}>防水高度</th>
                    <th style={{ textAlign: 'right' }}>损耗</th>
                  </tr>
                </thead>
                <tbody>
                  {rooms.map((r, i) => (
                    <tr key={i}>
                      <td style={{ fontWeight: 500 }}>{r.name}</td>
                      <td style={{ textAlign: 'right' }}>{fmt1(r.floor)}</td>
                      <td style={{ textAlign: 'right' }}>{fmt1(r.wall)}</td>
                      <td style={{ textAlign: 'right' }}>{fmt1(r.ceiling)}</td>
                      <td style={{ color: 'var(--text-secondary)' }}>{r.ceilingType}</td>
                      <td style={{ textAlign: 'right' }}>{r.skirting > 0 ? fmt1(r.skirting) : '—'}</td>
                      <td style={{ textAlign: 'right' }}>{r.waterproofH > 0 ? r.waterproofH + ' m' : '—'}</td>
                      <td style={{ textAlign: 'right', color: 'var(--text-secondary)' }}>{(r.floorLoss * 100).toFixed(0)}%</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === 'paint' && (
            <div className="detail-panel">
              <div className="detail-panel-head">
                <div className="detail-panel-title">涂料工程明细</div>
                <div className="detail-panel-sub">{hasRealResult ? '按真实墙面数据估算，仅用于页面预览；正式材料清单请下载报告' : '乳胶漆 12 桶 · 底漆 4 桶 · 腻子 28 包'}</div>
              </div>
              <table className="data-table">
                <thead>
                  <tr>
                    <th>区域</th>
                    <th style={{ textAlign: 'right' }}>墙面面积</th>
                    <th>做法</th>
                    <th style={{ textAlign: 'right' }}>乳胶漆 (L)</th>
                    <th style={{ textAlign: 'right' }}>底漆 (L)</th>
                    <th style={{ textAlign: 'right' }}>腻子 (kg)</th>
                  </tr>
                </thead>
                <tbody>
                  {rooms.filter(r => r.wallMat === '乳胶漆').map((r, i) => (
                    <tr key={i}>
                      <td style={{ fontWeight: 500 }}>{r.name}</td>
                      <td style={{ textAlign: 'right' }}>{fmt1(r.wall)} ㎡</td>
                      <td>{r.wallMat}</td>
                      <td style={{ textAlign: 'right' }}>{(r.wall * 0.3).toFixed(1)}</td>
                      <td style={{ textAlign: 'right' }}>{(r.wall * 0.1).toFixed(1)}</td>
                      <td style={{ textAlign: 'right' }}>{(r.wall * 1.5).toFixed(1)}</td>
                    </tr>
                  ))}
                  {rooms.filter(r => r.wallMat === '乳胶漆').length === 0 && (
                    <tr>
                      <td colSpan="6" style={{ color: 'var(--text-secondary)', textAlign: 'center' }}>暂无乳胶漆墙面数据。</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          )}

          {tab === 'mep' && (
            <>
              <div className="detail-panel" style={{ marginBottom: 16 }}>
                <div className="detail-panel-head">
                  <div className="detail-panel-title">点位明细 · 按房间</div>
                  <div className="detail-panel-sub">水电点位由图纸/经验估算</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 style={{ textAlign: 'right' }}>灯位</th>
                      <th style={{ textAlign: 'right' }}>网口</th>
                      <th style={{ textAlign: 'right' }}>水冷</th>
                      <th style={{ textAlign: 'right' }}>水热</th>
                      <th style={{ textAlign: 'right' }}>地漏</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rooms.map((r, i) => {
                      const m = mep[r.name] || {};
                      const w = water[r.name] || {};
                      return (
                        <tr key={i}>
                          <td style={{ fontWeight: 500 }}>{r.name}</td>
                          <td style={{ textAlign: 'right' }}>{m.socket || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{m.ac || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{m.switch || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{m.light || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{m.net || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{w.cold || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{w.hot || '—'}</td>
                          <td style={{ textAlign: 'right' }}>{w.floor_drain || '—'}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </>
          )}

          {tab === 'materials' && (
            hasRealResult ? (
              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div>
                    <div className="detail-panel-title">材料采购清单</div>
                    <div className="detail-panel-sub">真实材料清单由后端导出脚本生成</div>
                  </div>
                  <button className="btn btn-primary" onClick={() => handleExport('excel')}><Icon name="download" size={13} /> 下载 Excel</button>
                </div>
                <div className="review-list">
                  <div className="review-item">
                    <Icon name="file-spreadsheet" size={14} style={{ marginTop: 1, color: 'var(--quantity)' }} />
                    <span>第一版详情页展示房间、面积、水电真实数据；完整采购清单请下载后端生成的 Excel/PDF 报告。</span>
                  </div>
                </div>
              </div>
            ) : (
              <div className="detail-panel">
                <div className="detail-panel-head">
                  <div className="detail-panel-title">材料采购清单</div>
                  <button className="btn btn-primary"><Icon name="download" size={13} /> 导出采购单</button>
                </div>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>材料</th>
                      <th>规格</th>
                      <th style={{ textAlign: 'right' }}>数量</th>
                      <th>单位</th>
                      <th style={{ textAlign: 'right' }}>含损耗</th>
                      <th>来源说明</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['乳胶漆', '18L/桶 · 白色', 12, '桶', '+5%', '按墙面面积 162.5㎡ × 0.3L/㎡'],
                      ['底漆', '18L/桶', 4, '桶', '+5%', '按面漆量 1/3'],
                      ['腻子粉', '20kg/包', 28, '包', '+10%', '按墙面 1.5kg/㎡'],
                      ['水泥', '50kg/包 · 32.5R', 15, '包', '+5%', '砂浆+找平合计'],
                      ['黄沙', '50kg/包 · 中砂', 22, '包', '+5%', '按砂浆 1:3 配比'],
                      ['防水涂料', '20kg/桶 · JS', 4, '桶', '+10%', '厨卫+阳台 28㎡ × 1.5kg/㎡'],
                      ['PPR 水管', 'DN20 · 4m/根', 42, '根', '+5%', '冷98m + 热70m'],
                      ['电线 BV', '2.5mm² · 100m/卷', 1, '卷', '—', '照明回路'],
                      ['电线 BV', '4mm² · 100m/卷', 2, '卷', '—', '插座回路 7 间'],
                      ['PVC 线管', 'DN20 · 4m/根', 30, '根', '+5%', '按 1.6m/㎡'],
                    ].map((r, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 500 }}>{r[0]}</td>
                        <td style={{ color: 'var(--text-secondary)' }}>{r[1]}</td>
                        <td style={{ textAlign: 'right' }}>{r[2]}</td>
                        <td style={{ color: 'var(--text-secondary)' }}>{r[3]}</td>
                        <td style={{ textAlign: 'right', color: 'var(--text-muted)' }}>{r[4]}</td>
                        <td style={{ color: 'var(--text-secondary)', fontSize: 12 }}>{r[5]}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )
          )}

          {tab === 'sources' && (
            <FileSourcesPanel
              skill="quantity"
              files={fileSources}
              summary={hasRealResult ? `本次算量基于 ${fileSources.length} 份上传图纸 · 结果来自 /api/takeoff` : `本次算量基于 ${fileSources.length} 份输入文件 · 1 份图纸部分识别已用经验值补足`}
            />
          )}

          <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="refresh-cw" size={14} /> 补充图纸重新算量
            </button>
          </DetailActions>
        </div>
      </div>
    </>
  );
};

window.QuantityDetail = QuantityDetail;