/* ============================================================
   docreg.jsx — controlled-document register (ดัชนีเอกสาร).
   Lists every FR/FM form in the system with revision + effective
   date so auditors see document control is systematic.
   ============================================================ */
const DOC_REGISTER = [
  { no: 'FR-BM-001', title: 'แบบบันทึกอุณหภูมิตู้เย็น/ตู้แช่แข็ง/ตู้อบ', type: 'แบบบันทึก (Form)', rev: '03', eff: '2568-10-01', review: '2569-06-01', cycle: 'ทุก 1 ปี', view: 'templog', owner: 'งานเทคนิคการแพทย์' },
  { no: 'FR-BM-002', title: 'แบบบันทึกการแจ้งซ่อม / ซ่อมบำรุงเครื่องมือ', type: 'แบบบันทึก (Form)', rev: '02', eff: '2568-10-01', review: '2569-06-01', cycle: 'ทุก 1 ปี', view: 'repair', owner: 'งานเทคนิคการแพทย์' },
  { no: 'FR-QP-0012', title: 'ป้ายบ่งชี้เครื่องมือในห้องปฏิบัติการ', type: 'แบบฟอร์มป้าย (Label)', rev: '01', eff: '2568-04-01', review: '2569-04-01', cycle: 'ทุก 2 ปี', view: 'inventory', owner: 'งานเทคนิคการแพทย์' },
  { no: 'QP-BM-001', title: 'ระเบียบปฏิบัติการสอบเทียบและบำรุงรักษาเครื่องมือ', type: 'ระเบียบปฏิบัติ (Procedure)', rev: '04', eff: '2568-10-01', review: '2569-10-01', cycle: 'ทุก 1 ปี', view: 'calplan', owner: 'หัวหน้าห้องปฏิบัติการ' },
  { no: 'WI-BM-003', title: 'วิธีปฏิบัติงานการควบคุมคุณภาพน้ำยา (QC Reagent)', type: 'วิธีปฏิบัติงาน (WI)', rev: '02', eff: '2568-10-01', review: '2569-10-01', cycle: 'ทุก 1 ปี', view: 'reagents', owner: 'งานเทคนิคการแพทย์' },
  { no: 'FR-BM-004', title: 'ทะเบียนเครื่องมือทางห้องปฏิบัติการ (Master list)', type: 'แบบบันทึก (Form)', rev: '05', eff: '2569-01-01', review: '2569-06-01', cycle: 'ทุก 1 ปี', view: 'inventory', owner: 'งานเทคนิคการแพทย์' },
];

function docStatus(d) {
  const dd = daysUntil(d.review);
  if (dd != null && dd < 0) return { key: 'over', label: 'ครบรอบทบทวน', tone: 'danger', days: dd };
  if (dd != null && dd <= 90) return { key: 'soon', label: 'ใกล้ทบทวน', tone: 'warn', days: dd };
  return { key: 'active', label: 'บังคับใช้', tone: 'ok', days: dd };
}

function DocRegister({ go }) {
  const [q, setQ] = useState('');
  const rows = useMemo(() => {
    const ql = q.trim().toLowerCase();
    return DOC_REGISTER.filter(d => !ql || `${d.no} ${d.title} ${d.type} ${d.owner}`.toLowerCase().includes(ql));
  }, [q]);
  const counts = useMemo(() => {
    const c = { total: DOC_REGISTER.length, soon: 0, over: 0 };
    DOC_REGISTER.forEach(d => { const s = docStatus(d); if (s.key === 'soon') c.soon++; else if (s.key === 'over') c.over++; });
    return c;
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {[['เอกสารควบคุมทั้งหมด', counts.total, 'accent', I.copy], ['ใกล้ครบรอบทบทวน', counts.soon, 'warn', I.clock], ['เกินรอบทบทวน', counts.over, 'danger', I.warning]].map(([l, v, tone, Ico]) => (
          <div key={l} className="card card-pad" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 38, height: 38, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center', background: tone === 'accent' ? 'var(--accent-soft)' : `var(--${tone}-soft)`, color: tone === 'accent' ? 'var(--accent-strong)' : `var(--${tone})` }}><Ico size={19} /></span>
            <div><div className="figure" style={{ fontSize: 26 }}>{v}</div><div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{l}</div></div>
          </div>
        ))}
      </div>

      <div className="search" style={{ maxWidth: 420 }}>
        <I.search className="ico" size={17} />
        <input placeholder="ค้นหา เลขเอกสาร / ชื่อ / ประเภท…" value={q} onChange={e => setQ(e.target.value)} />
      </div>

      <div className="card tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 116 }}>เลขเอกสาร</th>
              <th>ชื่อเอกสาร</th>
              <th style={{ width: 150 }}>ประเภท</th>
              <th style={{ width: 70, textAlign: 'center' }}>ฉบับที่</th>
              <th style={{ width: 116 }}>วันบังคับใช้</th>
              <th style={{ width: 130 }}>ทบทวนถัดไป</th>
              <th style={{ width: 130 }}>สถานะ</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(d => {
              const s = docStatus(d);
              return (
                <tr key={d.no} onClick={() => go(d.view)}>
                  <td><span className="code" style={{ fontWeight: 600 }}>{d.no}</span></td>
                  <td>
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{d.title}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>ผู้รับผิดชอบ: {d.owner} · ทบทวน{d.cycle}</div>
                  </td>
                  <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{d.type}</td>
                  <td style={{ textAlign: 'center' }}><span className="kbd-code">{d.rev}</span></td>
                  <td className="tnum"><span style={{ fontSize: 13 }}>{fmtDate(d.eff)}</span></td>
                  <td className="tnum">
                    <span style={{ fontSize: 13 }}>{fmtDate(d.review)}</span>
                    {s.days != null && s.key !== 'active' && <div style={{ fontSize: 10.5, color: s.tone === 'danger' ? 'var(--danger)' : 'var(--warn)' }}>{s.days < 0 ? `เกิน ${Math.abs(s.days)} ว.` : `อีก ${s.days} ว.`}</div>}
                  </td>
                  <td><span className={`pill ${s.tone}`}><span className="dot"></span>{s.label}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{ fontSize: 12, color: 'var(--ink-3)', paddingLeft: 4, display: 'flex', alignItems: 'center', gap: 7 }}>
        <I.shield size={14} /> คลิกที่แถวเพื่อเปิดฟอร์ม/โมดูลที่เกี่ยวข้อง · เอกสารทุกฉบับควบคุมฉบับและรอบทบทวนตามระบบคุณภาพ ISO 15189
      </div>
    </div>
  );
}
window.DocRegister = DocRegister;