/* ============================================================
   inventory.jsx — searchable / filterable instrument registry
   ============================================================ */
function InstrumentCard({ inst, onClick }) {
  const s = statusOf(inst);
  return (
    <button className="card enter" onClick={onClick} style={{
      textAlign: 'left', cursor: 'pointer', padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column',
      transition: 'transform .12s, box-shadow .15s, border-color .15s',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow)'; e.currentTarget.style.borderColor = 'var(--ink-4)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; e.currentTarget.style.borderColor = ''; }}>
      <div style={{ height: 4, background: deptColor(inst.dept) }} />
      <div style={{ padding: '15px 17px', flex: 1, display: 'flex', flexDirection: 'column', gap: 11 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
          <span className="kbd-code">{inst.code}</span>
          <Pill status={s} showDays />
        </div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14.5, lineHeight: 1.3, textWrap: 'pretty' }}>{inst.type}</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 3 }}>{inst.brand}{inst.model && inst.model !== '-' ? ` · ${inst.model}` : ''}</div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 4 }}>
          <DeptBadge dept={inst.dept} />
          <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>หมดอายุ {fmtDate(inst.exp)}</span>
        </div>
      </div>
    </button>
  );
}

function ExportMenu({ rows, dept }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);
  const sub = dept !== 'all' ? `แผนก ${(DEPT_META[dept] || {}).short || dept}` : 'ทุกแผนก';
  const fname = 'lab-instruments' + (dept !== 'all' ? '-' + (DEPT_META[dept] || {}).abbr : '');
  return (
    <div style={{ position: 'relative' }} ref={ref}>
      <button className="btn" onClick={() => setOpen(o => !o)}><I.download size={16} /> ส่งออก <I.chevD size={14} /></button>
      {open && (
        <div className="card enter" style={{ position: 'absolute', right: 0, top: 'calc(100% + 6px)', width: 248, zIndex: 30, boxShadow: 'var(--shadow-lg)', padding: 6 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', padding: '6px 10px' }}>ส่งออก {rows.length} รายการ ({sub})</div>
          <button className="menu-item" onClick={() => { window.exportCSV(rows, fname); setOpen(false); }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--ok-soft)', color: 'var(--ok)', display: 'grid', placeItems: 'center', flex: 'none' }}><I.grid size={16} /></span>
            <div><div style={{ fontWeight: 600, fontSize: 13 }}>Excel (.csv)</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>เปิดใน Excel / Google Sheets</div></div>
          </button>
          <button className="menu-item" onClick={() => { window.printReport(rows, { subtitle: sub }); setOpen(false); }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--danger-soft)', color: 'var(--danger)', display: 'grid', placeItems: 'center', flex: 'none' }}><I.list size={16} /></span>
            <div><div style={{ fontWeight: 600, fontSize: 13 }}>PDF / พิมพ์รายงาน</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>ตารางสรุปพร้อมสถานะ</div></div>
          </button>
        </div>
      )}
    </div>
  );
}

function Inventory({ instruments, go, initial, globalDensity, admin, onDelete }) {
  const [q, setQ] = useState('');
  const [dept, setDept] = useState(initial?.dept || 'all');
  const [stat, setStat] = useState('all');
  const [view, setView] = useState('table');
  const [sort, setSort] = useState({ key: 'code', dir: 1 });
  const [density, setDensity] = useState('regular');

  useEffect(() => { if (initial?.dept) setDept(initial.dept); }, [initial]);

  const depts = useMemo(() => [...new Set(instruments.map(i => i.dept))], [instruments]);

  const filtered = useMemo(() => {
    const ql = q.trim().toLowerCase();
    let rows = instruments.filter(i => {
      if (dept !== 'all' && i.dept !== dept) return false;
      if (stat !== 'all' && statusOf(i).key !== stat) return false;
      if (ql) {
        const hay = `${i.code} ${i.type} ${i.brand} ${i.model} ${i.serial} ${i.dept} ${i.typeName}`.toLowerCase();
        if (!hay.includes(ql)) return false;
      }
      return true;
    });
    const { key, dir } = sort;
    rows = [...rows].sort((a, b) => {
      let av, bv;
      if (key === 'status') { av = STATUS_ORDER[statusOf(a).key]; bv = STATUS_ORDER[statusOf(b).key]; }
      else if (key === 'exp') { av = a.exp || 'zzzz'; bv = b.exp || 'zzzz'; }
      else { av = (a[key] || '').toString().toLowerCase(); bv = (b[key] || '').toString().toLowerCase(); }
      return av < bv ? -dir : av > bv ? dir : 0;
    });
    return rows;
  }, [instruments, q, dept, stat, sort]);

  const statCounts = useMemo(() => {
    const c = { all: instruments.length, ok: 0, warn: 0, danger: 0, none: 0 };
    instruments.forEach(i => c[statusOf(i).key]++);
    return c;
  }, [instruments]);

  const toggleSort = (key) => setSort(s => s.key === key ? { key, dir: -s.dir } : { key, dir: 1 });
  const SortHead = ({ k, children, style }) => (
    <th onClick={() => toggleSort(k)} style={style}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        {children}
        <span style={{ opacity: sort.key === k ? 1 : 0.25, fontSize: 10 }}>{sort.key === k ? (sort.dir === 1 ? '▲' : '▼') : '↕'}</span>
      </span>
    </th>
  );

  const monitor = globalDensity === 'monitor';
  const pad = monitor ? '5px 11px' : density === 'compact' ? '7px 14px' : density === 'comfy' ? '16px 14px' : '12px 14px';
  const rowFont = monitor ? 12.5 : 13.5;
  const [selected, setSelected] = useState(() => new Set());
  const [labelItems, setLabelItems] = useState(null);
  const toggleSel = (code) => setSelected(s => { const n = new Set(s); n.has(code) ? n.delete(code) : n.add(code); return n; });
  const filteredCodes = filtered.map(i => i.code);
  const allSel = filteredCodes.length > 0 && filteredCodes.every(c => selected.has(c));
  const toggleAll = () => setSelected(s => { const n = new Set(s); if (allSel) filteredCodes.forEach(c => n.delete(c)); else filteredCodes.forEach(c => n.add(c)); return n; });
  const printSelected = () => { const items = instruments.filter(i => selected.has(i.code)); if (items.length) setLabelItems(items); };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* toolbar */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <div className="search" style={{ flex: '1 1 280px', maxWidth: 440 }}>
          <I.search className="ico" size={17} />
          <input placeholder="ค้นหา รหัส / ชื่อ / ยี่ห้อ / Serial…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div style={{ flex: 1 }} />
        {selected.size > 0 && (
          <button className="btn" onClick={printSelected}><I.qr size={16} /> พิมพ์ป้าย ({selected.size})</button>
        )}
        <ExportMenu rows={filtered} dept={dept} />
        <div className="seg">
          <button className={view === 'table' ? 'on' : ''} onClick={() => setView('table')} title="ตาราง"><I.list size={16} /></button>
          <button className={view === 'grid' ? 'on' : ''} onClick={() => setView('grid')} title="การ์ด"><I.grid size={16} /></button>
        </div>
      </div>

      {/* filters row */}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)', fontSize: 12.5, fontWeight: 600, marginRight: 2 }}><I.building size={15} /> แผนก</span>
        <button className={`chip ${dept === 'all' ? 'on' : ''}`} onClick={() => setDept('all')}>ทุกแผนก</button>
        {depts.map(d => (
          <button key={d} className={`chip ${dept === d ? 'on' : ''}`} onClick={() => setDept(d)}>
            <DeptDot dept={d} />{(DEPT_META[d] || {}).short || d}
          </button>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)', fontSize: 12.5, fontWeight: 600, marginRight: 2 }}><I.shield size={15} /> สถานะ</span>
        {[['all', 'ทั้งหมด'], ['ok', 'ปกติ'], ['warn', 'ใกล้ครบกำหนด'], ['danger', 'เกินกำหนด'], ['none', 'ไม่มีข้อมูล']].map(([k, l]) => (
          <button key={k} className={`chip ${stat === k ? 'on' : ''}`} onClick={() => setStat(k)}>
            {k !== 'all' && <span className="dept-dot" style={{ borderRadius: 99, background: { ok: 'var(--ok)', warn: 'var(--warn)', danger: 'var(--danger)', none: 'var(--none)' }[k] }} />}
            {l} <span className="tnum" style={{ opacity: .6, marginLeft: 2 }}>{statCounts[k]}</span>
          </button>
        ))}
        {view === 'table' && (
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>ความหนาแน่น</span>
            <div className="seg">
              {[['compact', 'แน่น'], ['regular', 'ปกติ'], ['comfy', 'โปร่ง']].map(([k, l]) =>
                <button key={k} className={density === k ? 'on' : ''} onClick={() => setDensity(k)}>{l}</button>)}
            </div>
          </div>
        )}
      </div>

      <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>พบ <b className="tnum" style={{ color: 'var(--ink)' }}>{filtered.length}</b> รายการ{dept !== 'all' ? ` ในแผนก ${(DEPT_META[dept] || {}).short || dept}` : ''}</div>

      {/* table / grid */}
      {filtered.length === 0 ? (
        <div className="card"><EmptyState icon={I.search} title="ไม่พบเครื่องมือที่ตรงกับเงื่อนไข" sub="ลองปรับคำค้นหรือฟิลเตอร์" /></div>
      ) : view === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: monitor ? 'repeat(auto-fill, minmax(196px, 1fr))' : 'repeat(auto-fill, minmax(240px, 1fr))', gap: monitor ? 12 : 16 }}>
          {filtered.map(i => <InstrumentCard key={i.code} inst={i} onClick={() => go('detail', { code: i.code })} />)}
        </div>
      ) : (
        <div className="card tbl-wrap enter">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 38, cursor: 'default' }}><input type="checkbox" className="sel-check" checked={allSel} onChange={toggleAll} title="เลือกทั้งหมด" onClick={e => e.stopPropagation()} /></th>
                <SortHead k="code" style={{ width: 150 }}>รหัสเครื่องมือ</SortHead>
                <SortHead k="type">ชนิด / ยี่ห้อ-รุ่น</SortHead>
                <SortHead k="dept" style={{ width: 150 }}>แผนก</SortHead>
                <th style={{ width: 120 }}>Serial No.</th>
                <SortHead k="exp" style={{ width: 130 }}>วันหมดอายุ</SortHead>
                <SortHead k="status" style={{ width: 150 }}>สถานะ</SortHead>
              </tr>
            </thead>
            <tbody>
              {filtered.map(i => {
                const s = statusOf(i);
                return (
                  <tr key={i.code} onClick={() => go('detail', { code: i.code })}>
                    <td style={{ padding: pad }} onClick={e => e.stopPropagation()}><input type="checkbox" className="sel-check" checked={selected.has(i.code)} onChange={() => toggleSel(i.code)} /></td>
                    <td style={{ padding: pad }}><span className="code" style={{ fontWeight: 600 }}>{i.code}</span></td>
                    <td style={{ padding: pad }}>
                      <div style={{ fontWeight: 600, fontSize: rowFont }}>{i.type}</div>
                      {!monitor && <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{i.brand}{i.model && i.model !== '-' ? ` · ${i.model}` : ''}</div>}
                    </td>
                    <td style={{ padding: pad }}><DeptBadge dept={i.dept} /></td>
                    <td style={{ padding: pad }}><span className="code" style={{ fontSize: 12.5, color: i.serial && i.serial !== '-' ? 'var(--ink-2)' : 'var(--ink-4)' }}>{i.serial && i.serial !== '-' ? i.serial : '—'}</span></td>
                    <td style={{ padding: pad }} className="tnum"><span style={{ fontSize: 13 }}>{fmtDate(i.exp)}</span></td>
                    <td style={{ padding: pad }}><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Pill status={s} showDays />{admin && <button className="btn-icon btn-ghost" title="ลบเครื่องมือ" style={{ color: 'var(--danger)' }} onClick={(e) => { e.stopPropagation(); onDelete && onDelete(i.code); }}><I.trash size={15} /></button>}</div></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
      {labelItems && <LabelModal items={labelItems} onClose={() => setLabelItems(null)} />}
    </div>
  );
}
window.Inventory = Inventory;