/* Modals — add purchase, add issue */

const { useState: useState3, useRef: useRef3, useEffect: useEffect3 } = React;

function todayISO() {
  return new Date().toISOString().slice(0, 10); // วันที่จริงวันนี้ (ไม่ hardcode)
}

function ProductPicker({ value, onChange, products }) {
  const [open, setOpen] = useState3(false);
  const wrapRef = useRef3(null);
  useEffect3(() => {
    if (!open) return;
    function onDocClick(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    }
    document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, [open]);

  const items = products.filter(p => p.active !== false)
    .slice()
    .sort((a, b) => a.sku.localeCompare(b.sku, 'en', { numeric: true }));
  const maxSku  = items.reduce((m, p) => Math.max(m, p.sku.length), 0);
  const maxName = items.reduce((m, p) => Math.max(m, p.name.length), 0);
  const sel = items.find(p => p.id === value) || items[0];

  const Row = ({ p, isSelected }) => (
    <div className={"pp-row" + (isSelected ? " is-selected" : "")}>
      <div className="pp-col-sku">{p.sku}</div>
      <div className="pp-sep">|</div>
      <div className="pp-col-name">{p.name}</div>
      <div className="pp-sep">|</div>
      <div className="pp-col-stock">
        <span className="pp-stock-label">คงเหลือ</span>
        <span className="pp-stock-num mono">{p.stock}</span>
        <span className="pp-stock-unit">{p.unit}</span>
      </div>
    </div>
  );

  return (
    <div className={"pp-wrap" + (open ? " is-open" : "")} ref={wrapRef}
         style={{'--pp-sku-w': maxSku + 'ch', '--pp-name-w': (maxName + 4) + 'ch'}}>
      <button type="button" className="pp-trigger" onClick={() => setOpen(o => !o)}>
        {sel ? <Row p={sel} isSelected={false}/> : <span style={{color: 'var(--text-3)'}}>เลือกสินค้า…</span>}
        <span className="pp-caret" aria-hidden="true">
          <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
      {open && (
        <div className="pp-listbox" role="listbox">
          {items.map(p => (
            <button key={p.id} type="button" role="option"
                    className={"pp-option" + (p.id === value ? " is-selected" : "")}
                    onClick={() => { onChange(p.id); setOpen(false); }}>
              <Row p={p} isSelected={p.id === value}/>
            </button>
          ))}
          {items.length === 0 && <div className="pp-empty">ไม่มีสินค้า</div>}
        </div>
      )}
    </div>
  );
}

function PurchaseModal({ onClose, onSave, products, suppliers }) {
  const [pid, setPid]           = useState3(products[0]?.id || '');
  const [qty, setQty]           = useState3(6);
  const [price, setPrice]       = useState3(products[0]?.price || 0);
  const [supplier, setSupplier] = useState3(suppliers[0] || '');
  const [date, setDate]         = useState3(todayISO());
  const [ref, setRef]           = useState3('PO-' + Math.floor(Math.random() * 9000 + 1000));
  const [note, setNote]         = useState3('');

  const sel = products.find(p => p.id === pid);

  function submit() {
    if (!pid || qty < 1) return;
    onSave({ date, pid, qty: Number(qty), price: Number(price), supplier, ref, note });
    onClose();
  }

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <span className="pill pill-green">{I.arrow_in}</span>
          <h3 style={{marginLeft: 10}}>บันทึกซื้อหมึกเข้า</h3>
          <button className="btn btn-ghost btn-icon" style={{marginLeft: 'auto'}} onClick={onClose}>{I.close}</button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>สินค้า</label>
            <ProductPicker value={pid} products={products} onChange={id => { setPid(id); const p = products.find(pp => pp.id === id); if (p) setPrice(p.price); }}/>
          </div>
          <div className="field-row">
            <div className="field">
              <label>วันที่</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)}/>
            </div>
            <div className="field">
              <label>เลขที่ PO / อ้างอิง</label>
              <input value={ref} onChange={e => setRef(e.target.value)} placeholder="PO-2605-XXX"/>
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>จำนวน ({sel?.unit || ''})</label>
              <input type="number" min="1" value={qty} onChange={e => setQty(e.target.value)}/>
            </div>
            <div className="field">
              <label>ราคาต่อหน่วย (฿)</label>
              <input type="number" min="0" value={price} onChange={e => setPrice(e.target.value)}/>
            </div>
          </div>
          <div className="field">
            <label>Supplier</label>
            <select value={supplier} onChange={e => setSupplier(e.target.value)}>
              {suppliers.map(s => <option key={s} value={s}>{s}</option>)}
            </select>
          </div>
          <div className="field" style={{marginBottom: 0}}>
            <label>หมายเหตุ (ถ้ามี)</label>
            <input value={note} onChange={e => setNote(e.target.value)} placeholder="เช่น สั่งซื้อด่วน"/>
          </div>
          <div className="field-hint" style={{marginTop: 10}}>
            ยอดรวม: <span className="mono fw-600">฿{fmtMoney((qty || 0) * (price || 0))}</span>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={submit}>บันทึกเข้าสต็อก</button>
        </div>
      </div>
    </div>
  );
}

function IssueModal({ onClose, onSave, products, departments, users }) {
  const [pid, setPid]     = useState3(products[0]?.id || '');
  const [qty, setQty]     = useState3(1);
  const [dept, setDept]   = useState3(departments[0]?.id || '');
  const [userId, setUserId] = useState3(users[0]?.id || '');
  const [date, setDate]   = useState3(todayISO());
  const [note, setNote]   = useState3('');

  // FIFO preview จาก server — แทนการคำนวณ client-side
  const [preview, setPreview] = useState3({ breakdown: [], totalCost: 0, totalQty: 0, overdraw: false });
  useEffect3(() => {
    const n = Number(qty);
    if (!pid || n <= 0) { setPreview({ breakdown: [], totalCost: 0, totalQty: 0, overdraw: false }); return; }
    apiGet(`/api/issues/preview?pid=${pid}&qty=${n}`)
      .then(d => setPreview(d))
      .catch(() => {});
  }, [pid, qty]);

  const sel     = products.find(p => p.id === pid);
  const selUser = users.find(u => u.id === userId);
  const overdraw = preview.overdraw;

  function onUserChange(e) {
    const id = Number(e.target.value);
    setUserId(id);
    const u = users.find(u => u.id === id);
    if (u && u.defaultDept) setDept(u.defaultDept);
  }

  function submit() {
    if (!pid || qty < 1) return;
    onSave({ date, pid, qty: Number(qty), dept, user: selUser?.id ?? null, note });
    onClose();
  }

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <span className="pill pill-blue">{I.arrow_out}</span>
          <h3 style={{marginLeft: 10}}>บันทึกเบิกหมึกออก</h3>
          <button className="btn btn-ghost btn-icon" style={{marginLeft: 'auto'}} onClick={onClose}>{I.close}</button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>สินค้า</label>
            <ProductPicker value={pid} products={products} onChange={setPid}/>
            {sel && (
              <div className="field-hint">
                คงเหลือปัจจุบัน: <span className="mono fw-600">{sel.stock}</span> {sel.unit}
                {sel.stock < sel.min && <span className="pill pill-amber" style={{marginLeft: 8}}>ใกล้หมด</span>}
              </div>
            )}
          </div>
          <div className="field-row">
            <div className="field">
              <label>วันที่เบิก</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)}/>
            </div>
            <div className="field">
              <label>จำนวน ({sel?.unit || ''})</label>
              <input type="number" min="1" value={qty} onChange={e => setQty(e.target.value)}/>
              {overdraw && (
                <div className="field-hint" style={{color: 'var(--red)'}}>
                  ⚠ จำนวนเกินสต็อกที่มี ({sel?.stock || 0} {sel?.unit || ''})
                </div>
              )}
            </div>
          </div>

          {/* FIFO breakdown preview จาก server */}
          {qty > 0 && preview.breakdown.length > 0 && (
            <div className="field" style={{padding: 12, background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)'}}>
              <div className="text-xs muted fw-600" style={{marginBottom: 8}}>📋 FIFO — เบิกจาก lot ที่ซื้อก่อน</div>
              {preview.breakdown.map((b, i) => (
                <div key={i} className="flex-between text-sm" style={{padding: '3px 0'}}>
                  <span className={b.overdraw ? 'text-red' : ''} style={{color: b.overdraw ? 'var(--red)' : 'var(--text-2)'}}>
                    {b.overdraw ? '⚠ เกินสต็อก ' : '• '}
                    <span className="mono">{b.qty}</span> ตลับ × ฿<span className="mono">{fmtMoney(b.price)}</span>
                  </span>
                  <span className="mono fw-500">= ฿{fmtMoney(b.qty * b.price)}</span>
                </div>
              ))}
              <div className="flex-between text-sm fw-600" style={{padding: '6px 0 0', marginTop: 6, borderTop: '1px solid var(--border)'}}>
                <span>ต้นทุนรวม (FIFO)</span>
                <span className="mono" style={{color: 'var(--ink)'}}>฿{fmtMoney(preview.totalCost)}</span>
              </div>
            </div>
          )}

          <div className="field">
            <label>สาขา/หน่วยงานที่เบิก</label>
            <select value={dept} onChange={e => setDept(e.target.value)}>
              <optgroup label="สาขา">
                {departments.filter(d => d.kind === 'branch').map(d => (
                  <option key={d.id} value={d.id}>{d.id} — {d.name}</option>
                ))}
              </optgroup>
              <optgroup label="สำนักงานใหญ่ (H.O.)">
                {departments.filter(d => d.kind === 'hq').map(d => (
                  <option key={d.id} value={d.id}>{d.name}</option>
                ))}
              </optgroup>
            </select>
          </div>
          <div className="field">
            <label>ผู้ทำเบิก</label>
            {users.length === 0 ? (
              <div className="field-hint" style={{color: 'var(--amber)', padding: '8px 10px', background: 'var(--amber-bg)', borderRadius: 7}}>
                ยังไม่มีผู้ทำเบิกในระบบ — ไปเพิ่มที่หน้า <span className="fw-600">ตั้งค่า › ผู้ทำเบิก</span>
              </div>
            ) : (
              <select value={userId} onChange={onUserChange}>
                {users.map(u => (
                  <option key={u.id} value={u.id}>
                    {u.name}{u.defaultDept ? ` · ${departments.find(d => d.id === u.defaultDept)?.name || u.defaultDept}` : ''}
                  </option>
                ))}
              </select>
            )}
          </div>
          <div className="field" style={{marginBottom: 0}}>
            <label>หมายเหตุ / งานที่ใช้</label>
            <input value={note} onChange={e => setNote(e.target.value)} placeholder="เช่น พิมพ์รายงานประจำเดือน"/>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={submit} disabled={users.length === 0 || overdraw}>
            บันทึกเบิกออก
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PurchaseModal, IssueModal });