// invoice-template.jsx — друкована форма «Рахунок на оплату» (A4)
// Відкривається з Рахунки/дебіторка. Продавець = COMPANY (реально),
// дані рахунку підставляються з обраного інвойсу; відсутні поля — плейсхолдери.
// ПДВ 20% нараховується ЗВЕРХУ на суму без ПДВ.

// ── Сума прописом (українською) ───────────────────────────
(function () {
  const ONES = {
    m: ["", "один", "два", "три", "чотири", "п’ять", "шість", "сім", "вісім", "дев’ять"],
    f: ["", "одна", "дві", "три", "чотири", "п’ять", "шість", "сім", "вісім", "дев’ять"],
  };
  const TEENS = ["десять", "одинадцять", "дванадцять", "тринадцять", "чотирнадцять",
    "п’ятнадцять", "шістнадцять", "сімнадцять", "вісімнадцять", "дев’ятнадцять"];
  const TENS = ["", "", "двадцять", "тридцять", "сорок", "п’ятдесят", "шістдесят",
    "сімдесят", "вісімдесят", "дев’яносто"];
  const HUNDREDS = ["", "сто", "двісті", "триста", "чотириста", "п’ятсот",
    "шістсот", "сімсот", "вісімсот", "дев’ятсот"];

  function triad(num, gender) {
    const out = [];
    const h = Math.floor(num / 100);
    const t = Math.floor((num % 100) / 10);
    const u = num % 10;
    if (h) out.push(HUNDREDS[h]);
    if (t === 1) { out.push(TEENS[u]); }
    else {
      if (t) out.push(TENS[t]);
      if (u) out.push(ONES[gender][u]);
    }
    return out.join(" ");
  }
  // форма слова за українськими правилами множини
  function plural(n, one, few, many) {
    const m10 = n % 10, m100 = n % 100;
    if (m10 === 1 && m100 !== 11) return one;
    if (m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14)) return few;
    return many;
  }
  const SCALES = [
    { g: "m", f: ["мільярд", "мільярди", "мільярдів"] },
    { g: "m", f: ["мільйон", "мільйони", "мільйонів"] },
    { g: "f", f: ["тисяча", "тисячі", "тисяч"] },
  ];

  function intToWords(n, lastGender) {
    if (n === 0) return "нуль";
    const triads = [];
    let x = n;
    while (x > 0) { triads.unshift(x % 1000); x = Math.floor(x / 1000); }
    const total = triads.length;
    const parts = [];
    triads.forEach((tri, i) => {
      const fromEnd = total - 1 - i; // 0 = одиниці
      if (tri === 0) return;
      if (fromEnd === 0) {
        parts.push(triad(tri, lastGender));
      } else {
        const scale = SCALES[SCALES.length - fromEnd];
        if (!scale) return;
        parts.push(triad(tri, scale.g));
        parts.push(plural(tri, scale.f[0], scale.f[1], scale.f[2]));
      }
    });
    return parts.filter(Boolean).join(" ");
  }

  // moneyInWords(1234.56) → "Одна тисяча двісті тридцять чотири гривні 56 копійок"
  window.moneyInWords = function (amount) {
    const grn = Math.floor(amount);
    const kop = Math.round((amount - grn) * 100);
    let words = intToWords(grn, "f");
    words = words.charAt(0).toUpperCase() + words.slice(1);
    const grnWord = plural(grn, "гривня", "гривні", "гривень");
    const kopWord = plural(kop, "копійка", "копійки", "копійок");
    return `${words} ${grnWord} ${String(kop).padStart(2, "0")} ${kopWord}`;
  };
})();

// ── Допоміжне форматування ────────────────────────────────
function invFmt(n) {
  return Number(n).toLocaleString("uk-UA", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
const INV_MONTHS = ["січня", "лютого", "березня", "квітня", "травня", "червня",
  "липня", "серпня", "вересня", "жовтня", "листопада", "грудня"];
function invDateUA(iso) {
  if (!iso) return null;
  const d = new Date(iso);
  if (isNaN(d)) return null;
  return `«${String(d.getDate()).padStart(2, "0")}» ${INV_MONTHS[d.getMonth()]} ${d.getFullYear()} р.`;
}

// плейсхолдер для відсутніх даних
function Ph({ children }) {
  return <span className="inv-ph">{children}</span>;
}

// ── Друкована форма ───────────────────────────────────────
function InvoicePrintDoc({ invoice, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const isFop = !!(invoice && invoice.execEntity === "fop");
  const co = isFop ? (window.COMPANY_FOP || window.COMPANY || {}) : (window.COMPANY || {});
  let client = invoice ? window.getClient(invoice.client) : null;
  const obj = invoice ? window.getObject(invoice.obj) : null;
  const contract = invoice
    ? (window.DATA.CONTRACTS || []).find(c => c.id === invoice.contract)
    : null;
  // Проєкт ГО: контрагент — партнер-ГО
  if (!client && invoice && invoice.partnerId && window.getNgoPartner) {
    const ng = window.getNgoPartner(invoice.partnerId);
    if (ng) client = { name: ng.name, edrpou: ng.edrpou, address: ng.city ? `м. ${ng.city}` : null, contact: ng.contact };
  }

  // ПДВ 20% ЗВЕРХУ (крім ФОП-неплатника)
  const noVat = !!(invoice && invoice.noVat);
  const VAT = noVat ? 0 : 0.20;
  const hasAmount = invoice && typeof invoice.amount === "number";
  const base = hasAmount ? invoice.amount : 0;
  const vat = Math.round(base * VAT * 100) / 100;
  const total = Math.round((base + vat) * 100) / 100;

  // рядок номенклатури з даних інвойсу
  const lineName = (invoice && (invoice.title || contract))
    ? `Проєктні роботи${contract ? ` за договором № ${contract.number}` : ""}${invoice.title ? ` — ${invoice.title}` : ""}`
    : null;

  const number = invoice ? invoice.number : null;
  const issue = invoice ? invoice.issueDate : null;

  const doPrint = () => window.print();

  return (
    <>
      <InvoiceStyles />
      <div className="inv-print-root">
        <div className="inv-backdrop" onClick={onClose}></div>

        <div className="inv-toolbar">
          <div className="inv-toolbar-title">
            Рахунок на оплату{number ? ` № ${number}` : ""}
          </div>
          <div className="inv-toolbar-actions">
            <button className="btn" onClick={onClose}>Закрити</button>
            <button className="btn btn-primary" onClick={doPrint}>
              <window.Icon.Check /> Друк / Зберегти PDF
            </button>
          </div>
        </div>

        <div className="inv-scroll">
          <div className="inv-sheet">

            {/* Логотип компанії */}
            <div className="inv-head">
              <img src="logo-horizontal-black.svg" alt={co.shortName} className="inv-logo" />
              <div className="inv-head-contact">{co.phone} · {co.email || "office@ukrbudproiekt.ua"}</div>
            </div>

            {/* Банківські реквізити одержувача коштів (стандартна шапка) */}
            <div className="inv-bank">
              <div className="inv-bank-grid">
                <div className="inv-bank-cell inv-bank-name">
                  <div className="inv-bank-label">Постачальник</div>
                  <div className="inv-bank-val">{co.fullName || co.shortName}</div>
                </div>
                <div className="inv-bank-cell">
                  <div className="inv-bank-label">Код ЄДРПОУ</div>
                  <div className="inv-bank-val mono">{co.edrpou}</div>
                </div>
                <div className="inv-bank-cell inv-bank-name">
                  <div className="inv-bank-label">Банк</div>
                  <div className="inv-bank-val">{co.bank}</div>
                </div>
                <div className="inv-bank-cell">
                  <div className="inv-bank-label">ІПН платника ПДВ</div>
                  <div className="inv-bank-val mono">{co.vatId || <Ph>уточнити</Ph>}</div>
                </div>
                <div className="inv-bank-cell inv-bank-name">
                  <div className="inv-bank-label">Рахунок (IBAN)</div>
                  <div className="inv-bank-val mono">{co.iban}</div>
                </div>
                <div className="inv-bank-cell">
                  <div className="inv-bank-label">Адреса</div>
                  <div className="inv-bank-val">{co.address}</div>
                </div>
              </div>
            </div>

            {/* Шапка → заголовок */}
            <h1 className="inv-title">
              Рахунок на оплату № {number || <Ph>______</Ph>} від {invDateUA(issue) || <Ph>«__» ________ 20__ р.</Ph>}
            </h1>

            {/* Сторони */}
            <div className="inv-parties">
              <div className="inv-party">
                <div className="inv-party-label">Постачальник (продавець):</div>
                <div className="inv-party-name">{co.fullName || co.shortName}</div>
                <div className="inv-party-line">Код ЄДРПОУ: <b>{co.edrpou}</b> · ІПН: <b>{co.vatId || <Ph>уточнити</Ph>}</b></div>
                <div className="inv-party-line">{co.address}</div>
                <div className="inv-party-line">{co.bank}</div>
                <div className="inv-party-line mono">{co.iban}</div>
              </div>
              <div className="inv-party">
                <div className="inv-party-label">Одержувач (платник):</div>
                <div className="inv-party-name">{client ? client.name : <Ph>Назва платника</Ph>}</div>
                <div className="inv-party-line">
                  Код ЄДРПОУ: <b>{client?.edrpou || <Ph>________</Ph>}</b> · ІПН: <b><Ph>уточнити у платника</Ph></b>
                </div>
                <div className="inv-party-line">{client?.address || <Ph>Адреса платника</Ph>}</div>
                {obj && <div className="inv-party-line">Об'єкт: {obj.code} · {obj.name}</div>}
              </div>
            </div>

            <div className="inv-basis">
              <span className="inv-basis-label">Підстава:</span>{" "}
              {contract
                ? <>Договір № {contract.number}{contract.date ? ` від ${invDateUA(contract.date) || contract.date}` : ""}{obj ? `, ${obj.name}` : ""}</>
                : <Ph>Договір № ____ від «__» ________ 20__ р.</Ph>}
            </div>

            {/* Таблиця номенклатури */}
            <table className="inv-table">
              <thead>
                <tr>
                  <th className="c-no">№</th>
                  <th className="c-name">Найменування робіт / послуг</th>
                  <th className="c-qty">Кіл-сть</th>
                  <th className="c-unit">Од.</th>
                  <th className="c-price">Ціна без ПДВ, ₴</th>
                  <th className="c-sum">Сума без ПДВ, ₴</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="c-no">1</td>
                  <td className="c-name">{lineName || <Ph>Найменування робіт / послуг за договором</Ph>}</td>
                  <td className="c-qty">1</td>
                  <td className="c-unit">посл.</td>
                  <td className="c-price mono">{hasAmount ? invFmt(base) : <Ph>0,00</Ph>}</td>
                  <td className="c-sum mono">{hasAmount ? invFmt(base) : <Ph>0,00</Ph>}</td>
                </tr>
                {/* порожні рядки бланку */}
                {!hasAmount && [2, 3].map(n => (
                  <tr key={n} className="inv-empty-row">
                    <td className="c-no">{n}</td>
                    <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                ))}
              </tbody>
            </table>

            {/* Підсумки */}
            <div className="inv-totals">
              <div className="inv-total-row">
                <span>Разом без ПДВ:</span>
                <span className="mono">{hasAmount ? invFmt(base) : <Ph>0,00</Ph>} ₴</span>
              </div>
              <div className="inv-total-row">
                <span>ПДВ{noVat ? "" : " 20%"}:</span>
                <span className="mono">{noVat ? "без ПДВ" : <React.Fragment>{hasAmount ? invFmt(vat) : <Ph>0,00</Ph>} ₴</React.Fragment>}</span>
              </div>
              <div className="inv-total-row inv-total-grand">
                <span>Всього до сплати:</span>
                <span className="mono">{hasAmount ? invFmt(total) : <Ph>0,00</Ph>} ₴</span>
              </div>
            </div>

            <div className="inv-words">
              <span className="inv-words-label">Усього найменувань 1, на суму</span>{" "}
              <b>{hasAmount ? invFmt(total) : "0,00"} ₴</b>
              <div className="inv-words-text">
                {hasAmount ? window.moneyInWords(total) : <Ph>Сума прописом</Ph>}
              </div>
            </div>

            <div className="inv-note">
              Рахунок дійсний для оплати протягом <b>5 (п'яти) банківських днів</b>.
              У призначенні платежу зазначайте: «Оплата за рахунком № {number || "____"}
              {contract ? `, договір № ${contract.number}` : (invoice && invoice.contractNumber ? `, договір № ${invoice.contractNumber}` : "")}{noVat ? " (без ПДВ)" : ", у т.ч. ПДВ 20%"}».
            </div>

            {/* Підпис + М.П. */}
            <div className="inv-sign">
              <div className="inv-sign-line">
                <div className="inv-sign-role">Керівник</div>
                <div className="inv-sign-slot"></div>
                <div className="inv-sign-name">{co.director || <Ph>Прізвище, ініціали</Ph>}</div>
              </div>
              <div className="inv-stamp">М.П.</div>
            </div>

          </div>
        </div>
      </div>
    </>
  );
}

function InvoiceStyles() {
  return (
    <style>{`
      .inv-print-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; }
      .inv-backdrop { position: absolute; inset: 0; background: rgba(4, 18, 26, 0.55); backdrop-filter: blur(2px); }
      .inv-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
        gap: 16px; padding: 12px 20px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
      .inv-toolbar-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
      .inv-toolbar-actions { display: flex; gap: 10px; }
      .inv-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; padding: 28px 20px 60px; }

      /* Аркуш A4 — світлий завжди, незалежно від теми */
      .inv-sheet { width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; background: #ffffff; color: #14181c;
        padding: 16mm 16mm 18mm; box-shadow: 0 18px 50px rgba(0,0,0,0.32); box-sizing: border-box;
        font-family: var(--font, "Inter", system-ui, sans-serif); line-height: 1.4; }
      .inv-sheet .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
      .inv-ph { color: #9aa6ad; font-style: italic; border-bottom: 1px dashed #c4ced3; padding-bottom: 1px; }

      /* Банківська шапка */
      .inv-bank { border: 1.5px solid #14181c; margin-bottom: 18px; }
      .inv-bank-grid { display: grid; grid-template-columns: 1.5fr 1fr; }
      .inv-bank-cell { padding: 7px 12px; border-bottom: 1px solid #d7dee2; border-right: 1px solid #d7dee2; }
      .inv-bank-cell:nth-child(2n) { border-right: none; }
      .inv-bank-grid .inv-bank-cell:nth-last-child(-n+2) { border-bottom: none; }
      .inv-bank-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7780; margin-bottom: 2px; }
      .inv-bank-val { font-size: 12px; font-weight: 600; color: #14181c; }

      /* Бренд */
      .inv-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
      .inv-logo { height: 34px; width: auto; max-width: 62%; }
      .inv-head-contact { font-size: 10.5px; color: #6b7780; text-align: right; white-space: nowrap; }

      .inv-title { font-size: 19px; font-weight: 750; color: #14181c; text-align: center; margin: 14px 0 18px;
        padding-bottom: 12px; border-bottom: 2px solid #14181c; }

      /* Сторони */
      .inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 14px; }
      .inv-party-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7780; font-weight: 700; margin-bottom: 4px; }
      .inv-party-name { font-size: 13px; font-weight: 700; color: #14181c; margin-bottom: 3px; text-wrap: pretty; }
      .inv-party-line { font-size: 11.5px; color: #2c343a; margin-bottom: 1px; }

      .inv-basis { font-size: 12px; color: #14181c; margin-bottom: 16px; padding: 8px 12px; background: #f3f6f7; border-radius: 6px; }
      .inv-basis-label { font-weight: 700; }

      /* Таблиця */
      .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
      .inv-table th { background: #eef3f4; border: 1px solid #b9c4ca; padding: 7px 9px; font-size: 10px;
        text-transform: uppercase; letter-spacing: 0.02em; color: #2c343a; font-weight: 700; text-align: left; }
      .inv-table td { border: 1px solid #c8d1d6; padding: 9px; font-size: 12px; color: #14181c; vertical-align: top; }
      .inv-table .c-no { width: 34px; text-align: center; }
      .inv-table .c-qty, .inv-table .c-unit { width: 56px; text-align: center; }
      .inv-table .c-price, .inv-table .c-sum { width: 116px; text-align: right; white-space: nowrap; }
      .inv-table th.c-price, .inv-table th.c-sum, .inv-table th.c-qty, .inv-table th.c-unit { text-align: center; }
      .inv-empty-row td { height: 30px; }

      /* Підсумки */
      .inv-totals { margin-left: auto; width: 280px; margin-bottom: 14px; }
      .inv-total-row { display: flex; justify-content: space-between; padding: 5px 2px; font-size: 12.5px; color: #14181c; }
      .inv-total-row span:first-child { color: #4a555c; }
      .inv-total-grand { border-top: 2px solid #14181c; margin-top: 4px; padding-top: 8px; font-size: 14px; font-weight: 750; }
      .inv-total-grand span:first-child { color: #14181c; }

      .inv-words { margin-bottom: 18px; font-size: 12px; }
      .inv-words-label { color: #4a555c; }
      .inv-words-text { font-size: 13px; font-weight: 600; color: #14181c; margin-top: 3px; text-wrap: pretty; }

      .inv-note { font-size: 11px; color: #4a555c; line-height: 1.5; padding: 9px 12px; border: 1px solid #d7dee2;
        border-radius: 6px; margin-bottom: 26px; text-wrap: pretty; }

      /* Підпис */
      .inv-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
      .inv-sign-line { flex: 1 1 auto; max-width: 360px; }
      .inv-sign-role { font-size: 11.5px; color: #4a555c; margin-bottom: 22px; font-weight: 600; }
      .inv-sign-slot { border-bottom: 1px solid #14181c; height: 1px; margin-bottom: 4px; }
      .inv-sign-name { font-size: 10.5px; color: #6b7780; text-align: right; }
      .inv-stamp { width: 96px; height: 96px; border: 1.5px dashed #b9c4ca; border-radius: 50%; display: flex;
        align-items: center; justify-content: center; font-size: 12px; color: #9aa6ad; flex: none; }

      @media (max-width: 760px) {
        .inv-parties, .inv-bank-grid { grid-template-columns: 1fr; }
        .inv-sheet { padding: 10mm; }
      }

      /* Друк: лишаємо тільки аркуш */
      @media print {
        body * { visibility: hidden !important; }
        .inv-print-root, .inv-print-root * { visibility: visible !important; }
        .inv-print-root { position: absolute !important; inset: 0 !important; z-index: 9999; }
        .inv-backdrop, .inv-toolbar { display: none !important; }
        .inv-scroll { overflow: visible !important; padding: 0 !important; }
        .inv-sheet { box-shadow: none !important; margin: 0 !important; width: auto !important; min-height: 0 !important; padding: 0 !important; }
        @page { size: A4; margin: 14mm; }
      }
    `}</style>
  );
}

window.InvoicePrintDoc = InvoicePrintDoc;

// невелика іконка принтера для кнопки в таблиці
function InvPrintIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
      <path d="M4 6V2.5h8V6M4 12H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1M4.5 10h7v3.5h-7V10z"
        stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}
window.InvPrintIcon = InvPrintIcon;

// Синтез чернетки рахунку з договору (наступна несплачена віха графіку).
// Повертає об'єкт, сумісний з InvoicePrintDoc.
window.draftInvoiceForContract = function (contract, milestoneIdx) {
  if (!contract) return null;
  const today = window.TODAY_ISO || "2026-05-26";
  const sched = contract.schedule || [];
  let idx = (typeof milestoneIdx === "number" && milestoneIdx >= 0) ? milestoneIdx : sched.findIndex(s => !s.paidDate);
  if (idx < 0) idx = sched.length ? sched.length - 1 : -1;
  const next = idx >= 0 ? sched[idx] : {};
  const base = (contract.number || "").split("/")[0] || contract.number || "";
  const proj = contract.__project || null;
  const execEntity = proj ? proj.execEntity : (contract.execEntity || null);
  return {
    id: "draft-" + (contract.id || (proj && proj.id) || "x"),
    number: base ? `${base}/${String(idx >= 0 ? idx + 1 : 1).padStart(2, "0")}` : null,
    contract: contract.id,
    client: contract.client,
    obj: contract.obj,
    title: next.stage || "",
    amount: next.amount || 0,
    issueDate: today,
    dueDate: next.dueDate || today,
    status: "draft",
    draft: true,
    execEntity,
    noVat: execEntity === "fop",
    projectName: proj ? proj.name : (contract.projectName || null),
    projectCode: proj ? proj.code : (contract.projectCode || null),
    partnerId: proj ? proj.partner : (contract.partnerId || null),
    contractNumber: contract.number || null,
  };
};

// ─────────────────────────────────────────────────────────────
// Пікер «по якому договору / об'єкту виставити рахунок».
// Показує всі договори (об'єкт + замовник + наступна несплачена віха графіку),
// дозволяє обрати конкретну віху, далі відкриває друковану форму.
// ─────────────────────────────────────────────────────────────
function InvoiceContractPicker({ onClose, onPick, contracts }) {
  const { useState, useEffect } = React;
  const list = contracts || window.DATA.CONTRACTS || [];
  const today = window.TODAY_ISO || "2026-05-26";

  // за замовчуванням — перший активний договір
  const firstActive = list.find(c => c.status === "active") || list[0];
  const [selId, setSelId] = useState(firstActive ? firstActive.id : null);

  const nextUnpaidIdx = (c) => {
    const i = (c.schedule || []).findIndex(s => !s.paidDate);
    return i < 0 ? Math.max(0, (c.schedule || []).length - 1) : i;
  };
  const [milestoneIdx, setMilestoneIdx] = useState(firstActive ? nextUnpaidIdx(firstActive) : 0);

  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const pickContract = (c) => { setSelId(c.id); setMilestoneIdx(nextUnpaidIdx(c)); };

  const selected = list.find(c => c.id === selId) || null;
  const sched = selected ? (selected.schedule || []) : [];
  const fmt = (n) => (window.formatMoney ? window.formatMoney(n) : n);

  const milestoneTone = (s) => {
    if (s.paidDate) return { label: "сплачено", cls: "tone-neutral" };
    if (s.dueDate && s.dueDate < today) return { label: "прострочено", cls: "tone-warn" };
    return { label: "до сплати", cls: "tone-live" };
  };

  const submit = () => {
    if (!selected) return;
    onPick(window.draftInvoiceForContract(selected, milestoneIdx));
  };

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal ip-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="ip-head-ic"><window.Ico name="file" size={20} /></div>
          <div>
            <div className="ip-head-title">Виставити рахунок</div>
            <div className="ip-head-sub">Оберіть договір / об'єкт і платіж графіку</div>
          </div>
        </div>

        <div className="ip-body">
          <div className="ip-col ip-col-contracts">
            <div className="ip-col-label">Договір / об'єкт</div>
            <div className="ip-contract-list">
              {list.map(c => {
                const obj = window.getObject(c.obj);
                const client = window.getClient(c.client);
                const st = window.CONTRACT_STATUS[c.status] || {};
                const ni = nextUnpaidIdx(c);
                const next = c.schedule ? c.schedule[ni] : null;
                const allPaid = (c.schedule || []).every(s => s.paidDate);
                return (
                  <button key={c.id} type="button"
                    className={`ip-contract ${selId === c.id ? "is-active" : ""}`}
                    onClick={() => pickContract(c)}>
                    <div className="ip-contract-top">
                      <span className="ip-obj-code td-mono">{obj?.code || "—"}</span>
                      <span className={`status-tag ${"tone-" + (st.tone || "neutral")} ip-c-status`}>{st.label}</span>
                    </div>
                    <div className="ip-obj-name">{obj?.name || "Без об'єкта"}</div>
                    <div className="ip-contract-meta">
                      <span className="ip-client">{client?.short || "—"}</span>
                      <span className="ip-c-num td-mono">№ {c.number}</span>
                    </div>
                    <div className="ip-next">
                      {allPaid
                        ? <span className="ip-next-paid">усі платежі графіку закриті</span>
                        : <><span className="ip-next-stage">{next?.stage}</span><span className="ip-next-sum">{fmt(next?.amount || 0)} ₴</span></>}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          <div className="ip-col ip-col-detail">
            {selected ? (
              <>
                <div className="ip-col-label">Платіж графіку</div>
                <div className="ip-milestones">
                  {sched.map((s, i) => {
                    const tone = milestoneTone(s);
                    const disabled = !!s.paidDate;
                    return (
                      <label key={i} className={`ip-ms ${milestoneIdx === i ? "is-on" : ""} ${disabled ? "is-disabled" : ""}`}>
                        <input type="radio" name="ip-ms" checked={milestoneIdx === i} disabled={disabled}
                          onChange={() => setMilestoneIdx(i)} />
                        <span className="ip-ms-radio"></span>
                        <span className="ip-ms-main">
                          <span className="ip-ms-stage">{s.stage}</span>
                          <span className="ip-ms-sub">
                            <span className="td-mono">{s.pct}%</span>
                            <span className="ip-ms-due">термін {(() => { const d = new Date(s.dueDate); return isNaN(d) ? s.dueDate : `${String(d.getDate()).padStart(2,"0")}.${String(d.getMonth()+1).padStart(2,"0")}.${String(d.getFullYear()).slice(2)}`; })()}</span>
                          </span>
                        </span>
                        <span className="ip-ms-right">
                          <span className="ip-ms-amount">{fmt(s.amount)} ₴</span>
                          <span className={`status-tag ${tone.cls} ip-ms-tag`}>{tone.label}</span>
                        </span>
                      </label>
                    );
                  })}
                </div>

                <div className="ip-summary">
                  <div className="ip-summary-row">
                    <span>Сума (без ПДВ)</span>
                    <span className="td-mono">{fmt(sched[milestoneIdx]?.amount || 0)} ₴</span>
                  </div>
                  <div className="ip-summary-row ip-summary-vat">
                    <span>ПДВ 20% зверху</span>
                    <span className="td-mono">{fmt(Math.round((sched[milestoneIdx]?.amount || 0) * 0.20))} ₴</span>
                  </div>
                  <div className="ip-summary-row ip-summary-total">
                    <span>До сплати</span>
                    <span className="td-mono">{fmt(Math.round((sched[milestoneIdx]?.amount || 0) * 1.20))} ₴</span>
                  </div>
                </div>
              </>
            ) : (
              <div className="ip-empty">Немає договорів для виставлення рахунку.</div>
            )}
          </div>
        </div>

        <div className="ip-foot">
          <button className="btn" onClick={onClose}>Скасувати</button>
          <button className="btn btn-primary" onClick={submit} disabled={!selected}
            style={!selected ? { opacity: 0.5, pointerEvents: "none" } : {}}>
            Сформувати рахунок
          </button>
        </div>
      </div>
    </>
  );
}
window.InvoiceContractPicker = InvoiceContractPicker;