/* ============================================================
   label.jsx — ISO 15189 instrument label (FR-QP-0012).
   Single or batch preview + print, with size control.
   ============================================================ */
const LBL_DATE = (() => { const n = new Date(); return `${n.getDate()} ${THMONTH[n.getMonth()].replace(/\.$/, '')}.${n.getFullYear() + 543}`.replace(/\.\.+/g, '.'); })();
const LBL_SIZES = [
  { key: 'full', label: 'เต็มแผ่น', z: 1 },
  { key: 'a5', label: 'A5', z: 0.68 },
  { key: 'sticker', label: 'สติกเกอร์', z: 0.48 },
];

function LabDocHeader({ docNo, rev = '0', line2, page = '1 จาก 1' }) {
  return (
    <div className="lbl-head">
      <div className="lbl-logo"><img className="lbl-logo-img" src="assets/hospital-logo.png" alt="โรงพยาบาลอำนาจเจริญ" /></div>
      <div className="lbl-title-c">
        <b>กลุ่มงานเทคนิคการแพทย์และพยาธิวิทยาคลินิก</b>
        <span>โรงพยาบาลอำนาจเจริญ</span>
      </div>
      <div className="lbl-doc">
        <div className="dl">เลขที่เอกสาร : {docNo}</div>
        <div className="dl">{line2 || `แก้ไขครั้งที่ ${rev}  วันที่ : ${LBL_DATE}`}</div>
        <div className="dl" style={{ borderBottom: 0 }}>หน้าที่ {page}</div>
      </div>
    </div>
  );
}
window.LabDocHeader = LabDocHeader;

function LabelSheet({ inst }) {
  const meta = window.instrumentMeta(inst);
  const v = (x) => (x && x !== '-' ? x : '-');
  const fields = [
    ['ชื่อเครื่องมือ', v(inst.type)],
    ['รหัสเครื่องมือ', v(inst.code), true],
    ['หมายเลขครุภัณฑ์', v(inst.asset)],
    ['หมายเลขเครื่อง (S/N)', v(inst.serial)],
    ['บริษัทผู้ผลิต', v(inst.brand)],
    ['รุ่น/Model', v(inst.model)],
    ['สถานที่ติดตั้ง', v(meta.location || inst.dept)],
    ['ผู้รับผิดชอบ', v(meta.owner)],
  ];
  return (
    <div className="label-sheet">
      <LabDocHeader docNo="FR-QP-0012" />
      <div className="lbl-band">ป้ายบ่งชี้เครื่องมือในห้องปฏิบัติการ</div>
      <div className="lbl-body">
        <div className="lbl-fields">
          {fields.map(([k, val, mono], i) => (
            <div className="fr" key={i}><b>{i + 1}. {k}:</b> <span className={mono ? 'val code' : 'val'}>{val}</span></div>
          ))}
        </div>
        <div className="lbl-qr">
          <QRMatrix text={instrumentURL(inst.code)} size={210} />
          <div className="cap">{inst.code}</div>
        </div>
      </div>
      <div className="lbl-foot">(เอกสารสำเนาอิเล็กทรอนิกส์ถูกควบคุมให้เป็นปัจจุบันเมื่ออยู่บนเว็บไซต์เท่านั้น)</div>
    </div>
  );
}

function LabelModal({ items, onClose }) {
  const list = Array.isArray(items) ? items : [items];
  const [size, setSize] = useState('full');
  const [zoom, setZoom] = useState(1);

  const setPreset = (k) => { setSize(k); setZoom(LBL_SIZES.find(s => s.key === k).z); };
  const nudge = (d) => { setSize(''); setZoom(z => Math.min(1.3, Math.max(0.35, +(z + d).toFixed(2)))); };

  const doPrint = () => {
    document.body.classList.add('printing-label');
    const cleanup = () => { document.body.classList.remove('printing-label'); window.removeEventListener('afterprint', cleanup); };
    window.addEventListener('afterprint', cleanup);
    setTimeout(() => window.print(), 60);
  };

  return ReactDOM.createPortal((
    <div id="label-print">
      <div className="scrim" onClick={onClose} />
      <div className="label-toolbar">
        <span style={{ fontSize: 12.5, color: 'var(--ink-3)', fontWeight: 600, paddingLeft: 4 }}>{list.length} ป้าย</span>
        <div className="seg">
          {LBL_SIZES.map(s => <button key={s.key} className={size === s.key ? 'on' : ''} onClick={() => setPreset(s.key)}>{s.label}</button>)}
        </div>
        <div className="seg">
          <button onClick={() => nudge(-0.06)} title="ลดขนาด">−</button>
          <button style={{ pointerEvents: 'none', minWidth: 46, fontFamily: 'var(--mono)' }}>{Math.round(zoom * 100)}%</button>
          <button onClick={() => nudge(0.06)} title="เพิ่มขนาด">+</button>
        </div>
        <button className="btn btn-sm" onClick={onClose}><I.close size={15} /> ปิด</button>
        <button className="btn btn-primary btn-sm" onClick={doPrint}><I.qr size={15} /> พิมพ์</button>
      </div>

      <div className="label-stack">
        {list.map((inst, i) => (
          <div className="label-page" key={inst.code || i} style={{ '--lblz': zoom }}>
            <LabelSheet inst={inst} />
          </div>
        ))}
      </div>
    </div>
  ), document.body);
}
window.LabelModal = LabelModal;
window.LabelSheet = LabelSheet;