/* ============ เจ้าหนี้ (เงินค้างจ่าย) ============ */
function thDateP(iso) { const d = new Date(iso); if (isNaN(d)) return ''; return d.getDate() + ' ' + D.thMonthsShort[d.getMonth()] + ' ' + String((d.getFullYear() + 543) % 100).padStart(2, '0'); }

function PayablesPage({ role, toast }) {
  const canEdit = role === 'owner' || role === 'staff' || role === 'accountant';
  const canDelete = role === 'owner';
  const [, setVer] = useState(0);
  const refresh = () => setVer((v) => v + 1);
  const [modal, setModal] = useState(null);
  const [delRow, setDelRow] = useState(null);
  const todayISO = new Date().toISOString().slice(0, 10);
  const todayTh = thDateP(todayISO);

  const list = D.payables || [];
  const effStatus = (r) => (r.status !== 'paid' && r.dueDateISO && r.dueDateISO < todayISO) ? 'overdue' : r.status;

  const handleSave = async (rec, msg) => {
    const exists = (D.payables || []).some((x) => x.id === rec.id);
    const res = exists ? await API.updatePayable(rec) : await API.addPayable(rec);
    if (res.ok && res.data.ok) {
      const saved = res.data.record || rec; D.payables = D.payables || [];
      const i = D.payables.findIndex((x) => x.id === saved.id);
      if (i >= 0) D.payables[i] = saved; else D.payables.push(saved);
      if (msg) toast(msg);
      setModal(null); refresh();
      return true;
    }
    toast((res.data && (res.data.msg || res.data.error)) || 'บันทึกไม่สำเร็จ', 'warn');
    return false;
  };
  const markPaid = (r) => handleSave({ ...r, status: 'paid', paidDate: todayTh }, 'บันทึกจ่ายแล้ว');
  const doDelete = async () => {
    const res = await API.deletePayable(delRow.id);
    if (res.ok && res.data.ok) { const i = D.payables.findIndex((x) => x.id === delRow.id); if (i >= 0) D.payables.splice(i, 1); toast('ลบแล้ว'); refresh(); }
    else toast('ลบไม่สำเร็จ', 'warn');
    setDelRow(null);
  };

  const outstanding = list.filter((r) => r.status !== 'paid').reduce((a, r) => a + r.amount, 0);
  const overdueN = list.filter((r) => effStatus(r) === 'overdue').length;
  const overdueAmt = list.filter((r) => effStatus(r) === 'overdue').reduce((a, r) => a + r.amount, 0);
  const paidN = list.filter((r) => r.status === 'paid').length;
  const sorted = list.slice().sort((a, b) => (a.status === 'paid' ? 1 : 0) - (b.status === 'paid' ? 1 : 0) || (a.dueDateISO || '').localeCompare(b.dueDateISO || ''));

  return (
    <>
      <div className="page-head">
        <div><div className="pt">เจ้าหนี้ (เงินค้างจ่าย)</div><div className="ps">ติดตามเงินที่ต้องจ่ายผู้ขาย/ผู้รับเหมาช่วง — กำหนดชำระ และยืนยันเมื่อจ่ายแล้ว</div></div>
        <div className="spacer"></div>
        {canEdit && <button className="btn btn-primary" onClick={() => setModal('new')}><Icon name="plus" className="ic" />เพิ่มเจ้าหนี้</button>}
      </div>

      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', marginBottom: 16 }}>
        <Stat label="เจ้าหนี้คงค้างรวม" icon="expense" value={D.baht(outstanding, 0)} sub={list.filter((r) => r.status !== 'paid').length + ' รายการ'} />
        <Stat label="เกินกำหนดชำระ" icon="alert" iconBg={overdueN ? 'var(--danger-bg)' : 'var(--surface-2)'} iconColor={overdueN ? 'var(--danger)' : 'var(--ink-3)'} value={D.baht(overdueAmt, 0)} sub={overdueN + ' รายการ'} />
        <Stat label="จ่ายแล้ว" icon="checkCircle" iconBg="var(--ok-bg)" iconColor="var(--ok)" value={paidN} unit=" รายการ" />
        <Stat label="ทั้งหมด" icon="docs" iconBg="var(--surface-2)" iconColor="var(--ink-2)" value={list.length} unit=" รายการ" />
      </div>

      <div className="card">
        <div className="card-head"><h3>รายการเจ้าหนี้</h3><span className="badge muted" style={{ marginLeft: 'auto' }}>{list.length} รายการ</span></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>ผู้ขาย / เจ้าหนี้</th><th>เลขที่อ้างอิง</th><th>รายการ</th><th className="r">จำนวนเงิน</th><th>กำหนดชำระ</th><th>สถานะ</th>{canEdit && <th className="c sticky-act">จัดการ</th>}</tr></thead>
            <tbody>
              {sorted.map((r) => {
                const st = effStatus(r);
                return (
                  <tr key={r.id}>
                    <td style={{ minWidth: 150 }}><div style={{ fontWeight: 500 }}>{r.vendor}</div><div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.vendorTax}</div></td>
                    <td className="mono" style={{ fontSize: 12.5 }}>{r.refNo}</td>
                    <td style={{ fontSize: 13 }}>{r.description}</td>
                    <td className="r num" style={{ fontWeight: 600 }}>{D.fmt(r.amount)}</td>
                    <td style={{ whiteSpace: 'nowrap' }}>{r.status === 'paid' ? <span style={{ color: 'var(--ink-3)', fontSize: 12.5 }}>จ่ายเมื่อ {r.paidDate}</span> : <span style={{ color: st === 'overdue' ? 'var(--danger)' : 'var(--ink)', fontWeight: 500 }}>{r.dueDate || '—'}</span>}</td>
                    <td><span className={'badge ' + D.payStatusInfo[st].badge}><span className="dot"></span>{D.payStatusInfo[st].label}</span></td>
                    {canEdit && (
                      <td className="c sticky-act">
                        <div style={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
                          {r.status !== 'paid' && <button className="btn btn-primary btn-sm" onClick={() => markPaid(r)}><Icon name="check" className="ic" />จ่ายแล้ว</button>}
                          <button className="x-btn" title="แก้ไข" onClick={() => setModal(r)}><Icon name="edit" size={16} /></button>
                          {canDelete && <button className="x-btn" title="ลบ" style={{ color: 'var(--danger)' }} onClick={() => setDelRow(r)}><Icon name="trash" size={16} /></button>}
                        </div>
                      </td>
                    )}
                  </tr>
                );
              })}
              {list.length === 0 && <tr><td colSpan={canEdit ? 7 : 6} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '26px 12px' }}>ยังไม่มีเจ้าหนี้ — กด “เพิ่มเจ้าหนี้” เพื่อบันทึกเงินที่ต้องจ่าย</td></tr>}
            </tbody>
            {list.length > 0 && <tfoot><tr style={{ background: 'var(--surface-2)', fontWeight: 700 }}>
              <td colSpan="3" style={{ padding: 12 }}>คงค้างรวม</td>
              <td className="r num" style={{ padding: 12, color: 'var(--warn)' }}>{D.fmt(outstanding)}</td>
              <td colSpan="2"></td>{canEdit && <td className="sticky-act"></td>}
            </tr></tfoot>}
          </table>
        </div>
      </div>

      {modal && <PayableModal record={modal === 'new' ? null : modal} onClose={() => setModal(null)} onSave={(rec) => handleSave(rec, modal === 'new' ? 'เพิ่มเจ้าหนี้แล้ว' : 'บันทึกการแก้ไขแล้ว')} />}
      {delRow && (
        <Modal title="ยืนยันการลบ" icon="trash" onClose={() => setDelRow(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setDelRow(null)}>ยกเลิก</button><button className="btn btn-danger" onClick={doDelete}><Icon name="trash" className="ic" />ลบ</button></>}>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>ลบเจ้าหนี้ <b>{delRow.vendor}</b> ยอด <b>{D.baht(delRow.amount)}</b> ใช่หรือไม่?</div>
        </Modal>
      )}
    </>
  );
}

function PayableModal({ record, onClose, onSave }) {
  const r = record || {};
  const [vendor, setVendor] = useState(r.vendor || '');
  const [vendorTax, setVendorTax] = useState(r.vendorTax || '');
  const [refNo, setRefNo] = useState(r.refNo || '');
  const [desc, setDesc] = useState(r.description || '');
  const [amount, setAmount] = useState(r.amount != null ? String(r.amount) : '');
  const [dueISO, setDueISO] = useState(r.dueDateISO || '');
  const [status, setStatus] = useState(r.status || 'unpaid');
  const [sug, setSug] = useState(false);
  const [err, setErr] = useState('');
  const [saving, setSaving] = useState(false);

  const book = React.useMemo(() => {
    const m = new Map();
    (D.payables || []).forEach((x) => { if (x.vendor && !m.has(x.vendor)) m.set(x.vendor, { vendor: x.vendor, vendorTax: x.vendorTax }); });
    (D.docs || []).forEach((x) => { if (x.vendor && !m.has(x.vendor)) m.set(x.vendor, { vendor: x.vendor, vendorTax: x.vendorTax }); });
    return [...m.values()];
  }, []);
  const q = vendor.trim().toLowerCase();
  const sugList = (q ? book.filter((c) => c.vendor.toLowerCase().includes(q) || (c.vendorTax || '').includes(q)) : book).slice(0, 6);

  const save = async () => {
    setErr('');
    if (!vendor.trim()) { setErr('กรุณากรอกชื่อผู้ขาย/เจ้าหนี้'); return; }
    if (!(parseFloat(amount) > 0)) { setErr('กรุณากรอกจำนวนเงิน'); return; }
    setSaving(true);
    await onSave({
      id: r.id || ('AP' + Date.now()),
      vendor: vendor.trim(), vendorTax: vendorTax.trim(), refNo: refNo.trim(), description: desc.trim(),
      amount: parseFloat(amount) || 0, dueDateISO: dueISO, dueDate: dueISO ? thDateP(dueISO) : '',
      status, paidDate: status === 'paid' ? (r.paidDate || thDateP(new Date().toISOString().slice(0, 10))) : null,
    });
    setSaving(false);
  };

  return (
    <Modal title={record ? 'แก้ไขเจ้าหนี้' : 'เพิ่มเจ้าหนี้ (เงินค้างจ่าย)'} icon="expense" onClose={onClose} wide
      footer={<><button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button><button className="btn btn-primary" onClick={save} disabled={saving}><Icon name="check" className="ic" />{saving ? 'กำลังบันทึก…' : 'บันทึก'}</button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
        {err && <div className="callout warn" style={{ padding: '9px 12px' }}><Icon name="alert" className="ic" />{err}</div>}
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
            <Field label="ผู้ขาย / เจ้าหนี้"><input className="input" value={vendor} onFocus={() => setSug(true)} onChange={(e) => { setVendor(e.target.value); setSug(true); }} onBlur={() => setTimeout(() => setSug(false), 160)} placeholder="พิมพ์ชื่อเพื่อค้นหา/เพิ่มใหม่" /></Field>
            <Field label="เลขผู้เสียภาษี"><input className="input mono" value={vendorTax} onChange={(e) => setVendorTax(e.target.value)} placeholder="13 หลัก" /></Field>
          </div>
          {sug && sugList.length > 0 && (
            <div className="card" style={{ position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 6, marginTop: 4, boxShadow: 'var(--shadow-lg)', maxHeight: 220, overflowY: 'auto', padding: 4 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', padding: '6px 10px 4px' }}><Icon name="search" size={12} /> ผู้ขายที่เคยบันทึก</div>
              {sugList.map((c, i) => (
                <button type="button" key={i} onMouseDown={(e) => { e.preventDefault(); setVendor(c.vendor); setVendorTax(c.vendorTax && c.vendorTax !== '—' ? c.vendorTax : ''); setSug(false); }} style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 10px', borderRadius: 8 }}
                  onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-2)'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{c.vendor}</div><div className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{c.vendorTax || '—'}</div>
                </button>
              ))}
            </div>
          )}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12 }}>
          <Field label="เลขที่อ้างอิง/บิล"><input className="input mono" value={refNo} onChange={(e) => setRefNo(e.target.value)} placeholder="เลขที่ใบส่งของ/บิล" /></Field>
          <Field label="รายการ"><input className="input" value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="เช่น ค่าปูน/เหล็ก, งานเทพื้น งวด 2" /></Field>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <Field label="จำนวนเงิน (บาท)"><input className="input right mono" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0.00" /></Field>
          <Field label="กำหนดชำระ"><ThaiDatePicker value={dueISO} onChange={setDueISO} placeholder="เลือกวันครบกำหนด" /></Field>
          <Field label="สถานะ"><select className="select" value={status} onChange={(e) => setStatus(e.target.value)}><option value="unpaid">ค้างจ่าย</option><option value="paid">จ่ายแล้ว</option></select></Field>
        </div>
      </div>
    </Modal>
  );
}

window.PayablesPage = PayablesPage;