// expense-pages.jsx — Витрати компанії · Кошториси на проєктування

// ============ ВИТРАТИ ============
function ExpensesPage({ role }) {
  const expenses = window.DATA.EXPENSES;
  const cats = window.EXPENSE_CATEGORIES;
  const [filterType, setFilterType] = React.useState("all");
  const [filterCat, setFilterCat]   = React.useState(null);
  const [filterVat, setFilterVat]   = React.useState("all"); // all | vat | novat
  const [openId, setOpenId]         = React.useState(null);
  const [, setTick]                 = React.useState(0);

  // Розрахунок місячних сум по типах
  const totalAdm   = window.totalMonthlyByType("adm");
  const totalZvv   = window.totalMonthlyByType("zvv");
  const totalMonth = totalAdm + totalZvv;
  const totalYear  = totalMonth * 12;

  // Фільтрація
  let shown = expenses;
  if (filterType !== "all") {
    shown = shown.filter(e => window.getCategory(e.cat).type === filterType);
  }
  if (filterCat) {
    shown = shown.filter(e => e.cat === filterCat);
  }
  if (filterVat !== "all") {
    shown = shown.filter(e => (window.expenseVat(e).vatable ? "vat" : "novat") === filterVat);
  }

  // Сортування: щомісячні зверху, потім за сумою
  const periodOrder = { monthly: 0, quarterly: 1, yearly: 2, once: 3 };
  shown = [...shown].sort((a,b) => {
    const p = periodOrder[a.periodicity] - periodOrder[b.periodicity];
    if (p !== 0) return p;
    return (b.monthlyAmount || b.amount) - (a.monthlyAmount || a.amount);
  });

  // Підсумок ПДВ по показаних витратах (брутто → нетто, вхідний кредит)
  const vatSum = shown.reduce((a, e) => {
    const v = window.expenseVat(e);
    a.gross += v.gross; a.net += v.net; a.vat += v.vat;
    if (v.creditable) a.credit += v.creditable;
    else if (v.vatable) a.noInvoice += v.vat;
    return a;
  }, { gross: 0, net: 0, vat: 0, credit: 0, noInvoice: 0 });

  // Категорії з підрахунком
  const catStats = cats.map(c => {
    const list = expenses.filter(e => e.cat === c.id);
    const monthly = list.reduce((s, e) => s + (e.monthlyAmount || 0), 0);
    return { cat: c, count: list.length, monthly };
  }).filter(s => s.count > 0);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Витрати компанії</h1>
        <div className="page-sub">
          <span>{expenses.length} {window.plural(expenses.length, "стаття витрат", "статті витрат", "статей витрат")}</span>
          <span className="dot"></span>
          <span>місячний бюджет <b style={{color: "var(--ink)"}}>{window.formatMoney(totalMonth)} ₴</b></span>
          <span className="dot"></span>
          <span>річний — {window.formatMoney(totalYear)} ₴</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Адміністративні (АДМ)</div>
          <div className="kpi-value">{window.formatMoney(totalAdm)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴/міс</span></div>
          <div className="kpi-sub">{Math.round(totalAdm / totalMonth * 100)}% бюджету</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Загальновиробничі (ЗВВ)</div>
          <div className="kpi-value">{window.formatMoney(totalZvv)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴/міс</span></div>
          <div className="kpi-sub">{Math.round(totalZvv / totalMonth * 100)}% бюджету</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Всього на місяць</div>
          <div className="kpi-value">{window.formatMoney(totalMonth)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">{window.formatMoney(Math.round(totalMonth / 22))} ₴/день</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Платіжні зобов'язання</div>
          <div className="kpi-value">{expenses.filter(e => e.periodicity === "monthly" && !e.paid).length}</div>
          <div className="kpi-sub">найближчі цього місяця</div>
        </div>
      </div>

      {/* Структура витрат */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Структура місячних витрат</h2>
          <span className="section-sub">за категоріями</span>
        </div>
        <div className="break-stack">
          <div className="break-bar" style={{height: 32}}>
            {catStats.filter(s => s.monthly > 0).map(s => (
              <div key={s.cat.id}
                className={`break-bar-seg ${filterCat === s.cat.id ? "is-focus" : ""}`}
                style={{flex: s.monthly, background: catColor(s.cat)}}
                title={`${s.cat.label} · ${window.formatMoney(s.monthly)} ₴/міс`}
                onClick={() => setFilterCat(filterCat === s.cat.id ? null : s.cat.id)}>
              </div>
            ))}
          </div>
          <div className="cat-grid">
            {catStats.map(s => (
              <button
                key={s.cat.id}
                className={`cat-card ${filterCat === s.cat.id ? "is-active" : ""}`}
                onClick={() => setFilterCat(filterCat === s.cat.id ? null : s.cat.id)}
              >
                <div className="cat-card-head">
                  <span className="cat-icon"><window.Ico e={s.cat.icon} /></span>
                  <span className={`empl-chip empl-${s.cat.type === "adm" ? "staff" : "part"}`}>{window.EXPENSE_TYPE_LABELS[s.cat.type].short}</span>
                </div>
                <div className="cat-name">{s.cat.label}</div>
                <div className="cat-amount">
                  {s.monthly > 0
                    ? <>{window.formatMoney(s.monthly)} <span>₴/міс</span></>
                    : <span style={{color: "var(--ink-4)"}}>разові</span>
                  }
                </div>
                <div className="cat-count">{s.count} {window.plural(s.count, "позиція", "позиції", "позицій")}</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Фільтр + таблиця */}
      <div className="toolbar" style={{marginTop: 32}}>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filterType === "all" ? "is-active" : ""}`} onClick={() => setFilterType("all")}>Усі</button>
          <button className={`filter-pill-item ${filterType === "adm" ? "is-active" : ""}`} onClick={() => setFilterType("adm")}>АДМ</button>
          <button className={`filter-pill-item ${filterType === "zvv" ? "is-active" : ""}`} onClick={() => setFilterType("zvv")}>ЗВВ</button>
        </div>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filterVat === "all" ? "is-active" : ""}`} onClick={() => setFilterVat("all")}>Усі</button>
          <button className={`filter-pill-item ${filterVat === "vat" ? "is-active" : ""}`} onClick={() => setFilterVat("vat")}>з ПДВ</button>
          <button className={`filter-pill-item ${filterVat === "novat" ? "is-active" : ""}`} onClick={() => setFilterVat("novat")}>без ПДВ</button>
        </div>
        {filterCat && (
          <button className="btn" style={{padding: "6px 10px", fontSize: 12}} onClick={() => setFilterCat(null)}>
            {window.getCategory(filterCat).label} ×
          </button>
        )}
        <button className="btn btn-primary" style={{marginLeft: "auto"}}>
          <window.Icon.Plus /> Нова витрата
        </button>
      </div>

      {/* Зведення ПДВ по показаних витратах */}
      <div className="vat-summary">
        <div className="vat-summary-item">
          <div className="vat-summary-label">Сума з ПДВ</div>
          <div className="vat-summary-val">{window.formatMoney(vatSum.gross)} ₴</div>
        </div>
        <div className="vat-summary-sep">−</div>
        <div className="vat-summary-item">
          <div className="vat-summary-label">Без ПДВ (нетто)</div>
          <div className="vat-summary-val">{window.formatMoney(vatSum.net)} ₴</div>
        </div>
        <div className="vat-summary-item is-credit">
          <div className="vat-summary-label">Вхідний ПДВ (кредит)</div>
          <div className="vat-summary-val">{window.formatMoney(vatSum.credit)} ₴</div>
          <div className="vat-summary-sub">з податковою накладною</div>
        </div>
        {vatSum.noInvoice > 0 && (
          <div className="vat-summary-item is-warn">
            <div className="vat-summary-label">ПДВ без накладної</div>
            <div className="vat-summary-val">{window.formatMoney(vatSum.noInvoice)} ₴</div>
            <div className="vat-summary-sub">не йде в кредит</div>
          </div>
        )}
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Витрата</th>
            <th>Тип</th>
            <th>Постачальник</th>
            <th>Періодичність</th>
            <th className="num-col">Сума</th>
            <th className="num-col">ПДВ</th>
            <th className="num-col">У місяць</th>
            <th>Наступний платіж</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {shown.map(e => {
            const cat = window.getCategory(e.cat);
            const obj = e.obj ? window.getObject(e.obj) : null;
            const due = window.daysBetween(window.TODAY.day === "26" ? "2026-05-26" : "2026-05-26", e.nextDate);
            return (
              <tr key={e.id} className="is-clickable" onClick={() => setOpenId(e.id)}>
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 12}}>
                    <div className="cat-mini-icon"><window.Ico e={cat.icon} /></div>
                    <div>
                      <div className="cell-name">{e.title}</div>
                      <div className="cell-sub">
                        {cat.label}{obj && <> · <span className="td-mono" style={{fontSize: 11}}>{obj.code}</span></>}
                      </div>
                    </div>
                  </div>
                </td>
                <td>
                  <span className={`empl-chip empl-${cat.type === "adm" ? "staff" : "part"}`}>{window.EXPENSE_TYPE_LABELS[cat.type].short}</span>
                </td>
                <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>{e.supplier}</td>
                <td>
                  <span style={{fontSize: 12, color: "var(--ink-3)", textTransform: "lowercase"}}>{window.PERIODICITY_LABELS[e.periodicity]}</span>
                </td>
                <td className="num-col">{window.formatMoney(e.amount)} ₴</td>
                <td className="num-col">
                  {(() => {
                    const v = window.expenseVat(e);
                    if (!v.vatable) return <span className="vat-chip is-none">без ПДВ</span>;
                    return (
                      <div className="vat-cell">
                        <span className="num-bold">{window.formatMoney(v.vat)} ₴</span>
                        <span className={`vat-chip ${v.hasInvoice ? "is-ok" : "is-warn"}`} title={v.hasInvoice ? "Податкова накладна зареєстрована — у кредит" : "Немає податкової накладної — не йде в кредит"}>
                          {v.rate}% {v.hasInvoice ? "· ПН ✓" : "· без ПН"}
                        </span>
                      </div>
                    );
                  })()}
                </td>
                <td className="num-col">
                  {e.monthlyAmount > 0
                    ? <span className="num-bold">{window.formatMoney(e.monthlyAmount)} ₴</span>
                    : <span style={{color: "var(--ink-4)"}}>—</span>
                  }
                </td>
                <td>
                  {e.paid
                    ? <span style={{color: "var(--c-green-deep)", fontSize: 12}}>сплачено {window.formatDate(e.paidDate)}</span>
                    : <span className="td-mono" style={{fontSize: 12}}>{window.formatDate(e.nextDate)}</span>
                  }
                </td>
                <td>
                  <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Деталі →</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {openId && <ExpenseDrawer expense={expenses.find(e => e.id === openId)} onClose={() => setOpenId(null)} onChange={() => setTick(x => x + 1)} />}
    </div>
  );
}

function catColor(cat) {
  const adm = ["#068b49", "#3c6287", "#8ec975", "#98dab4", "#5a8aa8", "#7fa8c4", "#a8c8d8", "#b8d5b8"];
  const zvv = ["#e37601", "#d4a373", "#c89668", "#b88058", "#a87048", "#986038"];
  const all = window.EXPENSE_CATEGORIES;
  const idx = all.findIndex(c => c.id === cat.id);
  return cat.type === "adm" ? adm[idx % adm.length] : zvv[idx % zvv.length];
}

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

  const cat = window.getCategory(expense.cat);
  const obj = expense.obj ? window.getObject(expense.obj) : null;
  const v = window.expenseVat(expense);
  const toggleInvoice = () => { expense.taxInvoice = !expense.taxInvoice; onChange && onChange(); };

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <span className={`empl-chip empl-${cat.type === "adm" ? "staff" : "part"}`}>{window.EXPENSE_TYPE_LABELS[cat.type].label}</span>
          {expense.paid && <span className="status-tag tone-live">сплачено</span>}
        </div>
        <div className="drawer-body">
          <div style={{display: "flex", alignItems: "center", gap: 14, marginBottom: 20}}>
            <div className="cat-mini-icon" style={{width: 48, height: 48, fontSize: 22}}><window.Ico e={cat.icon} /></div>
            <div>
              <h1 className="drawer-h1" style={{marginBottom: 4}}>{expense.title}</h1>
              <div style={{fontSize: 13, color: "var(--ink-3)"}}>{cat.label} · {window.PERIODICITY_LABELS[expense.periodicity]}</div>
            </div>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Сума</div>
            <dl className="info-grid">
              <div><dt>Сума оплати</dt><dd className="num" style={{fontSize: 16, fontWeight: 600}}>{window.formatMoney(expense.amount)} ₴</dd></div>
              <div><dt>У перерахунку на місяць</dt><dd className="num">{expense.monthlyAmount > 0 ? window.formatMoney(expense.monthlyAmount) + " ₴" : "—"}</dd></div>
              <div><dt>Періодичність</dt><dd>{window.PERIODICITY_LABELS[expense.periodicity]}</dd></div>
              <div><dt>{expense.paid ? "Сплачено" : "Наступний платіж"}</dt><dd>{window.formatDate(expense.paid ? expense.paidDate : expense.nextDate)}</dd></div>
            </dl>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">ПДВ</div>
            {v.vatable ? (
              <>
                <dl className="info-grid">
                  <div><dt>Ставка ПДВ</dt><dd>{v.rate}%</dd></div>
                  <div><dt>Сума без ПДВ (нетто)</dt><dd className="num">{window.formatMoney(v.net)} ₴</dd></div>
                  <div><dt>ПДВ у сумі</dt><dd className="num">{window.formatMoney(v.vat)} ₴</dd></div>
                  <div><dt>Вхідний кредит</dt><dd className="num" style={{fontWeight: 600, color: v.creditable ? "var(--c-green-deep)" : "var(--late)"}}>{v.creditable ? window.formatMoney(v.creditable) + " ₴" : "—"}</dd></div>
                </dl>
                <div className={`vat-invoice-toggle ${expense.taxInvoice ? "is-on" : ""}`} onClick={toggleInvoice}>
                  <div className="vat-invoice-check">{expense.taxInvoice && <window.Icon.Check />}</div>
                  <div style={{flex: 1}}>
                    <div className="vat-invoice-title">Податкова накладна зареєстрована</div>
                    <div className="vat-invoice-sub">{expense.taxInvoice ? "Вхідний ПДВ іде в податковий кредит" : "Без накладної ПДВ не зменшує зобов'язання"}</div>
                  </div>
                </div>
              </>
            ) : (
              <div style={{fontSize: 13, color: "var(--ink-2)", padding: "10px 14px", background: "var(--bg-sunken)", borderRadius: 8, lineHeight: 1.5}}>
                Без ПДВ — {expense.note && /нерезидент|єдиному|звільнен|поза об/i.test(expense.note) ? expense.note.toLowerCase() : "постачальник не платник ПДВ або послуга звільнена"}. Вхідного кредиту немає.
              </div>
            )}
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Постачальник</div>
            <div style={{fontSize: 14, color: "var(--ink)", padding: "10px 14px", background: "var(--bg-sunken)", borderRadius: 8}}>
              {expense.supplier}
            </div>
          </div>

          {obj && (
            <div className="drawer-section">
              <div className="drawer-section-h">Прив'язано до об'єкта</div>
              <div className="mini-list">
                <div className="mini-list-item">
                  <span><span className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)", marginRight: 8}}>{obj.code}</span>{obj.name}</span>
                  <span style={{color: "var(--ink-3)", fontSize: 12}}>{obj.client && window.getClient(window.DATA.CONTRACTS.find(c => c.obj === obj.id)?.client)?.short}</span>
                </div>
              </div>
            </div>
          )}

          {expense.note && (
            <div className="drawer-section">
              <div className="drawer-section-h">Нотатка</div>
              <div style={{fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5, padding: "10px 14px", background: "var(--bg-sunken)", borderRadius: 8}}>
                {expense.note}
              </div>
            </div>
          )}
        </div>
        <div className="drawer-foot">
          {!expense.paid && <button className="btn btn-primary">Позначити сплаченою</button>}
          <button className="btn">Редагувати</button>
        </div>
      </aside>
    </>
  );
}

// ============ КОШТОРИСИ ============
function EstimatesPage({ role }) {
  const objects = window.DATA.OBJECTS;
  const contracts = window.DATA.CONTRACTS.filter(c => c.status === "active" || c.status === "supervision");
  const allocations = window.allocateOverheadToObjects();
  const totalAdmMo = window.totalMonthlyByType("adm");
  const totalZvvMo = window.totalMonthlyByType("zvv");

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Кошториси на проєктування</h1>
        <div className="page-sub">
          <span>розподіл АДМ і ЗВВ між об'єктами</span>
          <span className="dot"></span>
          <span>методика: пропорційно сумі договору</span>
        </div>
      </div>

      {/* Налаштування */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Нормативні коефіцієнти</h2>
          <span className="section-sub">застосовуються до кошторисів</span>
        </div>
        <div className="rates-row">
          <div className="rate-card">
            <div className="rate-label">АДМ-витрати</div>
            <div className="rate-val">{window.OVERHEAD_RATES.admPct}<span>%</span></div>
            <div className="rate-sub">від ОП виконавців</div>
            <div className="rate-amount">{window.formatMoney(totalAdmMo)} ₴/міс факт</div>
          </div>
          <div className="rate-card">
            <div className="rate-label">ЗВВ-витрати</div>
            <div className="rate-val">{window.OVERHEAD_RATES.zvvPct}<span>%</span></div>
            <div className="rate-sub">від ОП виконавців</div>
            <div className="rate-amount">{window.formatMoney(totalZvvMo)} ₴/міс факт</div>
          </div>
          <div className="rate-card">
            <div className="rate-label">Прибуток</div>
            <div className="rate-val">{window.OVERHEAD_RATES.profitPct}<span>%</span></div>
            <div className="rate-sub">плановий норматив</div>
            <div className="rate-amount" style={{color: "var(--ink-4)"}}>—</div>
          </div>
          <div className="rate-card" style={{background: "var(--bg-sunken)"}}>
            <div className="rate-label">Метод розподілу</div>
            <div className="rate-method">% від договору</div>
            <div className="rate-sub">пропорційно</div>
            <div style={{marginTop: 8}}>
              <button className="btn" style={{fontSize: 12, padding: "4px 10px"}}>Змінити</button>
            </div>
          </div>
        </div>
        <div className="hint-box">
          <b>Як це працює:</b> на кожен об'єкт автоматично нараховується частка АДМ і ЗВВ-витрат —
          пропорційно сумі договору. Це включається у вартість проєктування (Настанова ДБН Д.1.1-7).
          У кошторисі бачите: пряму ОП → надбавку АДМ → надбавку ЗВВ → прибуток → фінальна вартість.
        </div>
      </section>

      {/* Розрахунок по кожному об'єкту */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Розподіл по активних об'єктах</h2>
          <span className="section-sub">{allocations.length} об'єктів · щомісяця</span>
        </div>
        <div className="estimate-stack">
          {allocations.map(a => (
            <EstimateRow key={a.contract.id} allocation={a} />
          ))}
        </div>
      </section>

      {/* Підсумок */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Перевірка</h2>
          <span className="section-sub">вся сума АДМ і ЗВВ має бути розподілена</span>
        </div>
        <table className="data-table compact-table">
          <tbody>
            <tr>
              <td style={{width: 60}}><span className="empl-chip empl-staff">АДМ</span></td>
              <td>Розподілено по об'єктах</td>
              <td className="num-col num-bold">{window.formatMoney(allocations.reduce((s,a) => s + a.monthlyAdm, 0))} ₴</td>
              <td style={{color: "var(--ink-3)"}}>з {window.formatMoney(totalAdmMo)} ₴ факту</td>
            </tr>
            <tr>
              <td><span className="empl-chip empl-part">ЗВВ</span></td>
              <td>Розподілено по об'єктах</td>
              <td className="num-col num-bold">{window.formatMoney(allocations.reduce((s,a) => s + a.monthlyZvv, 0))} ₴</td>
              <td style={{color: "var(--ink-3)"}}>з {window.formatMoney(totalZvvMo)} ₴ факту</td>
            </tr>
            <tr>
              <td></td>
              <td><b>Всього</b></td>
              <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(allocations.reduce((s,a) => s + a.monthlyTotal, 0))} ₴</td>
              <td style={{color: "var(--ink-3)"}}>усі витрати на діючі об'єкти</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  );
}

function EstimateRow({ allocation }) {
  const { contract, shareRatio, monthlyAdm, monthlyZvv, monthlyTotal } = allocation;
  const [open, setOpen] = React.useState(false);
  const obj = window.getObject(contract.obj);
  const client = window.getClient(contract.client);
  const pct = (shareRatio * 100).toFixed(1);

  // Спрощено: оцінка ОП виконавців (25% від контракту як базова цифра)
  const estimatedLabor = Math.round(contract.total * 0.25);
  const admAddition = Math.round(estimatedLabor * window.OVERHEAD_RATES.admPct / 100);
  const zvvAddition = Math.round(estimatedLabor * window.OVERHEAD_RATES.zvvPct / 100);
  const totalCost = estimatedLabor + admAddition + zvvAddition;
  const profit = Math.round(totalCost * window.OVERHEAD_RATES.profitPct / 100);
  const finalEstimate = totalCost + profit;
  const margin = contract.total - finalEstimate;
  const marginPct = margin / contract.total * 100;

  return (
    <div className={`estimate-row ${open ? "is-open" : ""}`}>
      <div className="estimate-head" onClick={() => setOpen(!open)}>
        <div className="estimate-id">
          <div className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{obj?.code}</div>
          <div className="cell-name">{obj?.name}</div>
          <div className="cell-sub">{client?.short}</div>
        </div>
        <div className="estimate-share">
          <div className="rate-label">Частка</div>
          <div className="estimate-share-val">{pct}<span>%</span></div>
          <div className="rate-sub">від загального обсягу</div>
        </div>
        <div className="estimate-overhead">
          <div className="overhead-line">
            <span className="empl-chip empl-staff">АДМ</span>
            <span className="num-bold">{window.formatMoney(monthlyAdm)} ₴</span>
            <span className="overhead-pct">/міс</span>
          </div>
          <div className="overhead-line">
            <span className="empl-chip empl-part">ЗВВ</span>
            <span className="num-bold">{window.formatMoney(monthlyZvv)} ₴</span>
            <span className="overhead-pct">/міс</span>
          </div>
        </div>
        <div className="estimate-total">
          <div className="rate-label">Кошторис на проєктування</div>
          <div className="estimate-total-val">{window.formatMoney(finalEstimate)} <span>₴</span></div>
          <div className={`rate-sub ${marginPct >= 15 ? "is-good" : marginPct >= 0 ? "is-neutral" : "is-bad"}`}>
            {margin >= 0 ? "+" : ""}{window.formatMoney(margin)} ₴ ({marginPct.toFixed(1)}%) маржа
          </div>
        </div>
        <button className="obj-card-toggle">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s"}}>
            <path d="M3 5L7 9L11 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>

      {open && (
        <div className="estimate-detail">
          <div className="estimate-formula">
            <div className="formula-row formula-base">
              <span className="formula-label">Оплата праці виконавців (ОП)</span>
              <span className="formula-note">оцінка: 25% від договору · з табелю годин</span>
              <span className="formula-val num-bold">{window.formatMoney(estimatedLabor)} ₴</span>
            </div>
            <div className="formula-row">
              <span className="formula-label"><span className="empl-chip empl-staff">АДМ</span> {window.OVERHEAD_RATES.admPct}% × ОП</span>
              <span className="formula-note">оренда, ПЗ, зв'язок, реклама</span>
              <span className="formula-val">+ {window.formatMoney(admAddition)} ₴</span>
            </div>
            <div className="formula-row">
              <span className="formula-label"><span className="empl-chip empl-part">ЗВВ</span> {window.OVERHEAD_RATES.zvvPct}% × ОП</span>
              <span className="formula-note">субпідряд, експертиза, виїзди</span>
              <span className="formula-val">+ {window.formatMoney(zvvAddition)} ₴</span>
            </div>
            <div className="formula-row formula-sub">
              <span className="formula-label">Прямі + накладні</span>
              <span></span>
              <span className="formula-val num-bold">{window.formatMoney(totalCost)} ₴</span>
            </div>
            <div className="formula-row">
              <span className="formula-label">Прибуток {window.OVERHEAD_RATES.profitPct}%</span>
              <span className="formula-note">плановий норматив</span>
              <span className="formula-val">+ {window.formatMoney(profit)} ₴</span>
            </div>
            <div className="formula-row formula-final">
              <span className="formula-label">Кошторисна вартість</span>
              <span></span>
              <span className="formula-val">{window.formatMoney(finalEstimate)} ₴</span>
            </div>
            <div className="formula-row formula-comparison">
              <span className="formula-label">Сума договору</span>
              <span className="formula-note">що фактично домовлено</span>
              <span className="formula-val">{window.formatMoney(contract.total)} ₴</span>
            </div>
            <div className={`formula-row formula-margin ${marginPct >= 15 ? "is-good" : marginPct >= 0 ? "is-neutral" : "is-bad"}`}>
              <span className="formula-label">{margin >= 0 ? "Маржа" : "Збиток"}</span>
              <span className="formula-note">різниця між договором і вартістю</span>
              <span className="formula-val">{margin >= 0 ? "+" : ""}{window.formatMoney(margin)} ₴ ({marginPct.toFixed(1)}%)</span>
            </div>
          </div>

          <div className="estimate-actions">
            <button className="btn">Експорт кошторису PDF</button>
            <button className="btn">Прив'язати до договору</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.ExpensesPage = ExpensesPage;
window.EstimatesPage = EstimatesPage;