// ============================================================================
// Рахунки/видаткові на картці ЗАМОВЛЕННЯ.
//   OrderInvoicesBlock — блок на картці: список виставлених рахунків (read-only
//     усім менеджерам) + кнопка «Згенерувати рахунок» (owner, лише при безналі).
//   OrderInvoiceModal — модалка генерації: picker ФОПа з аналітикою (як у НП),
//     мультитоварний редактор цін (+1% дефолт), реквізити покупця.
// Бекенд: newcrm-авторитет — POST /api/invoices/generate (нумерація+PDF+збереження),
//   дублювання в TG-групу ФОПа. Підключати ПІСЛЯ ui.jsx (Icon/fmtMoney/copyText).
// ============================================================================
const { useState: oiUseState, useEffect: oiUseEffect } = React;

const OI_STATUS = { issued: "Виставлено", paid: "Оплачено", cancelled: "Скасовано" };
const oiFmt = (n) => (Number(n) || 0).toLocaleString("uk-UA");

async function oiJson(url, opts) {
  const r = await fetch(url, opts);
  let j = {}; try { j = await r.json(); } catch {}
  if (!r.ok) throw new Error(j.error || ("HTTP " + r.status));
  return j;
}
// Скачати/переглянути PDF рахунку (Authorization не йде через <a href>, тягнемо blob)
async function oiOpenFile(fileId) {
  const r = await fetch(`/api/invoices/file/${fileId}`);
  if (!r.ok) { let j = {}; try { j = await r.json(); } catch {} throw new Error(j.error || ("HTTP " + r.status)); }
  window.open(URL.createObjectURL(await r.blob()), "_blank");
}

// ── Модалка генерації / РЕДАГУВАННЯ ─────────────────────────────────────────
// invoice — режим редагування виданого рахунку: № і ФОП-ключ НЕ міняються, правляться
// дані (покупець / реквізити продавця-снапшот / позиції) → PDF перегенерується,
// старі файли видаляються, рядок у Sheets оновлюється (PUT /api/invoices/:id, owner).
function OrderInvoiceModal({ order, invoice, onClose, onDone }) {
  const isEdit = !!invoice;
  const [sellers, setSellers] = oiUseState(isEdit ? [] : null);   // null | [] | [{...}]
  const [sellerKey, setSellerKey] = oiUseState("");
  // Реквізити продавця (лише режим редагування — снапшот з рахунку, можна виправити банк тощо)
  const [seller, setSeller] = oiUseState(() => isEdit ? {
    name: invoice.seller_name || "", edrpou: invoice.seller_edrpou || "",
    iban: invoice.seller_iban || "", bank: invoice.seller_bank || "",
  } : null);
  // Позиції: редагування — з рахунку; створення — з товарів замовлення (+1% як у TG-флоу)
  const [items, setItems] = oiUseState(() => isEdit
    ? (invoice.items || []).map(it => ({ title: String(it.title || ""), qty: Number(it.qty) || 1, price: Number(it.price) || 0, sitePrice: 0 }))
    : (order.productsRaw || []).map(p => ({
        title: String(p.title || ""),
        qty: Number(p.quantity) || 1,
        price: Math.round((Number(p.price) || 0) * 1.01 * 100) / 100,
        sitePrice: Number(p.price) || 0,
      }))
  );
  const [buyer, setBuyer] = oiUseState(isEdit ? (invoice.buyer || "") : "");
  const [buyerEdrpou, setBuyerEdrpou] = oiUseState(isEdit ? (invoice.buyer_edrpou || "") : "");
  const [buyerIban, setBuyerIban] = oiUseState(isEdit ? (invoice.buyer_iban || "") : "");
  const [buyerBank, setBuyerBank] = oiUseState(isEdit ? (invoice.buyer_bank || "") : "");
  const [busy, setBusy] = oiUseState(false);
  const [err, setErr] = oiUseState("");

  oiUseEffect(() => {
    if (isEdit) return;   // редагування: ФОП зафіксований, picker не потрібен
    oiJson("/api/invoices/sellers")
      .then(j => {
        const list = j.sellers || [];
        setSellers(list);
        const rec = list.find(s => s.recommended) || list[0];
        if (rec) setSellerKey(rec.id);
      })
      .catch(e => { setSellers([]); setErr(e.message); });
  }, []);

  const setItem = (i, k) => (v) => setItems(p => p.map((it, j) => j === i ? { ...it, [k]: v } : it));
  const delItem = (i) => setItems(p => p.filter((_, j) => j !== i));
  const addItem = () => setItems(p => [...p, { title: "", qty: 1, price: 0, sitePrice: 0 }]);
  const total = items.reduce((s, it) => s + (Number(it.qty) || 0) * (Number(it.price) || 0), 0);

  const lbl = { fontSize: 10, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--fg-muted)", display: "block", marginBottom: 4 };
  const inp = { height: 32, padding: "0 9px", borderRadius: 7, border: "1px solid var(--border-default)", background: "var(--bg-raised)", color: "var(--fg-primary)", fontSize: 12.5, outline: "none", boxSizing: "border-box", fontFamily: "inherit", width: "100%" };
  const mono = { ...inp, fontFamily: "var(--font-mono)" };
  const btn = (variant) => ({
    height: 34, padding: "0 14px", borderRadius: 8, fontFamily: "inherit", fontSize: 12.5, fontWeight: 500, cursor: "pointer",
    border: "1px solid " + (variant === "primary" ? "var(--accent-ring)" : "var(--border-default)"),
    background: variant === "primary" ? "var(--accent-soft)" : "var(--bg-raised)",
    color: variant === "primary" ? "var(--accent)" : "var(--fg-secondary)",
  });

  const generate = () => {
    if (busy) return;
    const goodItems = items
      .map(it => ({ title: String(it.title || "").trim(), qty: Number(it.qty) || 0, price: Number(it.price) || 0 }))
      .filter(it => it.title && it.qty > 0);
    if (!isEdit && !sellerKey) { setErr("Оберіть ФОПа"); return; }
    if (isEdit && !String(seller.name || "").trim()) { setErr("Продавець не може бути порожнім"); return; }
    if (!goodItems.length) { setErr("Додайте хоча б одну позицію з назвою і кількістю"); return; }
    setBusy(true); setErr("");
    const req = isEdit
      ? oiJson(`/api/invoices/${invoice.id}`, {
          method: "PUT", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            items: goodItems,
            buyer: buyer.trim(), buyerEdrpou: buyerEdrpou.trim(), buyerIban: buyerIban.trim(), buyerBank: buyerBank.trim(),
            sellerName: seller.name.trim(), sellerEdrpou: seller.edrpou.trim(), sellerIban: seller.iban.trim(), sellerBank: seller.bank.trim(),
          }),
        })
      : oiJson("/api/invoices/generate", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            sellerKey, orderId: order.id, items: goodItems,
            buyer: buyer.trim(), buyerEdrpou: buyerEdrpou.trim(), buyerIban: buyerIban.trim(), buyerBank: buyerBank.trim(),
          }),
        });
    req.then(r => { setBusy(false); onDone && onDone(r); onClose(); })
      .catch(e => { setBusy(false); setErr(e.message); });
  };

  const sel = (sellers || []).find(s => s.id === sellerKey);

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.6)", zIndex: 95, display: "flex", alignItems: "center", justifyContent: "center",
      padding: "max(14px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom))", boxSizing: "border-box" }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ width: "min(560px, 96vw)", maxHeight: "100%", overflowY: "auto", overflowX: "hidden",
        background: "var(--bg-panel)", borderRadius: 12, border: "1px solid var(--border-default)", boxShadow: "0 24px 64px rgba(0,0,0,.5)", padding: 20, display: "flex", flexDirection: "column", gap: 14, boxSizing: "border-box" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <Icon name={isEdit ? "pencil" : "receipt"} size={16} color="#22D3EE"/>
          <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: "var(--fg-primary)" }}>
            {isEdit ? `Виправити рахунок №${invoice.invoice_no}` : `Згенерувати рахунок · замовлення №${order.id}`}
          </div>
          <button onClick={onClose} style={{ width: 28, height: 28, border: 0, background: "transparent", color: "var(--fg-muted)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="x" size={16}/></button>
        </div>

        {isEdit && (
          <div style={{ fontSize: 11.5, color: "var(--fg-muted)", lineHeight: 1.45, marginTop: -6 }}>
            № рахунку і ФОП не міняються. PDF (рахунок + видаткова) перегенеруються, старі файли видаляться, рядок у таблиці ФОПа оновиться.
          </div>
        )}

        {/* Продавець: редагування — реквізити-снапшот (можна змінити банк/IBAN без зміни №) */}
        {isEdit && (
          <div>
            <span style={lbl}>Продавець (реквізити у документі)</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <input style={inp} value={seller.name} onChange={e => setSeller(s => ({ ...s, name: e.target.value }))} placeholder="ФОП / назва продавця"/>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 8 }}>
                <input style={mono} value={seller.edrpou} onChange={e => setSeller(s => ({ ...s, edrpou: e.target.value }))} placeholder="ЄДРПОУ/ІПН"/>
                <input style={mono} value={seller.iban} onChange={e => setSeller(s => ({ ...s, iban: e.target.value }))} placeholder="IBAN"/>
              </div>
              <input style={inp} value={seller.bank} onChange={e => setSeller(s => ({ ...s, bank: e.target.value }))} placeholder="Банк"/>
            </div>
          </div>
        )}

        {/* Picker ФОПа з аналітикою (як у НП) — лише при СТВОРЕННІ */}
        {!isEdit && (
        <div>
          <span style={lbl}>ФОП-продавець</span>
          {sellers === null && <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Завантажую…</div>}
          {sellers !== null && sellers.length === 0 && (
            <div style={{ fontSize: 12, color: "#FCA5A5" }}>Немає ФОПів із увімкненим виставленням рахунків. Увімкніть у «Відправники НП» → іконка рахунку.</div>
          )}
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {(sellers || []).map(s => {
              const active = s.id === sellerKey;
              return (
                <button key={s.id} onClick={() => setSellerKey(s.id)} style={{
                  textAlign: "left", cursor: "pointer", padding: "10px 12px", borderRadius: 9, fontFamily: "inherit",
                  border: "1px solid " + (active ? "var(--accent-ring)" : "var(--border-default)"),
                  background: active ? "var(--accent-soft)" : "var(--bg-raised)", display: "flex", flexDirection: "column", gap: 6,
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <span style={{ width: 14, height: 14, borderRadius: "50%", flexShrink: 0, border: "2px solid " + (active ? "var(--accent)" : "var(--border-strong)"), background: active ? "var(--accent)" : "transparent" }}/>
                    <span style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-primary)" }}>{s.seller.name || s.label}</span>
                    {s.recommended && <span style={{ fontSize: 9.5, fontWeight: 700, padding: "1px 6px", borderRadius: 999, background: "rgba(110,231,183,.14)", color: "#6EE7B7", border: "1px solid rgba(110,231,183,.35)" }}>РЕКОМЕНДОВАНИЙ</span>}
                    {!s.hasGroup && <span title="Не задана Telegram-група — дублювання в TG не піде" style={{ fontSize: 9.5, color: "#FBBF24" }}>без TG-групи</span>}
                  </div>
                  <div style={{ display: "flex", gap: 14, flexWrap: "wrap", fontSize: 11, color: "var(--fg-muted)", paddingLeft: 22 }}>
                    <span title="Рахунків виставлено за місяць">📄 {s.monthInvoiced.count} · {oiFmt(s.monthInvoiced.sum)} ₴</span>
                    <span title="Надходження на ФОП-рахунок Mono за місяць">💰 {s.monoIncome != null ? (s.monoTruncated ? "≥" : "") + oiFmt(s.monoIncome) + " ₴" : "—"}</span>
                    <span title="НП-відправлень за місяць">📦 {s.monthCount}</span>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
        )}

        {/* Позиції рахунку */}
        <div>
          <div style={{ display: "flex", alignItems: "center", marginBottom: 6 }}>
            <span style={{ ...lbl, marginBottom: 0, flex: 1 }}>{isEdit ? "Позиції" : "Позиції (ціна за замовч. +1%)"}</span>
            <button onClick={addItem} style={{ height: 24, padding: "0 10px", borderRadius: 999, border: "1px dashed var(--border-default)", background: "transparent", color: "var(--fg-secondary)", fontFamily: "inherit", fontSize: 11, cursor: "pointer" }}>+ Позиція</button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {items.map((it, i) => {
              const lineTotal = (Number(it.qty) || 0) * (Number(it.price) || 0);
              return (
                <div key={i} style={{ display: "flex", flexDirection: "column", gap: 5, padding: 9, borderRadius: 8, background: "var(--bg-raised)", border: "1px solid var(--border-subtle)" }}>
                  <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                    <input style={{ ...inp, flex: 1 }} value={it.title} onChange={e => setItem(i, "title")(e.target.value)} placeholder="Найменування товару"/>
                    {items.length > 1 && <button onClick={() => delItem(i)} title="Прибрати" style={{ width: 28, height: 28, border: "1px solid var(--border-default)", borderRadius: 7, background: "transparent", color: "#FCA5A5", cursor: "pointer", flexShrink: 0 }}>×</button>}
                  </div>
                  <div style={{ display: "flex", gap: 6, alignItems: "flex-end" }}>
                    <div style={{ width: 70 }}><span style={lbl}>К-сть</span><input style={mono} value={it.qty} onChange={e => setItem(i, "qty")(e.target.value.replace(/[^\d]/g, ""))} inputMode="numeric"/></div>
                    <div style={{ flex: 1 }}><span style={lbl}>Ціна за шт, ₴</span><input style={mono} value={it.price} onChange={e => setItem(i, "price")(e.target.value.replace(",", "."))} inputMode="decimal"/></div>
                    <div style={{ flex: 1, textAlign: "right" }}>
                      <span style={lbl}>Сума</span>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--fg-primary)", height: 32, display: "flex", alignItems: "center", justifyContent: "flex-end" }}>{oiFmt(Math.round(lineTotal * 100) / 100)} ₴</div>
                    </div>
                  </div>
                  {it.sitePrice > 0 && Math.abs(it.sitePrice * 1.01 - it.price) > 0.011 && (
                    <button onClick={() => setItem(i, "price")(Math.round(it.sitePrice * 1.01 * 100) / 100)} style={{ alignSelf: "flex-start", fontSize: 10.5, color: "var(--accent)", background: "transparent", border: 0, cursor: "pointer", padding: 0 }}>
                      сайт {oiFmt(it.sitePrice)} ₴ → повернути +1% ({oiFmt(Math.round(it.sitePrice * 1.01 * 100) / 100)} ₴)
                    </button>
                  )}
                </div>
              );
            })}
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 8, alignItems: "baseline" }}>
            <span style={{ fontSize: 11, color: "var(--fg-muted)" }}>Разом до сплати</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 20, fontWeight: 700, color: "var(--accent)" }}>{oiFmt(Math.round(total * 100) / 100)} ₴</span>
          </div>
        </div>

        {/* Покупець (необовʼязково) */}
        <div>
          <span style={lbl}>Покупець (необовʼязково — для юр.особи)</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <input style={inp} value={buyer} onChange={e => setBuyer(e.target.value)} placeholder="Назва / ПІБ покупця"/>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 8 }}>
              <input style={mono} value={buyerEdrpou} onChange={e => setBuyerEdrpou(e.target.value)} placeholder="ЄДРПОУ/ІПН"/>
              <input style={mono} value={buyerIban} onChange={e => setBuyerIban(e.target.value)} placeholder="IBAN"/>
            </div>
            <input style={inp} value={buyerBank} onChange={e => setBuyerBank(e.target.value)} placeholder="Банк покупця"/>
          </div>
        </div>

        {err && <div style={{ fontSize: 12, color: "#FCA5A5" }}>{err}</div>}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button onClick={onClose} style={btn()}>Скасувати</button>
          <button onClick={generate} disabled={busy || (!isEdit && !sellerKey)} style={{ ...btn("primary"), opacity: (busy || (!isEdit && !sellerKey)) ? 0.6 : 1 }}>
            {busy ? "Генерую…" : isEdit ? "Зберегти + перегенерувати PDF" : "Згенерувати рахунок + видаткову"}
          </button>
        </div>
        {isEdit
          ? <div style={{ fontSize: 10.5, color: "var(--fg-muted)", textAlign: "right", marginTop: -6 }}>Виправлені PDF також підуть у Telegram-групу ФОПа з позначкою «(виправлений)»</div>
          : sel && sel.hasGroup && <div style={{ fontSize: 10.5, color: "var(--fg-muted)", textAlign: "right", marginTop: -6 }}>PDF також піде в Telegram-групу ФОПа (резервне сховище)</div>}
      </div>
    </div>
  );
}

// ── Блок на картці замовлення ───────────────────────────────────────────────
function OrderInvoicesBlock({ order, isMobile, isOwner }) {
  const [invoices, setInvoices] = oiUseState(null);
  const [modal, setModal] = oiUseState(false);
  const [editInv, setEditInv] = oiUseState(null);   // рахунок у режимі виправлення (owner)
  const [err, setErr] = oiUseState("");
  const isBeznal = /безготівк/i.test(String(order.payment || ""));

  const load = () => {
    oiJson(`/api/invoices?orderId=${order.id}`).then(j => setInvoices(j.invoices || [])).catch(() => setInvoices([]));
  };
  oiUseEffect(load, [order.id]);

  const openFile = (fileId) => { setErr(""); oiOpenFile(fileId).catch(e => setErr(e.message)); };
  const list = invoices || [];
  // Генерація доступна ВСІМ менеджерам (не лише owner) — при безготівковій оплаті
  if (list.length === 0 && !isBeznal) return null;

  const lblStyle = { fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 6 };
  const fileBtn = { height: isMobile ? 28 : 24, padding: "0 9px", display: "inline-flex", alignItems: "center", gap: 4, background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: 6, cursor: "pointer", color: "var(--fg-secondary)", fontSize: 11, fontFamily: "inherit", whiteSpace: "nowrap" };

  return (
    <div>
      <div style={lblStyle}>Рахунки</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {list.map(inv => {
          const invFile = (inv.files || []).find(f => f.kind === "invoice");
          const vydFile = (inv.files || []).find(f => f.kind === "vydatkova");
          const anyAlive = (inv.files || []).some(f => f.alive);
          return (
            <div key={inv.id} style={{ padding: "10px 14px", background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: 8, display: "flex", flexDirection: "column", gap: 6 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", rowGap: 6 }}>
                <Icon name="receipt" size={14} style={{ color: "#22D3EE", flexShrink: 0 }}/>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--fg-primary)", whiteSpace: "nowrap" }}>№{inv.invoice_no}</span>
                <button onClick={() => copyText(String(inv.invoice_no))} title="Скопіювати номер" style={{ height: 22, width: 22, display: "flex", alignItems: "center", justifyContent: "center", background: "transparent", border: "1px solid var(--border-default)", borderRadius: 4, cursor: "pointer", color: "var(--fg-muted)", flexShrink: 0 }}><Icon name="copy" size={11}/></button>
                <span style={{ fontSize: 11, padding: "1px 7px", borderRadius: 999, background: inv.status === "paid" ? "rgba(110,231,183,.12)" : "rgba(148,163,184,.12)", color: inv.status === "paid" ? "#6EE7B7" : "var(--fg-muted)", border: "1px solid var(--border-default)" }}>{OI_STATUS[inv.status] || inv.status}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--fg-primary)", marginLeft: "auto" }}>{oiFmt(inv.total)} ₴</span>
              </div>
              <div style={{ fontSize: 12, color: "var(--fg-secondary)", paddingLeft: 22 }}>{inv.seller_name || inv.seller_key}</div>
              {Array.isArray(inv.items) && inv.items.length > 0 && (
                <div style={{ fontSize: 11.5, color: "var(--fg-muted)", paddingLeft: 22 }}>
                  {inv.items.map(it => it.title + (it.qty > 1 ? " — " + it.qty + " шт" : "")).join(" · ")}
                </div>
              )}
              <div style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: 22, flexWrap: "wrap" }}>
                <span style={{ fontSize: 11, color: "var(--fg-muted)" }}>{inv.doc_date}{inv.created_by ? " · " + inv.created_by : ""}</span>
                <span style={{ flex: 1 }}/>
                {anyAlive ? (
                  <React.Fragment>
                    {invFile && invFile.alive && <button onClick={() => openFile(invFile.id)} style={fileBtn}><Icon name="file-text" size={11}/>Рахунок</button>}
                    {vydFile && vydFile.alive && <button onClick={() => openFile(vydFile.id)} style={fileBtn}><Icon name="file-text" size={11}/>Видаткова</button>}
                  </React.Fragment>
                ) : (
                  <span style={{ fontSize: 10.5, color: "var(--fg-muted)" }} title="PDF видалено (зберігаються ~60 днів), дані рахунку лишились">файли видалено · дані збережено</span>
                )}
                {isOwner && inv.status !== "cancelled" && (
                  <button onClick={() => setEditInv(inv)} title="Виправити дані рахунку (покупець/реквізити/позиції) — № лишається, PDF перегенеруються, старі файли видаляться" style={fileBtn}>
                    <Icon name="pencil" size={11}/>Виправити
                  </button>
                )}
                {invFile && invFile.alive && (
                  <button onClick={() => {
                    // Композер «Пошти» з уже прикріпленим PDF рахунку (+видаткова, якщо жива).
                    // Формат attachments — як у AttachDocPicker: {invoiceId, kind, name, sub}.
                    const attachments = [{ invoiceId: inv.id, kind: "invoice", name: `Рахунок №${inv.invoice_no}`, sub: oiFmt(inv.total) + " ₴" }];
                    if (vydFile && vydFile.alive) attachments.push({ invoiceId: inv.id, kind: "vydatkova", name: `Видаткова №${inv.invoice_no}`, sub: "" });
                    const prefill = {
                      to: order.email && order.email !== "—" ? order.email : "",
                      subject: `Рахунок №${inv.invoice_no} на оплату — замовлення №${order.id}`,
                      order: { order_id: order.id, client: order.client, total: order.total, ttn: (order.ttn && order.ttn.number) || null },
                      body: `<div>Добрий день!</div><div><br/></div><div>Надсилаємо рахунок №${inv.invoice_no} на суму ${oiFmt(inv.total)} грн за замовленням №${order.id}. Рахунок і видаткова — у вкладенні.</div><div><br/></div><div>Дякуємо!</div>`,
                      attachments,
                    };
                    window._mailPendingCompose = prefill;
                    if (window._crmNavigate) window._crmNavigate("mail");
                    if (window._mailCompose) window._mailCompose(prefill);
                  }} title={order.email && order.email !== "—" ? `Надіслати рахунок на ${order.email}` : "Надіслати рахунок на email (адресу впишеш у композері)"} style={fileBtn}>
                    <Icon name="mail" size={11}/>На email
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>
      {err && <div style={{ fontSize: 11.5, color: "#FCA5A5", marginTop: 6 }}>{err}</div>}
      {isBeznal && (
        <button onClick={() => setModal(true)} style={{ marginTop: 10, width: "100%", height: isMobile ? 48 : 40, border: "1px solid var(--accent-ring)", borderRadius: isMobile ? 12 : 8, background: "var(--accent-soft)", color: "var(--accent)", fontFamily: "inherit", fontSize: isMobile ? 15 : 13, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
          <Icon name="receipt" size={isMobile ? 18 : 15}/> Згенерувати рахунок
        </button>
      )}
      {modal && <OrderInvoiceModal order={order} onClose={() => setModal(false)} onDone={() => load()}/>}
      {editInv && <OrderInvoiceModal order={order} invoice={editInv} onClose={() => setEditInv(null)} onDone={() => load()}/>}
    </div>
  );
}

window.OrderInvoiceModal = OrderInvoiceModal;
window.OrderInvoicesBlock = OrderInvoicesBlock;