// purchases-page.jsx — Закупівлі: вхідні рахунки постачальників (до сплати)
// + прибуткові накладні (надходження). ОЗ-позиції створюють картки в «Майні».
window.DATA.PURCHASE_INVOICES = window.DATA.PURCHASE_INVOICES || [];
window.DATA.GOODS_RECEIPTS = window.DATA.GOODS_RECEIPTS || [];

// Сплачена закупівля → разовий видаток у «Витратах» (id детермінований, без дублів).
window.syncPurchaseExpense = async function (inv) {
  if (!inv || inv.status !== "paid") return;
  const live = window.API && window.API.mode === "live" && window.API.save;
  const expId = "e-pur-" + inv.id;
  const supName = ((window.DATA.SUPPLIERS || []).find(s => s.id === inv.supplier) || {}).name || "Постачальник";
  const patch = {
    cat: "equipment", title: supName + (inv.number ? " · " + inv.number : ""),
    supplier: supName, amount: inv.amount || 0, monthlyAmount: 0, periodicity: "once",
    paid: true, paidDate: inv.paidDate || window.SYS_DATE, note: "Із «Закупівель»",
    receiptUrl: inv.receiptUrl || null,
    vatRate: inv.vatMode === "without" ? 0 : 20, taxInvoice: false,
  };
  const existing = (window.DATA.EXPENSES || []).find(e => e.id === expId);
  if (existing) {
    Object.assign(existing, patch);
    if (live) { try { await window.API.save("expenses", expId, patch); } catch (e) { console.error("[ERP] sync purchase expense:", e); } }
  } else {
    const exp = { id: expId, ...patch, _added: true };
    (window.DATA.EXPENSES || (window.DATA.EXPENSES = [])).push(exp);
    if (live) { try { await window.API.save("expenses", null, exp); } catch (e) { console.error("[ERP] create purchase expense:", e); } }
  }
};

// ── Редактор позицій (рядки) ──
function PurchaseItems({ items, setItems, withKind }) {
  const assetCats = window.ASSET_CATEGORIES || [];
  const setRow = (i, k, v) => setItems(items.map((r, j) => {
    if (j !== i) return r;
    const r2 = { ...r, [k]: v };
    r2.sum = Math.round((Number(r2.qty) || 0) * (Number(r2.price) || 0) * 100) / 100;
    return r2;
  }));
  const addRow = () => setItems([...items, { name: "", qty: 1, unit: "шт", price: "", sum: 0, ...(withKind ? { kind: "material", assetCat: "oz" } : {}) }]);
  const rmRow = (i) => setItems(items.filter((_, j) => j !== i));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 8 }}>
      {items.map((r, i) => (
        <div key={i} style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap", padding: 8, border: "1px solid var(--line, #e6e8eb)", borderRadius: 8 }}>
          <input className="auth-input" style={{ flex: "3 1 180px", minWidth: 0 }} value={r.name} onChange={e => setRow(i, "name", e.target.value)} placeholder="Найменування" />
          <input className="auth-input" style={{ flex: "0 0 64px" }} type="number" inputMode="decimal" value={r.qty} onChange={e => setRow(i, "qty", e.target.value)} placeholder="к-сть" title="Кількість" />
          <input className="auth-input" style={{ flex: "0 0 60px" }} value={r.unit} onChange={e => setRow(i, "unit", e.target.value)} placeholder="од." title="Одиниця" />
          <input className="auth-input" style={{ flex: "0 0 96px" }} type="number" inputMode="decimal" value={r.price} onChange={e => setRow(i, "price", e.target.value)} placeholder="ціна ₴" title="Ціна за одиницю" />
          <span style={{ flex: "0 0 96px", textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 600, fontSize: 13 }}>{window.formatMoney(r.sum || 0)} ₴</span>
          {withKind && (
            <select className="auth-input" style={{ flex: "0 0 120px" }} value={r.kind} onChange={e => setRow(i, "kind", e.target.value)} title="Тип позиції">
              <option value="asset">Майно (ОЗ)</option>
              <option value="material">Матеріали</option>
              <option value="service">Послуга</option>
            </select>
          )}
          {withKind && r.kind === "asset" && (
            <select className="auth-input" style={{ flex: "0 0 130px" }} value={r.assetCat || "oz"} onChange={e => setRow(i, "assetCat", e.target.value)} title="Категорія майна">
              {assetCats.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
            </select>
          )}
          <button type="button" className="btn btn-ghost btn-sm" style={{ color: "var(--late)" }} title="Прибрати позицію" onClick={() => rmRow(i)}>×</button>
        </div>
      ))}
      <button type="button" className="btn btn-sm" onClick={addRow}><window.Icon.Plus /> Додати позицію</button>
    </div>
  );
}

function itemsTotal(items) { return (items || []).reduce((s, r) => s + (Number(r.sum) || 0), 0); }

// ── Новий / редагування рахунку постачальника ──
function NewPurchaseInvoiceModal({ onClose, onSaved, editing }) {
  const SYS = window.SYS_DATE || "2026-05-29";
  const suppliers = window.DATA.SUPPLIERS || [];
  const addDays = (iso, n) => { try { const d = new Date(iso + "T00:00:00"); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10); } catch (_) { return iso; } };
  const isEdit = !!editing;
  const [f, setF] = React.useState(isEdit ? {
    supplier: editing.supplier || "", number: editing.number || "", date: editing.date || SYS,
    dueDate: editing.dueDate || SYS, vatMode: editing.vatMode || "with", status: editing.status || "to_pay",
    note: editing.note || "", receiptUrl: editing.receiptUrl || "",
  } : {
    supplier: "", number: "", date: SYS, dueDate: addDays(SYS, 7), vatMode: "with", status: "to_pay", note: "", receiptUrl: "",
  });
  const [items, setItems] = React.useState(isEdit && Array.isArray(editing.items) ? editing.items.map(x => ({ ...x })) : [{ name: "", qty: 1, unit: "шт", price: "", sum: 0 }]);
  const [busy, setBusy] = React.useState(false);
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  React.useEffect(() => { const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]);

  const amount = itemsTotal(items);
  const vat = f.vatMode === "with" ? Math.round(amount * 20 / 120 * 100) / 100 : 0;
  const valid = f.supplier && amount > 0 && items.some(r => r.name.trim());

  const save = async () => {
    if (!valid || busy) return;
    const live = window.API && window.API.mode === "live" && window.API.save;
    const cleanItems = items.filter(r => r.name.trim()).map(r => ({ name: r.name.trim(), qty: Number(r.qty) || 0, unit: r.unit || "шт", price: Number(r.price) || 0, sum: Number(r.sum) || 0 }));
    const patch = {
      supplier: f.supplier, number: f.number.trim(), date: f.date, dueDate: f.dueDate || f.date,
      items: cleanItems, amount, vatMode: f.vatMode, vat, status: f.status,
      paidDate: f.status === "paid" ? (isEdit && editing.paidDate ? editing.paidDate : SYS) : null,
      note: f.note.trim() || null, receiptUrl: f.receiptUrl.trim() || null,
    };
    if (isEdit) { Object.assign(editing, patch); } else { patch.id = "pin-" + Date.now(); patch.received = false; window.DATA.PURCHASE_INVOICES.push(patch); }
    if (live) {
      setBusy(true);
      try { await window.API.save("purchase-invoices", isEdit ? editing.id : null, patch); }
      catch (e) { console.error("[ERP] purchase invoice save:", e); alert("Не вдалося зберегти рахунок на сервері."); }
    }
    await window.syncPurchaseExpense(isEdit ? editing : patch);  // якщо сплачено → у «Витрати»
    onSaved && onSaved(); onClose();
  };

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <form className="auth-card" style={{ width: "min(720px, 95vw)", maxWidth: 720, margin: "4vh auto", maxHeight: "90vh", overflow: "auto" }}
            onClick={e => e.stopPropagation()} onSubmit={e => { e.preventDefault(); save(); }}>
        <div className="auth-title">{isEdit ? "Редагувати рахунок постачальника" : "Рахунок постачальника (до сплати)"}</div>

        <label className="auth-label">Постачальник</label>
        <select className="auth-input" value={f.supplier} onChange={e => set("supplier", e.target.value)} autoFocus>
          <option value="">— оберіть постачальника —</option>
          {suppliers.map(s => <option key={s.id} value={s.id}>{s.name}{s.kind === "vendor" ? " · постачальник" : ""}</option>)}
        </select>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 150px" }}><label className="auth-label">№ рахунку (їхній)</label><input className="auth-input" value={f.number} onChange={e => set("number", e.target.value)} placeholder="напр. РФ-1024" /></div>
          <div style={{ flex: "1 1 130px" }}><label className="auth-label">Дата</label><input className="auth-input" type="date" value={f.date} onChange={e => set("date", e.target.value)} /></div>
          <div style={{ flex: "1 1 130px" }}><label className="auth-label">Сплатити до</label><input className="auth-input" type="date" value={f.dueDate} onChange={e => set("dueDate", e.target.value)} /></div>
        </div>

        <label className="auth-label" style={{ marginTop: 10 }}>Позиції</label>
        <PurchaseItems items={items} setItems={setItems} />

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end" }}>
          <div style={{ flex: "1 1 150px" }}>
            <label className="auth-label">ПДВ</label>
            <select className="auth-input" value={f.vatMode} onChange={e => set("vatMode", e.target.value)}>
              <option value="with">У т.ч. ПДВ 20%</option>
              <option value="without">Без ПДВ</option>
            </select>
          </div>
          <div style={{ flex: "1 1 130px" }}>
            <label className="auth-label">Статус</label>
            <select className="auth-input" value={f.status} onChange={e => set("status", e.target.value)}>
              <option value="to_pay">До сплати</option>
              <option value="paid">Сплачено</option>
            </select>
          </div>
          <div style={{ flex: "2 1 200px", textAlign: "right", fontSize: 14 }}>
            <div style={{ color: "var(--ink-3)" }}>Разом: <b style={{ color: "var(--ink)" }}>{window.formatMoney(amount)} ₴</b></div>
            {f.vatMode === "with" && <div style={{ fontSize: 12, color: "var(--ink-3)" }}>у т.ч. ПДВ {window.formatMoney(vat)} ₴</div>}
          </div>
        </div>

        <label className="auth-label">Посилання на рахунок/чек</label>
        <input className="auth-input" type="url" value={f.receiptUrl} onChange={e => set("receiptUrl", e.target.value)} placeholder="https://… (скан рахунку)" />
        <label className="auth-label">Нотатка</label>
        <input className="auth-input" value={f.note} onChange={e => set("note", e.target.value)} placeholder="необов'язково" />

        {!valid && <div className="auth-hint">Оберіть постачальника й додайте хоча б одну позицію з ціною.</div>}
        <button className="btn btn-primary auth-submit" type="submit" disabled={!valid || busy}>{busy ? "Збереження…" : (isEdit ? "Зберегти зміни" : "Створити рахунок")}</button>
        <button className="btn auth-submit" type="button" style={{ marginTop: 8 }} onClick={onClose} disabled={busy}>Скасувати</button>
      </form>
    </div>
  );
}

// ── Нове надходження (прибуткова накладна) ──
function NewGoodsReceiptModal({ onClose, onSaved, fromInvoice }) {
  const SYS = window.SYS_DATE || "2026-05-29";
  const suppliers = window.DATA.SUPPLIERS || [];
  const invoices = window.DATA.PURCHASE_INVOICES || [];
  const [f, setF] = React.useState({
    supplier: fromInvoice ? fromInvoice.supplier : "", invoice: fromInvoice ? fromInvoice.id : "",
    number: "", date: SYS, note: "", receiptUrl: "",
  });
  const [items, setItems] = React.useState(
    fromInvoice && Array.isArray(fromInvoice.items)
      ? fromInvoice.items.map(x => ({ ...x, kind: "asset", assetCat: "oz" }))
      : [{ name: "", qty: 1, unit: "шт", price: "", sum: 0, kind: "asset", assetCat: "oz" }]
  );
  const [busy, setBusy] = React.useState(false);
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  React.useEffect(() => { const onKey = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]);

  const supplierInvoices = invoices.filter(i => !f.supplier || i.supplier === f.supplier);
  const pickInvoice = (id) => {
    const inv = invoices.find(x => x.id === id);
    if (inv && Array.isArray(inv.items)) setItems(inv.items.map(x => ({ ...x, kind: "asset", assetCat: "oz" })));
    setF(p => ({ ...p, invoice: id, supplier: inv ? inv.supplier : p.supplier }));
  };
  const amount = itemsTotal(items);
  const valid = f.supplier && amount > 0 && items.some(r => r.name.trim());

  const save = async () => {
    if (!valid || busy) return;
    const live = window.API && window.API.mode === "live" && window.API.save;
    if (live) setBusy(true);
    try {
      const cleanItems = [];
      for (const r of items.filter(x => x.name.trim())) {
        const it = { name: r.name.trim(), qty: Number(r.qty) || 0, unit: r.unit || "шт", price: Number(r.price) || 0, sum: Number(r.sum) || 0, kind: r.kind || "material" };
        // ОЗ-позиція → створюємо картку в «Майні»
        if (it.kind === "asset") {
          const asset = {
            id: "as-" + Date.now() + "-" + cleanItems.length, cat: r.assetCat || "oz", name: it.name,
            cost: it.sum, bought: f.date, status: "active", lifeMonths: null, subscription: false,
          };
          window.DATA.ASSETS && window.DATA.ASSETS.push(asset);
          if (live) {
            try { const saved = await window.API.post("/assets", asset); if (saved && saved.id) { it.assetId = saved.id; if (saved.invNo) it.assetInvNo = saved.invNo; } }
            catch (e) { console.error("[ERP] create asset from receipt:", e); }
          }
        }
        cleanItems.push(it);
      }
      const rec = {
        id: "grn-" + Date.now(), supplier: f.supplier, invoice: f.invoice || null,
        number: f.number.trim(), date: f.date, items: cleanItems, amount,
        note: f.note.trim() || null, receiptUrl: f.receiptUrl.trim() || null,
      };
      window.DATA.GOODS_RECEIPTS.push(rec);
      if (live) await window.API.save("goods-receipts", null, rec);
      // позначити рахунок оформленим
      if (f.invoice) {
        const inv = invoices.find(x => x.id === f.invoice);
        if (inv) { inv.received = true; if (live) await window.API.save("purchase-invoices", inv.id, { received: true }); }
      }
    } catch (e) { console.error("[ERP] goods receipt save:", e); alert("Не вдалося зберегти надходження на сервері."); }
    onSaved && onSaved(); onClose();
  };

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <form className="auth-card" style={{ width: "min(760px, 95vw)", maxWidth: 760, margin: "4vh auto", maxHeight: "90vh", overflow: "auto" }}
            onClick={e => e.stopPropagation()} onSubmit={e => { e.preventDefault(); save(); }}>
        <div className="auth-title">Надходження (прибуткова накладна)</div>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 220px" }}>
            <label className="auth-label">Постачальник</label>
            <select className="auth-input" value={f.supplier} onChange={e => set("supplier", e.target.value)}>
              <option value="">— оберіть —</option>
              {suppliers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </div>
          <div style={{ flex: "1 1 220px" }}>
            <label className="auth-label">На підставі рахунку (за потреби)</label>
            <select className="auth-input" value={f.invoice} onChange={e => pickInvoice(e.target.value)}>
              <option value="">— без рахунку —</option>
              {supplierInvoices.map(i => <option key={i.id} value={i.id}>№ {i.number || i.id} · {window.formatMoney(i.amount)} ₴</option>)}
            </select>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 150px" }}><label className="auth-label">№ накладної (їхньої)</label><input className="auth-input" value={f.number} onChange={e => set("number", e.target.value)} placeholder="напр. ВН-558" /></div>
          <div style={{ flex: "1 1 130px" }}><label className="auth-label">Дата</label><input className="auth-input" type="date" value={f.date} onChange={e => set("date", e.target.value)} /></div>
        </div>

        <label className="auth-label" style={{ marginTop: 10 }}>Позиції <span style={{ color: "var(--ink-3)", fontWeight: 400 }}>· ОЗ створить картку в «Майні» з інв. номером</span></label>
        <PurchaseItems items={items} setItems={setItems} withKind />

        <div style={{ textAlign: "right", fontSize: 14, margin: "4px 0 8px" }}>Разом: <b>{window.formatMoney(amount)} ₴</b></div>

        <label className="auth-label">Посилання на видаткову накладну постачальника</label>
        <input className="auth-input" type="url" value={f.receiptUrl} onChange={e => set("receiptUrl", e.target.value)} placeholder="https://… (скан накладної від постачальника)" />
        <label className="auth-label">Нотатка</label>
        <input className="auth-input" value={f.note} onChange={e => set("note", e.target.value)} placeholder="необов'язково" />

        {!valid && <div className="auth-hint">Оберіть постачальника й додайте позиції.</div>}
        <button className="btn btn-primary auth-submit" type="submit" disabled={!valid || busy}>{busy ? "Збереження…" : "Оформити надходження"}</button>
        <button className="btn auth-submit" type="button" style={{ marginTop: 8 }} onClick={onClose} disabled={busy}>Скасувати</button>
      </form>
    </div>
  );
}

// ── Сторінка «Закупівлі» ──
function PurchasesPage({ role }) {
  const invoices = window.DATA.PURCHASE_INVOICES || [];
  const receipts = window.DATA.GOODS_RECEIPTS || [];
  const today = window.SYS_DATE || "2026-05-29";
  const [tab, setTab] = React.useState("invoices");
  const [openInv, setOpenInv] = React.useState(false);      // false | "new" | invoice
  const [openRec, setOpenRec] = React.useState(false);      // false | "new" | {fromInvoice}
  const [, tick] = React.useState(0);
  const canEdit = role === "director" || role === "accountant";
  const supName = (id) => (window.DATA.SUPPLIERS.find(s => s.id === id) || {}).name || "—";

  // — Привʼязка оплачених рахунків до «Грошей» (видаток з обраного рахунку, 1 раз) —
  const live = !!(window.API && window.API.mode === "live");
  const [accounts, setAccounts] = React.useState([]);
  const [cashOps, setCashOps] = React.useState([]);
  const [payAcct, setPayAcct] = React.useState("cash");
  const [busyPay, setBusyPay] = React.useState(false);
  const reloadOps = React.useCallback(() => {
    if (!live) return Promise.resolve();
    return window.API.list("cash-ops").then(r => setCashOps(r || [])).catch(() => {});
  }, [live]);
  React.useEffect(() => {
    if (!live) return;
    window.API.list("cash-accounts").then(r => { setAccounts(r || []); const tov = (r || []).find(a => a.entity === "tov"); if (tov) setPayAcct(tov.id); }).catch(() => {});
    reloadOps();
  }, [live, reloadOps]);
  const moneyAccounts = [{ id: null, label: "Готівка", entity: "cash" }, ...accounts];
  const acctVal = (id) => id === null ? "cash" : id;
  const acctToId = (v) => v === "cash" ? null : v;
  const postedRefs = new Set(cashOps.map(o => o.ref).filter(Boolean));
  const isPosted = (inv) => postedRefs.has("pi:" + inv.id);
  const postToMoney = async (inv) => {
    if (!live) { alert("Доступно лише в робочому режимі (з бекендом)."); return; }
    if (isPosted(inv)) { alert("Цей рахунок уже проведено в гроші."); return; }
    const acctId = acctToId(payAcct);
    const acctLabel = (moneyAccounts.find(a => (a.id || null) === (acctId || null)) || {}).label || "рахунок";
    if (!confirm(`Провести оплату ${window.formatMoney(inv.amount)} ₴ постачальнику «${supName(inv.supplier)}» як видаток з «${acctLabel}»?`)) return;
    setBusyPay(true);
    try {
      await window.API.post("/cash-ops", { date: inv.paidDate || today, type: "out", category: "supplier", amount: inv.amount, counterparty: supName(inv.supplier), note: "Закупівля № " + (inv.number || ""), account: acctId, ref: "pi:" + inv.id });
      await reloadOps();
      alert("Проведено в гроші — баланс рахунку зменшено.");
    } catch (e) { alert("Не вдалося провести: " + (e.message || e)); }
    setBusyPay(false);
  };

  const toPay = invoices.filter(i => i.status !== "paid");
  const overdue = toPay.filter(i => i.dueDate && i.dueDate < today);
  const toPaySum = toPay.reduce((s, i) => s + (i.amount || 0), 0);
  const paidSum = invoices.filter(i => i.status === "paid").reduce((s, i) => s + (i.amount || 0), 0);

  const markPaid = async (inv) => {
    if (!confirm(`Позначити рахунок ${inv.number || ""} як сплачений?`)) return;
    inv.status = "paid"; inv.paidDate = today; tick(x => x + 1);
    if (window.API && window.API.mode === "live" && window.API.save) {
      try { await window.API.save("purchase-invoices", inv.id, { status: "paid", paidDate: today }); }
      catch (e) { console.error(e); alert("Не вдалося зберегти на сервері."); }
    }
    await window.syncPurchaseExpense(inv);  // → у «Витрати»
  };
  const delInv = async (inv) => {
    if (!confirm(`Видалити рахунок ${inv.number || ""}? Дію не скасувати.`)) return;
    const a = window.DATA.PURCHASE_INVOICES; const i = a.indexOf(inv); if (i >= 0) a.splice(i, 1); tick(x => x + 1);
    if (window.API && window.API.mode === "live" && window.API.del) { try { await window.API.del("/purchase-invoices/" + inv.id); } catch (e) { console.error(e); } }
  };
  const delRec = async (r) => {
    if (!confirm(`Видалити надходження ${r.number || ""}?`)) return;
    const a = window.DATA.GOODS_RECEIPTS; const i = a.indexOf(r); if (i >= 0) a.splice(i, 1); tick(x => x + 1);
    if (window.API && window.API.mode === "live" && window.API.del) { try { await window.API.del("/goods-receipts/" + r.id); } catch (e) { console.error(e); } }
  };

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Закупівлі</h1>
        <div className="page-sub"><span>вхідні рахунки постачальників і надходження (прибуткові накладні)</span></div>
      </div>

      <div className="kpi-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className={`kpi ${overdue.length > 0 ? "is-warn" : ""}`}>
          <div className="kpi-label">До сплати</div>
          <div className="kpi-value">{window.formatMoney(toPaySum)} <span style={{ fontSize: 14, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">{toPay.length} рахунків</div>
        </div>
        <div className={`kpi ${overdue.length > 0 ? "is-warn" : ""}`}>
          <div className="kpi-label">Прострочено</div>
          <div className="kpi-value" style={{ color: overdue.length > 0 ? "var(--late)" : "var(--ink)" }}>{overdue.length}</div>
          <div className="kpi-sub">{window.formatMoney(overdue.reduce((s, i) => s + (i.amount || 0), 0))} ₴</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Сплачено</div>
          <div className="kpi-value" style={{ color: "var(--c-green-deep)" }}>{window.formatMoney(paidSum)} <span style={{ fontSize: 14, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">за весь час</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Надходжень</div>
          <div className="kpi-value">{receipts.length}</div>
          <div className="kpi-sub">прибуткових накладних</div>
        </div>
      </div>

      <div className="toolbar">
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${tab === "invoices" ? "is-active" : ""}`} onClick={() => setTab("invoices")}>Рахунки <span className="filter-pill-count">{invoices.length}</span></button>
          <button className={`filter-pill-item ${tab === "receipts" ? "is-active" : ""}`} onClick={() => setTab("receipts")}>Надходження <span className="filter-pill-count">{receipts.length}</span></button>
        </div>
        {canEdit && tab === "invoices" && (
          <select className="cp-input" style={{ width: 200, marginLeft: "auto" }} value={payAcct} onChange={e => setPayAcct(e.target.value)} title="Рахунок, з якого проводити оплату закупівель у «Гроші»">
            {moneyAccounts.map(a => <option key={a.id || "cash"} value={acctVal(a.id)}>Платити з: {a.label}{a.entity === "tov" ? " (ТОВ)" : a.entity === "fop" ? " (ФОП)" : ""}</option>)}
          </select>
        )}
        {canEdit && tab === "invoices" && <button className="btn btn-primary" style={{ marginLeft: 10 }} onClick={() => setOpenInv("new")}><window.Icon.Plus /> Новий рахунок</button>}
        {canEdit && tab === "receipts" && <button className="btn btn-primary" style={{ marginLeft: "auto" }} onClick={() => setOpenRec("new")}><window.Icon.Plus /> Нове надходження</button>}
      </div>

      {tab === "invoices" && (
        <table className="data-table">
          <thead><tr><th>№ / постачальник</th><th>Позиції</th><th>Дата</th><th>Сплатити до</th><th className="num-col">Сума</th><th>Статус</th><th></th></tr></thead>
          <tbody>
            {invoices.map(inv => {
              const isOver = inv.status !== "paid" && inv.dueDate && inv.dueDate < today;
              return (
                <tr key={inv.id} className={isOver ? "row-overdue" : ""}>
                  <td><div className="cell-name">{supName(inv.supplier)}</div><div className="cell-sub">№ {inv.number || "—"}{inv.received ? " · оприбутковано" : ""}</div></td>
                  <td style={{ fontSize: 12, color: "var(--ink-2)" }}>{(inv.items || []).length} поз. · {(inv.items || []).slice(0, 2).map(x => x.name).join(", ")}{(inv.items || []).length > 2 ? "…" : ""}</td>
                  <td className="td-mono" style={{ fontSize: 12 }}>{window.formatDate(inv.date)}</td>
                  <td className="td-mono" style={{ fontSize: 12 }}>{window.formatDate(inv.dueDate)}{isOver && <div style={{ fontSize: 11, color: "var(--late)", fontWeight: 600 }}>прострочено</div>}</td>
                  <td className="num-col num-bold">{window.formatMoney(inv.amount)} ₴</td>
                  <td>{inv.status === "paid" ? <span className="status-tag tone-live">сплачено</span> : <span className={`status-tag ${isOver ? "tone-warn" : "tone-neutral"}`}>до сплати</span>}
                    {inv.receiptUrl && /^https?:\/\//i.test(inv.receiptUrl) && <div style={{ marginTop: 4 }}><a href={inv.receiptUrl} target="_blank" rel="noopener noreferrer" style={{ fontSize: 11, color: "var(--accent)" }}>📎 чек</a></div>}
                  </td>
                  <td>
                    <div style={{ display: "flex", gap: 6, justifyContent: "flex-end", flexWrap: "wrap" }}>
                      {canEdit && !inv.received && <button className="btn btn-ghost btn-sm" title="Оформити надходження" onClick={() => setOpenRec({ fromInvoice: inv })}>↳ Надходження</button>}
                      {canEdit && inv.status !== "paid" && <button className="btn btn-ghost btn-sm" style={{ color: "var(--c-green-deep)" }} onClick={() => markPaid(inv)}>Оплатити</button>}
                      {canEdit && inv.status === "paid" && (isPosted(inv)
                        ? <span className="status-tag" style={{ fontSize: 11, color: "var(--c-green-deep)" }} title="Проведено в «Гроші»">у грошах ✓</span>
                        : <button className="btn btn-ghost btn-sm" style={{ color: "var(--accent)" }} disabled={busyPay} title="Створити видаток у «Грошах» з обраного рахунку" onClick={() => postToMoney(inv)}>Провести в гроші</button>)}
                      {canEdit && <button className="btn btn-ghost btn-sm" title="Редагувати" onClick={() => setOpenInv(inv)}><window.Ico name="pencil" /></button>}
                      {canEdit && <button className="btn btn-ghost btn-sm" style={{ color: "var(--late)" }} title="Видалити" onClick={() => delInv(inv)}>✕</button>}
                    </div>
                  </td>
                </tr>
              );
            })}
            {invoices.length === 0 && <tr><td colSpan={7} style={{ textAlign: "center", padding: "26px 0", color: "var(--ink-3)" }}>Рахунків постачальників ще немає.</td></tr>}
          </tbody>
        </table>
      )}

      {tab === "receipts" && (
        <table className="data-table">
          <thead><tr><th>№ / постачальник</th><th>Позиції</th><th>Дата</th><th className="num-col">Сума</th><th>Накладна</th><th></th></tr></thead>
          <tbody>
            {receipts.map(r => (
              <tr key={r.id}>
                <td><div className="cell-name">{supName(r.supplier)}</div><div className="cell-sub">№ {r.number || "—"}</div></td>
                <td style={{ fontSize: 12, color: "var(--ink-2)" }}>{(r.items || []).length} поз.{(r.items || []).some(x => x.kind === "asset") ? " · є ОЗ → Майно" : ""}</td>
                <td className="td-mono" style={{ fontSize: 12 }}>{window.formatDate(r.date)}</td>
                <td className="num-col num-bold">{window.formatMoney(r.amount)} ₴</td>
                <td>{r.receiptUrl && /^https?:\/\//i.test(r.receiptUrl) ? <a href={r.receiptUrl} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: "var(--accent)" }}>📎 накладна</a> : <span style={{ color: "var(--ink-4)" }}>—</span>}</td>
                <td><div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>{canEdit && <button className="btn btn-ghost btn-sm" style={{ color: "var(--late)" }} title="Видалити" onClick={() => delRec(r)}>✕</button>}</div></td>
              </tr>
            ))}
            {receipts.length === 0 && <tr><td colSpan={6} style={{ textAlign: "center", padding: "26px 0", color: "var(--ink-3)" }}>Надходжень ще немає.</td></tr>}
          </tbody>
        </table>
      )}

      {openInv && <NewPurchaseInvoiceModal editing={openInv === "new" ? null : openInv} onClose={() => setOpenInv(false)} onSaved={() => tick(x => x + 1)} />}
      {openRec && <NewGoodsReceiptModal fromInvoice={openRec === "new" ? null : openRec.fromInvoice} onClose={() => setOpenRec(false)} onSaved={() => tick(x => x + 1)} />}
    </div>
  );
}

window.PurchasesPage = PurchasesPage;