/* ============================================================
   detail.jsx — rich instrument card: identity, status, calibration
   certificate, PM, documents, code decode, history, scan preview.
   ============================================================ */
function InfoRow({ label, children, mono }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '128px 1fr', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--line-soft)' }}>
      <div style={{ fontSize: 12.5, color: 'var(--ink-3)', fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--ink)', fontFamily: mono ? 'var(--mono)' : 'inherit' }}>{children}</div>
    </div>
  );
}
function SectionCard({ icon, title, sub, right, children }) {
  const Ico = icon;
  return (
    <div className="card card-pad">
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16 }}>
        {Ico && <span style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--accent-softer)', color: 'var(--accent-strong)', display: 'grid', placeItems: 'center', flex: 'none' }}><Ico size={17} /></span>}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
          {sub && <div className="page-sub">{sub}</div>}
        </div>
        {right}
      </div>
      {children}
    </div>
  );
}
function OpBadge({ op }) {
  const map = { up: ['var(--ok)', 'var(--ok-soft)'], repair: ['var(--warn)', 'var(--warn-soft)'], down: ['var(--danger)', 'var(--danger-soft)'] };
  const [c, soft] = map[op.key] || map.up;
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, padding: '3px 10px', borderRadius: 99, background: soft, color: c }}><span style={{ width: 7, height: 7, borderRadius: 99, background: c }} />{op.label}</span>;
}
function DocRow({ icon, name, meta, onOpen }) {
  const Ico = icon;
  return (
    <button onClick={onOpen} className="doc-row" style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 10, padding: '11px 13px', cursor: 'pointer', fontFamily: 'inherit', transition: 'border-color .14s, background .14s' }}>
      <span style={{ width: 34, height: 34, borderRadius: 8, background: 'var(--surface)', display: 'grid', placeItems: 'center', color: 'var(--accent)', flex: 'none' }}><Ico size={17} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{meta}</div>
      </div>
      <I.download size={16} style={{ color: 'var(--ink-3)', flex: 'none' }} />
    </button>
  );
}

function ScanPreview({ inst, meta, s, onClose }) {
  const m = DEPT_META[inst.dept] || {};
  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div style={{ position: 'fixed', inset: 0, display: 'grid', placeItems: 'center', zIndex: 60, pointerEvents: 'none' }}>
        <div className="enter" style={{ pointerEvents: 'auto', width: 320, background: '#0f0d0b', borderRadius: 38, padding: 11, boxShadow: 'var(--shadow-lg)' }}>
          <div style={{ background: 'var(--bg)', borderRadius: 28, overflow: 'hidden', height: 620, display: 'flex', flexDirection: 'column' }}>
            <div style={{ background: deptColor(inst.dept, 0.55, 0.12), color: '#fff', padding: '34px 20px 18px', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 90, height: 5, borderRadius: 99, background: '#ffffff55' }} />
              <div style={{ fontSize: 11, opacity: .9, fontWeight: 600, letterSpacing: '.05em' }}>สแกนสำเร็จ · บัตรเครื่องมือ</div>
              <div style={{ fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 18, marginTop: 6 }}>{inst.code}</div>
              <div style={{ fontSize: 12.5, opacity: .95, marginTop: 2 }}>{inst.type}</div>
            </div>
            <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'auto', flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><OpBadge op={meta.op} /><Pill status={s} showDays /></div>
              {[['แผนก', m.short || inst.dept], ['ที่ตั้ง', meta.room], ['ผู้รับผิดชอบ', meta.owner], ['ครบกำหนดสอบเทียบ', fmtDateFull(inst.exp)], ['PM ครั้งถัดไป', fmtDateFull(meta.pmNext)]].map(([l, v]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 12.5, paddingBottom: 8, borderBottom: '1px solid var(--line-soft)' }}>
                  <span style={{ color: 'var(--ink-3)' }}>{l}</span><span style={{ fontWeight: 600, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 2 }}>
                <button className="btn btn-sm" style={{ background: 'var(--danger-soft)', color: 'var(--danger)', borderColor: 'transparent' }}><I.warning size={15} /> แจ้งซ่อม</button>
                <button className="btn btn-sm"><I.shield size={15} /> บันทึก PM</button>
                <button className="btn btn-sm" style={{ gridColumn: '1 / -1' }}><I.download size={15} /> ดูใบรับรองสอบเทียบ</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function Detail({ instruments, code, go, onEdit, admin, onDelete }) {
  const inst = useMemo(() => instruments.find(i => i.code === code), [instruments, code]);
  const [scan, setScan] = useState(false);
  const [labelOpen, setLabelOpen] = useState(false);
  if (!inst) return <EmptyState icon={I.search} title="ไม่พบเครื่องมือนี้" sub={code} />;
  const s = statusOf(inst);
  const m = DEPT_META[inst.dept] || {};
  const meta = instrumentMeta(inst);
  const calResults = window.calibrationResults(inst);
  const parts = inst.code.split('-');
  const typeInfo = (window.LAB_DATA.types || []).find(t => t.abbr === parts[2]);

  const history = useMemo(() => {
    const ev = [];
    if (inst.cal) {
      ev.push({ d: inst.cal, kind: 'cal', title: 'สอบเทียบ (Calibration)', note: `${meta.provider} · ผ่านเกณฑ์` });
      const cal = parseD(inst.cal), exp = parseD(inst.exp);
      if (cal && exp) {
        const span = Math.round((exp - cal) / 86400000);
        ev.unshift({ d: new Date(cal.getTime() - span * 86400000).toISOString().slice(0,10), kind: 'cal', title: 'สอบเทียบรอบก่อนหน้า', note: 'ผ่านเกณฑ์' });
      }
    }
    if (meta.pmLast) ev.push({ d: meta.pmLast, kind: 'pm', title: 'บำรุงรักษาเชิงป้องกัน (PM)', note: 'ตรวจสภาพ/ทำความสะอาดตามรอบ' });
    if (meta.intake) ev.push({ d: meta.intake, kind: 'in', title: 'รับเข้าใช้งาน', note: 'ลงทะเบียนเข้าระบบ' });
    if (inst.exp) ev.push({ d: inst.exp, kind: 'due', title: 'ครบกำหนดสอบเทียบครั้งถัดไป', note: s.key === 'danger' ? 'เลยกำหนดแล้ว — ต้องดำเนินการ' : 'นัดหมายล่วงหน้า', future: true });
    if (meta.pmNext) ev.push({ d: meta.pmNext, kind: 'pmdue', title: 'กำหนด PM ครั้งถัดไป', note: meta.pmCycle, future: true });
    return ev.sort((a, b) => (a.d < b.d ? 1 : -1));
  }, [inst]);

  return (
    <div className="enter" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {scan && <ScanPreview inst={inst} meta={meta} s={s} onClose={() => setScan(false)} />}
      {labelOpen && <LabelModal items={[inst]} onClose={() => setLabelOpen(false)} />}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => go('inventory')}><I.arrowL size={16} /> กลับไปทะเบียนเครื่องมือ</button>
        <div style={{ flex: 1 }} />
        <button className="btn btn-sm" onClick={() => setScan(true)}><I.qr size={16} /> มุมมองสแกน QR</button>
        {admin && <button className="btn btn-sm" style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }} onClick={() => onDelete && onDelete(inst.code)}><I.trash size={16} /> ลบ</button>}
        <button className="btn btn-primary btn-sm" onClick={() => onEdit(inst.code)}><I.edit size={16} /> แก้ไข</button>
      </div>

      <div className="detail-grid" style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 22, alignItems: 'start' }}>
        {/* ID card */}
        <div className="card" style={{ overflow: 'hidden', position: 'sticky', top: 88 }}>
          <div style={{ background: deptColor(inst.dept, 0.55, 0.12), padding: '18px 20px', color: '#fff' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11.5, opacity: .92, fontWeight: 600, letterSpacing: '.05em' }}>
              <span>บัตรประจำเครื่องมือ</span><span>{m.abbr}</span>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 21, marginTop: 8 }}>{inst.code}</div>
            <div style={{ fontSize: 13, opacity: .95, marginTop: 2 }}>{m.short || inst.dept}</div>
          </div>
          <div style={{ padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <button onClick={() => setScan(true)} title="ดูมุมมองสแกน" style={{ padding: 10, background: '#fff', borderRadius: 12, boxShadow: 'var(--shadow-sm)', border: 'none', cursor: 'pointer' }}><QRMatrix text={instrumentURL(inst.code)} size={148} /></button>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>สแกนเพื่อเปิดบัตรบนมือถือ</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 10, justifyContent: 'center' }}>
                <span className="kbd-code">{inst.code}</span><CopyBtn text={inst.code} />
              </div>
            </div>
            <div style={{ width: '100%', display: 'flex', gap: 8 }}>
              <button className="btn btn-sm" style={{ flex: 1 }} onClick={() => setLabelOpen(true)}><I.qr size={15} /> พิมพ์ป้าย</button>
              <button className="btn btn-sm" style={{ flex: 1 }} onClick={() => onEdit(inst.code)}><I.edit size={15} /> แก้ไข</button>
            </div>
            <div style={{ width: '100%', borderTop: '1px solid var(--line-soft)', paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 9 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, fontSize: 12.5 }}><span style={{ color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>สถานะใช้งาน</span><OpBadge op={meta.op} /></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, fontSize: 12.5 }}><span style={{ color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>สอบเทียบ</span><Pill status={s} showDays /></div>
            </div>
          </div>
        </div>

        {/* details */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="card card-pad">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
              <div>
                <h2 style={{ margin: 0, fontSize: 23, fontWeight: 600, letterSpacing: '-.02em', textWrap: 'pretty' }}>{inst.type}</h2>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 4 }}>{inst.brand}{inst.model && inst.model !== '-' ? ` · รุ่น ${inst.model}` : ''}</div>
              </div>
              <Pill status={s} showDays />
            </div>
            {inst.exp && (
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 16, background: s.key === 'ok' ? 'var(--ok-soft)' : s.key === 'warn' ? 'var(--warn-soft)' : 'var(--danger-soft)', borderRadius: 12, padding: '14px 18px' }}>
                <I.clock size={22} style={{ color: s.key === 'ok' ? 'var(--ok)' : s.key === 'warn' ? 'var(--warn)' : 'var(--danger)' }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{s.days < 0 ? `เลยกำหนดสอบเทียบมาแล้ว ${Math.abs(s.days)} วัน` : `เหลือเวลาอีก ${s.days} วัน ก่อนครบกำหนด`}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 1 }}>กำหนดสอบเทียบครั้งถัดไป {fmtDateFull(inst.exp)}</div>
                </div>
              </div>
            )}
            <div style={{ marginTop: 6, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 28px' }}>
              <InfoRow label="ชนิดเครื่องมือ">{inst.type}</InfoRow>
              <InfoRow label="แผนก"><DeptBadge dept={inst.dept} /></InfoRow>
              <InfoRow label="ยี่ห้อ">{inst.brand || '—'}</InfoRow>
              <InfoRow label="รุ่น / Model" mono>{inst.model && inst.model !== '-' ? inst.model : '—'}</InfoRow>
              <InfoRow label="Serial No." mono>{inst.serial && inst.serial !== '-' ? inst.serial : '—'}</InfoRow>
              <InfoRow label="รหัสครุภัณฑ์" mono>{inst.asset && inst.asset !== '-' ? inst.asset : '—'}</InfoRow>
              <InfoRow label="ที่ตั้ง">{meta.location}</InfoRow>
              <InfoRow label="ผู้รับผิดชอบ">{meta.owner}</InfoRow>
              <InfoRow label="วันรับเข้าใช้งาน">{fmtDateFull(meta.intake)}</InfoRow>
              <InfoRow label="หมายเหตุ">{inst.note && inst.note !== '-' ? inst.note : <span className="muted">—</span>}</InfoRow>
            </div>
          </div>

          {/* calibration + PM side by side */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="cal-pm-grid">
            <SectionCard icon={I.shield} title="การสอบเทียบ" sub="Calibration record">
              <InfoRow label="สอบเทียบล่าสุด">{fmtDateFull(inst.cal)}</InfoRow>
              <InfoRow label="ครบกำหนดถัดไป">{fmtDateFull(inst.exp)}</InfoRow>
              <InfoRow label="หน่วยงาน">{meta.provider}</InfoRow>
              <InfoRow label="เลขใบรับรอง" mono>{meta.certNo}</InfoRow>
              <InfoRow label="ผลการสอบเทียบ">{meta.calResult ? <span style={{ color: 'var(--ok)', fontWeight: 600 }}>{meta.calResult}</span> : <span className="muted">รอบันทึก</span>}</InfoRow>
              <InfoRow label="ความไม่แน่นอน" mono>{inst.cal ? meta.uncertainty : '—'}</InfoRow>
            </SectionCard>
            <SectionCard icon={I.refresh} title="บำรุงรักษา (PM)" sub="Preventive maintenance">
              <InfoRow label="รอบการ PM">{meta.pmCycle}</InfoRow>
              <InfoRow label="PM ล่าสุด">{fmtDateFull(meta.pmLast)}</InfoRow>
              <InfoRow label="PM ครั้งถัดไป">{fmtDateFull(meta.pmNext)}</InfoRow>
              <InfoRow label="ผู้ให้บริการ">{meta.provider}</InfoRow>
              <InfoRow label="ความถี่ QC">{meta.qcFreq}</InfoRow>
            </SectionCard>
          </div>

          {/* numeric calibration results vs acceptance criteria */}
          {calResults && (
            <SectionCard icon={I.trend} title="ผลการสอบเทียบเชิงตัวเลข" sub={`เทียบกับเกณฑ์ยอมรับ · ${calResults.method}`}
              right={<span className={`pill ${calResults.allPass ? 'ok' : 'warn'}`}><span className="dot"></span>{calResults.allPass ? 'ผ่านทุกจุด' : 'มีจุดเฝ้าระวัง'}</span>}>
              <div className="tbl-wrap" style={{ border: '1px solid var(--line)', borderRadius: 11 }}>
                <table className="tbl cal-res-tbl">
                  <thead>
                    <tr>
                      <th>รายการวัด</th>
                      <th style={{ textAlign: 'right', width: 78 }}>ค่าตั้ง</th>
                      <th style={{ textAlign: 'right', width: 88 }}>ค่าที่วัดได้</th>
                      <th style={{ textAlign: 'right', width: 76 }}>เบี่ยงเบน</th>
                      <th style={{ textAlign: 'right', width: 66 }}>เกณฑ์</th>
                      <th style={{ textAlign: 'right', width: 60 }}>U (k=2)</th>
                      <th style={{ textAlign: 'center', width: 78 }}>ผล</th>
                    </tr>
                  </thead>
                  <tbody>
                    {calResults.rows.map((r, i) => (
                      <tr key={i} style={{ cursor: 'default' }}>
                        <td style={{ fontWeight: 600 }}>{r.param}</td>
                        <td className="tnum" style={{ textAlign: 'right' }}>{r.setpoint} {r.unit}</td>
                        <td className="tnum" style={{ textAlign: 'right', fontWeight: 600, color: r.pass ? 'var(--ink)' : 'var(--danger)' }}>{r.measured} {r.unit}</td>
                        <td className="tnum" style={{ textAlign: 'right', color: r.pass ? 'var(--ink-2)' : 'var(--danger)' }}>{r.dev > 0 ? '+' : ''}{r.dev}</td>
                        <td className="tnum" style={{ textAlign: 'right', color: 'var(--ink-3)' }}>±{r.tol}</td>
                        <td className="tnum" style={{ textAlign: 'right', color: 'var(--ink-3)' }}>±{r.u}</td>
                        <td style={{ textAlign: 'center' }}>
                          {r.pass
                            ? <span className="pill ok" style={{ padding: '2px 8px' }}><I.check size={12} /> ผ่าน</span>
                            : <span className="pill danger" style={{ padding: '2px 8px' }}><I.warning size={12} /> เกินเกณฑ์</span>}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 10, alignItems: 'center', fontSize: 12, color: 'var(--ink-3)' }}>
                <I.shield size={14} />
                <span>สรุปผล: <b style={{ color: calResults.allPass ? 'var(--ok)' : 'var(--warn)' }}>{calResults.overall}</b> — ส่วนเบี่ยงเบนรวมความไม่แน่นอน (U, k=2) ต้องไม่เกินเกณฑ์ยอมรับ</span>
              </div>
            </SectionCard>
          )}

          {/* ISO 15189 registry / lifecycle */}
          <SectionCard icon={I.building} title="ข้อมูลทะเบียน (ISO 15189)" sub="Asset registry & lifecycle">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 28px' }}>
              <InfoRow label="สถานะทะเบียน">
                {meta.lifecycle === 'decommissioned'
                  ? <span style={{ color: 'var(--danger)', fontWeight: 600 }}>ปลดระวาง (Decommissioned)</span>
                  : <span style={{ color: 'var(--ok)', fontWeight: 600 }}>ใช้งาน (In service)</span>}
              </InfoRow>
              <InfoRow label="สภาพเมื่อรับเข้า">{meta.condition}</InfoRow>
              <InfoRow label="วันเริ่มใช้งาน">{fmtDateFull(meta.commissionDate)}</InfoRow>
              <InfoRow label="ผลตรวจรับเข้า">{meta.acceptance ? <span style={{ color: 'var(--ok)', fontWeight: 600 }}>{meta.acceptance}</span> : <span className="muted">—</span>}</InfoRow>
              <InfoRow label="ผู้แทนจำหน่าย">{meta.vendor}</InfoRow>
              <InfoRow label="ติดต่อผู้แทนฯ" mono>{meta.vendorContact}</InfoRow>
              <InfoRow label="Software / Firmware" mono>{meta.firmware}</InfoRow>
              <InfoRow label="สัญญาบำรุงรักษา">{meta.serviceContract}</InfoRow>
              <InfoRow label="วันหมดประกัน">{fmtDateFull(meta.warrantyEnd)}</InfoRow>
              <InfoRow label="คู่มือการใช้งาน">{meta.manualRef}</InfoRow>
            </div>
          </SectionCard>

          {/* reagent & QC lots */}
          <ReagentLotsCard code={inst.code} go={go} />

          {/* audit trail for this instrument */}
          <InstrumentAudit code={inst.code} />

          {/* documents */}
          <SectionCard icon={I.copy} title="เอกสารแนบ" sub="ใบรับรอง · รายงาน · คู่มือ">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }} className="doc-grid">
              <DocRow icon={I.shield} name={`ใบรับรองสอบเทียบ ${meta.certNo}`} meta={`PDF · ${fmtDate(inst.cal)}`} onOpen={() => {}} />
              <DocRow icon={I.refresh} name="รายงานบำรุงรักษา (PM)" meta={`PDF · ${fmtDate(meta.pmLast)}`} onOpen={() => {}} />
              <DocRow icon={I.beaker} name="คู่มือการใช้งานเครื่อง" meta={`PDF · ${inst.brand}`} onOpen={() => {}} />
              <DocRow icon={I.clock} name="ประวัติการซ่อมบำรุง" meta="บันทึกในระบบ" onOpen={() => {}} />
            </div>
          </SectionCard>

          {/* code decode */}
          <SectionCard title="โครงสร้างรหัสเครื่องมือ" icon={I.tag}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { p: 'LAB', t: 'Laboratory', d: 'คำนำหน้าคงที่' },
                { p: parts[1], t: m.short || inst.dept, d: 'แผนก' },
                { p: parts[2], t: typeInfo ? typeInfo.en : inst.typeName, d: 'ประเภทเครื่องมือ' },
                { p: parts[3], t: 'ลำดับที่ ' + parseInt(parts[3], 10), d: 'เลขลำดับในกลุ่ม' },
              ].map((x, idx) => (
                <div key={idx} style={{ flex: '1 1 120px', background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 11, padding: '12px 14px' }}>
                  <div className="code" style={{ fontSize: 18, fontWeight: 600, color: idx === 1 ? deptColor(inst.dept, 0.55) : 'var(--ink)' }}>{x.p}</div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 6 }}>{x.t}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 1 }}>{x.d}</div>
                </div>
              ))}
            </div>
          </SectionCard>

          {/* timeline */}
          <SectionCard icon={I.clock} title="ประวัติสอบเทียบ & บำรุงรักษา" sub="บันทึกย้อนหลังและกำหนดการครั้งถัดไป">
            <div style={{ position: 'relative', paddingLeft: 26 }}>
              <div style={{ position: 'absolute', left: 7, top: 6, bottom: 6, width: 2, background: 'var(--line)' }} />
              {history.map((e, idx) => {
                const col = e.kind === 'due' ? (s.key === 'danger' ? 'var(--danger)' : 'var(--warn)') : e.kind === 'pmdue' ? 'var(--warn)' : (e.kind === 'pm' || e.kind === 'pmdue') ? 'var(--accent)' : e.kind === 'in' ? 'var(--ink-4)' : 'var(--ok)';
                return (
                  <div key={idx} style={{ position: 'relative', paddingBottom: idx < history.length - 1 ? 20 : 0 }}>
                    <div style={{ position: 'absolute', left: -26, top: 1, width: 16, height: 16, borderRadius: 99, background: e.future ? 'var(--surface)' : col, border: `2.5px solid ${col}`, boxShadow: '0 0 0 3px var(--surface)' }} />
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                      <span style={{ fontWeight: 600, fontSize: 13.5 }}>{e.title}</span>
                      <span className="tnum" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{fmtDateFull(e.d)}</span>
                      {e.future && <span className="pill warn" style={{ fontSize: 11 }}>กำหนดการ</span>}
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 2 }}>{e.note}</div>
                  </div>
                );
              })}
            </div>
          </SectionCard>
        </div>
      </div>
    </div>
  );
}
window.Detail = Detail;
window.OpBadge = OpBadge;
window.SectionCard = SectionCard;
window.InfoRow = InfoRow;