"use strict";

(function () {
  const STORAGE_KEY = "ya_stats_business_finance_v4";
  const LEGACY_KEYS = [
    "ya_stats_business_finance_v3",
    "ya_stats_business_finance_v2",
    "ya_stats_business_finance_v1",
  ];
  const HISTORY_LIMIT = 6;
  let cachedSubscription = null;
  let historyCache = null;
  let historyLoadWarning = "";
  const MONTH_NAMES = [
    "Январь",
    "Февраль",
    "Март",
    "Апрель",
    "Май",
    "Июнь",
    "Июль",
    "Август",
    "Сентябрь",
    "Октябрь",
    "Ноябрь",
    "Декабрь",
  ];

  function core() {
    return (window.YAStatsCabinet && window.YAStatsCabinet.core) || {};
  }

  function formatMoney(value) {
    if (typeof core().formatMoney === "function") return core().formatMoney(value);
    return Number(value || 0).toLocaleString("ru-RU") + " ₽";
  }

  function formatPercent(value) {
    if (typeof core().formatPercent === "function") return core().formatPercent(value);
    return Number(value || 0).toLocaleString("ru-RU", {
      minimumFractionDigits: 0,
      maximumFractionDigits: 1,
    }) + "%";
  }

  function escapeHtml(value) {
    if (typeof core().escapeHtml === "function") return core().escapeHtml(value);
    return String(value || "")
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function toNumber(value) {
    const parsed = Number(value || 0);
    return Number.isFinite(parsed) ? parsed : 0;
  }

  function currentMonthKey() {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
  }

  function getProfileTariffCode() {
    const candidates = [
      cachedSubscription,
      window.__yaBusinessFinanceSubscription,
    ];
    const subscription = candidates.find((item) => item && typeof item === "object") || {};
    return String(
      subscription.feature_tariff_code
      || subscription.tariff_code
      || subscription.tariff_name
      || ""
    ).trim().toLowerCase();
  }

  function hasBusinessFinanceAccess() {
    return ["pro", "business"].includes(getProfileTariffCode());
  }

  async function ensureBusinessFinanceSubscription() {
    try {
      cachedSubscription = null;
      const response = await fetch("/auth/site/settings", {
        credentials: "same-origin",
        cache: "no-store",
      });
      if (response.ok) {
        const data = await response.json();
        cachedSubscription = data.subscription || null;
        window.__yaBusinessFinanceSubscription = cachedSubscription;
        return cachedSubscription;
      }
    } catch (error) {
      return null;
    }
    return null;
  }

  function getBusinessFinanceUpgradeHtml() {
    return `
      <div class="glass-card p-5">
        <p class="text-sm text-gray-300 mb-3">Этот раздел доступен только на тарифах <span class="text-white font-bold">Pro</span> и <span class="text-white font-bold">Business</span>.</p>
        <div class="rounded-2xl border border-yellow-500/20 bg-yellow-500/10 px-4 py-4 text-sm text-yellow-100">
          Перейдите на более высокий тариф, чтобы сохранять финансы бизнеса по месяцам, сравнивать историю и скачивать PDF-отчеты.
        </div>
      </div>
    `;
  }

  function normalizeMonthKey(value) {
    if (typeof value === "string" && /^\d{4}-\d{2}$/.test(value)) return value;
    return currentMonthKey();
  }

  function monthLabel(monthKey) {
    const normalized = normalizeMonthKey(monthKey);
    const [year, month] = normalized.split("-");
    const index = Math.max(0, Math.min(11, Number(month) - 1));
    return `${MONTH_NAMES[index]} ${year}`;
  }

  function buildMonthOptions() {
    const options = [];
    const cursor = new Date();
    cursor.setDate(1);
    for (let index = 0; index < HISTORY_LIMIT; index += 1) {
      const key = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, "0")}`;
      options.push({ value: key, label: monthLabel(key) });
      cursor.setMonth(cursor.getMonth() + 1);
    }
    return options;
  }

  function normalizeRecord(item) {
    const month = normalizeMonthKey(item && item.month);
    const revenue = Math.round(toNumber(item && item.revenue) * 100) / 100;
    const planRevenue = Math.round(toNumber(item && item.planRevenue) * 100) / 100;
    const planSpend = Math.round(toNumber(item && item.planSpend) * 100) / 100;
    const payroll = Math.round(toNumber(item && item.payroll) * 100) / 100;
    const rent = Math.round(toNumber(item && item.rent) * 100) / 100;
    const taxes = Math.round(toNumber(item && item.taxes) * 100) / 100;
    const adSpend = Math.round(toNumber(item && item.adSpend) * 100) / 100;
    const otherSpend = Math.round(toNumber(item && item.otherSpend) * 100) / 100;
    const note = String(item && item.note || "").trim();
    const totalSpend = Math.round((payroll + rent + taxes + adSpend + otherSpend) * 100) / 100;
    const profit = Math.round((revenue - totalSpend) * 100) / 100;
    const roi = totalSpend > 0 ? Math.round(((profit / totalSpend) * 100) * 10) / 10 : null;
    const adShare = revenue > 0 ? Math.round(((adSpend / revenue) * 100) * 10) / 10 : null;
    const payrollShare = revenue > 0 ? Math.round(((payroll / revenue) * 100) * 10) / 10 : null;

    return {
      month,
      label: monthLabel(month),
      revenue,
      planRevenue,
      planSpend,
      payroll,
      rent,
      taxes,
      adSpend,
      otherSpend,
      note,
      totalSpend,
      profit,
      roi,
      adShare,
      payrollShare,
      breakEvenRevenue: totalSpend,
      updatedAt: item && item.updatedAt ? item.updatedAt : new Date().toISOString(),
    };
  }

  function sortHistory(items) {
    return items.slice().sort((left, right) => String(right.month).localeCompare(String(left.month)));
  }

  function readStorage() {
    try {
      const current = window.localStorage.getItem(STORAGE_KEY);
      if (current) return JSON.parse(current);
      for (const key of LEGACY_KEYS) {
        const legacy = window.localStorage.getItem(key);
        if (legacy) return JSON.parse(legacy);
      }
    } catch (error) {
      return [];
    }
    return [];
  }

  function loadHistory() {
    if (!Array.isArray(historyCache)) return [];
    return sortHistory(historyCache.map(normalizeRecord)).slice(0, HISTORY_LIMIT);
  }

  function saveHistory(items) {
    const next = sortHistory(items.map(normalizeRecord)).slice(0, HISTORY_LIMIT);
    historyCache = next;
    return next;
  }

  async function fetchHistoryFromServer() {
    const response = await fetch("/auth/site/business-finance", {
      credentials: "same-origin",
      cache: "no-store",
    });
    const data = await response.json().catch(() => ({}));
    if (!response.ok) {
      throw new Error(data.detail || "Не удалось загрузить финансы бизнеса.");
    }
    const items = Array.isArray(data.items) ? data.items : [];
    return saveHistory(items);
  }

  async function persistHistory(items) {
    const next = sortHistory(items.map(normalizeRecord)).slice(0, HISTORY_LIMIT);
    const response = await fetch("/auth/site/business-finance", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify({ items: next }),
    });
    const data = await response.json().catch(() => ({}));
    if (!response.ok) {
      throw new Error(data.detail || "Не удалось сохранить финансы бизнеса.");
    }
    historyCache = Array.isArray(data.items) ? sortHistory(data.items.map(normalizeRecord)).slice(0, HISTORY_LIMIT) : next;
    try {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(historyCache));
    } catch (error) {
      // local cache is optional; server is the source of truth
    }
    return historyCache;
  }

  async function ensureHistoryLoaded() {
    if (Array.isArray(historyCache)) return historyCache;

    const legacy = readStorage();
    historyLoadWarning = "";

    try {
      const serverItems = await fetchHistoryFromServer();
      if (serverItems.length) {
        try {
          window.localStorage.setItem(STORAGE_KEY, JSON.stringify(serverItems));
        } catch (error) {
          // ignore optional browser cache write errors
        }
        return serverItems;
      }
    } catch (error) {
      if (Array.isArray(legacy) && legacy.length) {
        historyLoadWarning = "Серверное хранилище пока недоступно. Показываю данные из этого браузера.";
        historyCache = sortHistory(legacy.map(normalizeRecord)).slice(0, HISTORY_LIMIT);
        return historyCache;
      }
      historyLoadWarning = String(error && error.message || "Не удалось загрузить финансы бизнеса.");
      historyCache = [];
      return historyCache;
    }

    if (Array.isArray(legacy) && legacy.length) {
      try {
        return await persistHistory(legacy);
      } catch (error) {
        historyLoadWarning = "Форма открыта, но серверное сохранение пока недоступно. Старые данные показаны локально.";
        historyCache = sortHistory(legacy.map(normalizeRecord)).slice(0, HISTORY_LIMIT);
        return historyCache;
      }
    }

    historyCache = [];
    return historyCache;
  }

  function getRecord(month) {
    const key = normalizeMonthKey(month);
    return loadHistory().find((item) => item.month === key) || normalizeRecord({ month: key });
  }

  async function upsertRecord(payload) {
    const record = normalizeRecord(payload);
    const history = loadHistory().filter((item) => item.month !== record.month);
    history.push(record);
    return persistHistory(history);
  }

  function buildPlanFact(record) {
    const revenueGap = record.planRevenue > 0 ? Math.round((record.revenue - record.planRevenue) * 100) / 100 : null;
    const spendGap = record.planSpend > 0 ? Math.round((record.totalSpend - record.planSpend) * 100) / 100 : null;

    let revenueStatus = "План не задан";
    let revenueTone = "text-yellow-400";
    if (record.planRevenue > 0) {
      revenueStatus = revenueGap >= 0 ? "План по выручке выполняется" : "Выручка ниже плана";
      revenueTone = revenueGap >= 0 ? "text-green-400" : "text-red-400";
    }

    let spendStatus = "Лимит не задан";
    let spendTone = "text-yellow-400";
    if (record.planSpend > 0) {
      spendStatus = spendGap <= 0 ? "Расходы в лимите" : "Расходы выше лимита";
      spendTone = spendGap <= 0 ? "text-green-400" : "text-red-400";
    }

    return {
      revenueGap,
      spendGap,
      revenueStatus,
      revenueTone,
      spendStatus,
      spendTone,
    };
  }

  function buildExpenseNorm(record, previousRecord) {
    const revenueGrowth = previousRecord && previousRecord.revenue > 0
      ? ((record.revenue - previousRecord.revenue) / previousRecord.revenue) * 100
      : null;
    const adGrowth = previousRecord && previousRecord.adSpend > 0
      ? ((record.adSpend - previousRecord.adSpend) / previousRecord.adSpend) * 100
      : null;
    const payrollGrowth = previousRecord && previousRecord.payroll > 0
      ? ((record.payroll - previousRecord.payroll) / previousRecord.payroll) * 100
      : null;

    const reasons = [];
    if (record.revenue > 0 && record.totalSpend > record.revenue) {
      reasons.push("все расходы уже выше выручки");
    }
    if (record.adShare != null && record.adShare > 35) {
      reasons.push("реклама забирает слишком большую долю выручки");
    }
    if (record.payrollShare != null && record.payrollShare > 45) {
      reasons.push("зарплаты съедают слишком большую долю выручки");
    }
    if (revenueGrowth != null && adGrowth != null && adGrowth > revenueGrowth + 10) {
      reasons.push("реклама растет быстрее выручки");
    }
    if (revenueGrowth != null && payrollGrowth != null && payrollGrowth > revenueGrowth + 10) {
      reasons.push("зарплаты растут быстрее выручки");
    }

    if (record.revenue <= 0 && record.totalSpend > 0) {
      return {
        label: "Нужны данные",
        toneClass: "text-yellow-400",
        description: "Пока нет выручки, поэтому нельзя честно оценить норму расходов.",
      };
    }

    if (!reasons.length) {
      return {
        label: "В норме",
        toneClass: "text-green-400",
        description: "Пока расходы выглядят здорово относительно выручки. Перегрева не видно.",
      };
    }

    return {
      label: "Проверить",
      toneClass: "text-red-400",
      description: `Сейчас стоит проверить: ${reasons.join(", ")}.`,
    };
  }

  function buildSummary(record, previousRecord, expenseNorm) {
    const lines = [];

    if (record.revenue <= 0 && record.totalSpend > 0) {
      lines.push("Пока внесены только расходы. Добавьте выручку, чтобы увидеть реальный итог бизнеса.");
    } else if (record.profit >= 0) {
      lines.push(`Сейчас бизнес остается в плюсе примерно на ${formatMoney(record.profit)} после всех расходов.`);
    } else {
      lines.push(`Сейчас бизнес в минусе примерно на ${formatMoney(Math.abs(record.profit))}. Стоит пересмотреть расходы или поднять выручку.`);
    }

    lines.push(`Точка безубыточности на этот месяц: ${formatMoney(record.breakEvenRevenue)}.`);
    lines.push(`Норма расходов: ${expenseNorm.label}. ${expenseNorm.description}`);

    if (record.adShare != null) {
      lines.push(`Реклама занимает около ${formatPercent(record.adShare)} от выручки за месяц.`);
    }

    if (record.note) {
      lines.push(`Комментарий к месяцу: ${record.note}`);
    }

    if (previousRecord) {
      const revenueDiff = record.revenue - previousRecord.revenue;
      const profitDiff = record.profit - previousRecord.profit;
      lines.push(
        revenueDiff >= 0
          ? `Выручка выше прошлого месяца на ${formatMoney(revenueDiff)}.`
          : `Выручка ниже прошлого месяца на ${formatMoney(Math.abs(revenueDiff))}.`
      );
      lines.push(
        profitDiff >= 0
          ? `Финальный результат лучше прошлого месяца на ${formatMoney(profitDiff)}.`
          : `Финальный результат хуже прошлого месяца на ${formatMoney(Math.abs(profitDiff))}.`
      );
    } else {
      lines.push("Как только появится второй месяц, раздел начнет показывать сравнение с прошлым периодом.");
    }

    return lines;
  }

  function buildChart(history) {
    if (!history.length) {
      return `<div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-5 text-sm text-gray-500">История пока пустая. Сохраните хотя бы один месяц, и здесь появится сравнение выручки, расходов и структуры затрат.</div>`;
    }

    const ordered = history.slice().reverse();
    const maxValue = Math.max(1, ...ordered.flatMap((item) => [item.revenue, item.totalSpend, item.planRevenue, item.planSpend]));

    return `
      <div class="grid gap-4">
        ${ordered.map((item) => {
          const revenueWidth = Math.max(3, Math.round((item.revenue / maxValue) * 100));
          const totalSpendWidth = Math.max(3, Math.round((item.totalSpend / maxValue) * 100));
          const payrollWidth = item.totalSpend > 0 ? (item.payroll / item.totalSpend) * 100 : 0;
          const rentWidth = item.totalSpend > 0 ? (item.rent / item.totalSpend) * 100 : 0;
          const taxesWidth = item.totalSpend > 0 ? (item.taxes / item.totalSpend) * 100 : 0;
          const adWidth = item.totalSpend > 0 ? (item.adSpend / item.totalSpend) * 100 : 0;
          const otherWidth = item.totalSpend > 0 ? (item.otherSpend / item.totalSpend) * 100 : 0;
          return `
            <div class="rounded-2xl border border-white/8 bg-white/3 p-4">
              <div class="flex items-center justify-between gap-3 mb-3">
                <p class="text-sm font-bold">${escapeHtml(item.label)}</p>
                <p class="text-xs text-gray-500">${item.profit >= 0 ? "Плюс" : "Минус"} ${escapeHtml(formatMoney(item.profit))}</p>
              </div>
              <div class="space-y-3">
                <div>
                  <div class="flex items-center justify-between gap-3 text-xs text-gray-400 mb-2">
                    <span>Выручка</span>
                    <span>${escapeHtml(formatMoney(item.revenue))}${item.planRevenue > 0 ? ` / план ${escapeHtml(formatMoney(item.planRevenue))}` : ""}</span>
                  </div>
                  <div class="h-3 rounded-full bg-white/6 overflow-hidden">
                    <div class="h-full rounded-full bg-green-500/90" style="width:${revenueWidth}%"></div>
                  </div>
                </div>
                <div>
                  <div class="flex items-center justify-between gap-3 text-xs text-gray-400 mb-2">
                    <span>Все расходы</span>
                    <span>${escapeHtml(formatMoney(item.totalSpend))}${item.planSpend > 0 ? ` / лимит ${escapeHtml(formatMoney(item.planSpend))}` : ""}</span>
                  </div>
                  <div class="h-3 rounded-full bg-white/6 overflow-hidden" style="width:${totalSpendWidth}%">
                    <div class="h-full flex">
                      <div class="bg-sky-400/90" style="width:${payrollWidth}%"></div>
                      <div class="bg-violet-400/90" style="width:${rentWidth}%"></div>
                      <div class="bg-emerald-400/90" style="width:${taxesWidth}%"></div>
                      <div class="bg-yellow-400/90" style="width:${adWidth}%"></div>
                      <div class="bg-rose-400/90" style="width:${otherWidth}%"></div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-wrap gap-2 text-[11px] text-gray-400">
                  <span class="rounded-full border border-white/8 px-2 py-1">Зарплаты ${escapeHtml(formatMoney(item.payroll))}</span>
                  <span class="rounded-full border border-white/8 px-2 py-1">Аренда ${escapeHtml(formatMoney(item.rent))}</span>
                  <span class="rounded-full border border-white/8 px-2 py-1">Налоги ${escapeHtml(formatMoney(item.taxes))}</span>
                  <span class="rounded-full border border-white/8 px-2 py-1">Реклама ${escapeHtml(formatMoney(item.adSpend))}</span>
                  <span class="rounded-full border border-white/8 px-2 py-1">Прочее ${escapeHtml(formatMoney(item.otherSpend))}</span>
                </div>
              </div>
            </div>
          `;
        }).join("")}
      </div>
    `;
  }

  function buildHistoryRows(history) {
    if (!history.length) {
      return `<div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-5 text-sm text-gray-500">Пока нет сохраненных месяцев для сравнения.</div>`;
    }

    return history.map((item) => `
      <div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-4">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-sm font-bold">${escapeHtml(item.label)}</p>
            <p class="text-xs text-gray-500 mt-1">Зарплаты ${escapeHtml(formatMoney(item.payroll))} • Аренда ${escapeHtml(formatMoney(item.rent))} • Налоги ${escapeHtml(formatMoney(item.taxes))} • Реклама ${escapeHtml(formatMoney(item.adSpend))} • Прочее ${escapeHtml(formatMoney(item.otherSpend))}</p>
            ${item.note ? `<p class="text-xs text-gray-400 mt-2">${escapeHtml(item.note)}</p>` : ""}
          </div>
          <div class="text-right">
            <p class="text-sm font-bold ${item.profit >= 0 ? "text-green-400" : "text-red-400"}">${escapeHtml(formatMoney(item.profit))}</p>
            <p class="text-xs text-gray-500 mt-1">${item.roi != null ? `ROI ${escapeHtml(formatPercent(item.roi))}` : "ROI пока не считается"}</p>
          </div>
        </div>
      </div>
    `).join("");
  }

  function buildPdfHtml(record, history, expenseNorm, planFact) {
    const generatedAt = new Date().toLocaleString("ru-RU");
    const categories = [
      { name: "Зарплаты", value: record.payroll, color: "#38bdf8" },
      { name: "Аренда", value: record.rent, color: "#8b5cf6" },
      { name: "Налоги", value: record.taxes, color: "#22c55e" },
      { name: "Реклама", value: record.adSpend, color: "#ffcc00" },
      { name: "Прочее", value: record.otherSpend, color: "#fb7185" },
    ];
    const positiveCategories = categories.filter((item) => item.value > 0);
    const total = Math.max(record.totalSpend, 1);
    let cursor = 0;
    const piePaths = positiveCategories.map((item) => {
      const ratio = item.value / total;
      const start = cursor;
      const end = cursor + ratio;
      cursor = end;
      const largeArc = end - start > 0.5 ? 1 : 0;
      const startAngle = (start * Math.PI * 2) - (Math.PI / 2);
      const endAngle = (end * Math.PI * 2) - (Math.PI / 2);
      const x1 = 100 + (84 * Math.cos(startAngle));
      const y1 = 100 + (84 * Math.sin(startAngle));
      const x2 = 100 + (84 * Math.cos(endAngle));
      const y2 = 100 + (84 * Math.sin(endAngle));
      const path = `M 100 100 L ${x1.toFixed(3)} ${y1.toFixed(3)} A 84 84 0 ${largeArc} 1 ${x2.toFixed(3)} ${y2.toFixed(3)} Z`;
      return `<path d="${path}" fill="${item.color}"></path>`;
    }).join("");

    return `
      <!DOCTYPE html>
      <html lang="ru">
      <head>
        <meta charset="UTF-8">
        <title>Финансы бизнеса — ${escapeHtml(record.label)}</title>
        <style>
          :root {
            --yellow: #ffcc00;
            --dark: #0b0d10;
            --text: #101828;
            --muted: #667085;
            --line: #e4e7ec;
            --soft: #f8fafc;
          }
          * { box-sizing: border-box; }
          body {
            margin: 0;
            padding: 24px;
            background: #fff;
            color: var(--text);
            font-family: Inter, Arial, sans-serif;
          }
          .page {
            max-width: 1040px;
            margin: 0 auto;
          }
          .hero {
            position: relative;
            overflow: hidden;
            background:
              radial-gradient(circle at top right, rgba(255,204,0,0.20), transparent 32%),
              linear-gradient(135deg, #0b0d10 0%, #171a20 100%);
            color: #fff;
            border-radius: 28px;
            padding: 30px;
            margin-bottom: 22px;
          }
          .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.04), transparent);
            pointer-events: none;
          }
          .hero-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 18px;
          }
          .brand {
            display: flex;
            align-items: center;
            gap: 14px;
          }
          .brand-box {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: var(--yellow);
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            font-weight: 900;
            box-shadow: 0 18px 34px rgba(255,204,0,0.2);
          }
          .brand-copy small {
            display: block;
            color: var(--yellow);
            text-transform: uppercase;
            letter-spacing: .28em;
            font-size: 10px;
            margin-bottom: 6px;
          }
          .brand-copy strong {
            display: block;
            font-size: 30px;
            line-height: 1.05;
          }
          .hero-note {
            color: rgba(255,255,255,.74);
            font-size: 12px;
            line-height: 1.6;
          }
          .hero-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 18px;
          }
          .hero-card {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 18px;
            padding: 14px;
          }
          .hero-card span {
            display: block;
            color: rgba(255,255,255,.62);
            text-transform: uppercase;
            letter-spacing: .18em;
            font-size: 10px;
            margin-bottom: 8px;
          }
          .hero-card strong {
            font-size: 24px;
            line-height: 1.2;
          }
          .layout {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            gap: 18px;
          }
          .section {
            margin-top: 20px;
          }
          .section h2 {
            margin: 0 0 12px;
            font-size: 18px;
            line-height: 1.2;
          }
          .cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
          }
          .card {
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 16px;
            background: var(--soft);
          }
          .label {
            display: block;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .18em;
            font-size: 10px;
            margin-bottom: 8px;
          }
          .value {
            font-size: 26px;
            font-weight: 900;
            line-height: 1.15;
          }
          .muted {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.55;
            margin-top: 8px;
          }
          .good { color: #15803d; }
          .bad { color: #b42318; }
          .warn { color: #9a6700; }
          .chart-shell {
            border: 1px solid var(--line);
            border-radius: 24px;
            background: linear-gradient(180deg, #fff, #f8fafc);
            padding: 18px;
          }
          .pie-wrap {
            display: grid;
            grid-template-columns: 210px 1fr;
            gap: 18px;
            align-items: center;
          }
          .pie-box {
            position: relative;
            width: 210px;
            height: 210px;
          }
          .pie-svg {
            width: 210px;
            height: 210px;
            display: block;
          }
          .pie-hole {
            position: absolute;
            inset: 56px;
            border-radius: 999px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
          }
          .pie-hole span {
            font-size: 10px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .16em;
          }
          .pie-hole strong {
            font-size: 24px;
            line-height: 1.1;
          }
          .legend {
            display: grid;
            gap: 10px;
          }
          .legend-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 10px;
            align-items: center;
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 11px 12px;
            background: #fff;
          }
          .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 999px;
          }
          .story-card,
          .history-item {
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 14px;
            background: #fff;
          }
          .history-list {
            display: grid;
            gap: 10px;
          }
          .footer {
            margin-top: 24px;
            color: var(--muted);
            font-size: 11px;
            text-align: right;
          }
        </style>
      </head>
      <body>
        <div class="page">
          <section class="hero">
            <div class="hero-top">
              <div class="brand">
                <div class="brand-box">YA</div>
                <div class="brand-copy">
                  <small>YA Stats Web</small>
                  <strong>Финансы бизнеса</strong>
                </div>
              </div>
              <div class="hero-note">Отчет сформирован ${escapeHtml(generatedAt)}</div>
            </div>
            <div class="hero-note">${escapeHtml(record.label)} • Красивый фирменный отчет по выручке, расходам, плану и итоговому результату бизнеса.</div>
            <div class="hero-grid">
              <div class="hero-card"><span>Выручка</span><strong>${escapeHtml(formatMoney(record.revenue))}</strong></div>
              <div class="hero-card"><span>Все расходы</span><strong>${escapeHtml(formatMoney(record.totalSpend))}</strong></div>
              <div class="hero-card"><span>Чистый итог</span><strong class="${record.profit >= 0 ? "good" : "bad"}">${escapeHtml(formatMoney(record.profit))}</strong></div>
              <div class="hero-card"><span>ROI</span><strong>${record.roi != null ? escapeHtml(formatPercent(record.roi)) : "—"}</strong></div>
            </div>
          </section>

          <div class="layout">
            <div>
              <section class="section">
                <h2>Ключевые выводы</h2>
                <div class="cards">
                  <div class="card">
                    <span class="label">Точка безубыточности</span>
                    <div class="value">${escapeHtml(formatMoney(record.breakEvenRevenue))}</div>
                    <div class="muted">Минимальная выручка за месяц, чтобы бизнес не ушел в минус.</div>
                  </div>
                  <div class="card">
                    <span class="label">Норма расходов</span>
                    <div class="value ${expenseNorm.toneClass.includes("green") ? "good" : expenseNorm.toneClass.includes("red") ? "bad" : "warn"}">${escapeHtml(expenseNorm.label)}</div>
                    <div class="muted">${escapeHtml(expenseNorm.description)}</div>
                  </div>
                </div>
              </section>

              <section class="section">
                <h2>План-факт месяца</h2>
                <div class="cards">
                  <div class="card">
                    <span class="label">План по выручке</span>
                    <div class="value">${escapeHtml(formatMoney(record.planRevenue || 0))}</div>
                    <div class="muted">${escapeHtml(planFact.revenueStatus)}</div>
                  </div>
                  <div class="card">
                    <span class="label">Лимит расходов</span>
                    <div class="value">${escapeHtml(formatMoney(record.planSpend || 0))}</div>
                    <div class="muted">${escapeHtml(planFact.spendStatus)}</div>
                  </div>
                </div>
              </section>

              <section class="section">
                <h2>Диаграмма расходов</h2>
                <div class="chart-shell">
                  <div class="pie-wrap">
                    <div class="pie-box">
                      <svg class="pie-svg" viewBox="0 0 200 200" aria-hidden="true">
                        ${piePaths || '<circle cx="100" cy="100" r="84" fill="#d1d5db"></circle>'}
                      </svg>
                      <div class="pie-hole">
                        <span>Расходы</span>
                        <strong>${escapeHtml(formatMoney(record.totalSpend))}</strong>
                      </div>
                    </div>
                    <div class="legend">
                      ${categories.map((item) => {
                        const share = record.totalSpend > 0 ? (item.value / record.totalSpend) * 100 : 0;
                        return `
                          <div class="legend-item">
                            <span class="legend-dot" style="background:${item.color};"></span>
                            <div>
                              <strong style="font-size:13px;">${escapeHtml(item.name)}</strong>
                              <div class="muted" style="margin-top:2px;">${escapeHtml(formatPercent(share))} от всех расходов</div>
                            </div>
                            <strong style="font-size:14px;">${escapeHtml(formatMoney(item.value))}</strong>
                          </div>
                        `;
                      }).join("")}
                    </div>
                  </div>
                </div>
              </section>
            </div>

            <div>
              <section class="section">
                <h2>Комментарий месяца</h2>
                <div class="story-card">
                  <div class="muted" style="margin-top:0;">${escapeHtml(record.note || "Комментарий к месяцу пока не заполнен.")}</div>
                </div>
              </section>

              <section class="section">
                <h2>История за 6 месяцев</h2>
                <div class="history-list">
                  ${history.map((item) => `
                    <div class="history-item">
                      <strong>${escapeHtml(item.label)}</strong>
                      <div class="muted">Выручка ${escapeHtml(formatMoney(item.revenue))} • Расходы ${escapeHtml(formatMoney(item.totalSpend))} • Итог ${escapeHtml(formatMoney(item.profit))}</div>
                      ${item.note ? `<div class="muted">${escapeHtml(item.note)}</div>` : ""}
                    </div>
                  `).join("")}
                </div>
              </section>
            </div>
          </div>

          <div class="footer">YA Stats • business finance report</div>
        </div>
      </body>
      </html>
    `;
  }

  function buildCurrentPayload() {
    const history = loadHistory();
    const monthValue = document.getElementById("business-finance-month") ? document.getElementById("business-finance-month").value : currentMonthKey();
    const record = normalizeRecord({
      month: monthValue,
      label: monthLabel(monthValue),
      revenue: document.getElementById("business-finance-revenue") ? document.getElementById("business-finance-revenue").value : 0,
      planRevenue: document.getElementById("business-finance-plan-revenue") ? document.getElementById("business-finance-plan-revenue").value : 0,
      planSpend: document.getElementById("business-finance-plan-spend") ? document.getElementById("business-finance-plan-spend").value : 0,
      payroll: document.getElementById("business-finance-payroll") ? document.getElementById("business-finance-payroll").value : 0,
      rent: document.getElementById("business-finance-rent") ? document.getElementById("business-finance-rent").value : 0,
      taxes: document.getElementById("business-finance-taxes") ? document.getElementById("business-finance-taxes").value : 0,
      adSpend: document.getElementById("business-finance-ad-spend") ? document.getElementById("business-finance-ad-spend").value : 0,
      otherSpend: document.getElementById("business-finance-other-spend") ? document.getElementById("business-finance-other-spend").value : 0,
      note: document.getElementById("business-finance-note") ? document.getElementById("business-finance-note").value : "",
    });
    const previous = history.find((item) => item.month < record.month) || null;
    return {
      record,
      history,
      expenseNorm: buildExpenseNorm(record, previous),
      planFact: buildPlanFact(record),
      filename: `ya-stats-business-finance-${record.month || "month"}.pdf`,
    };
  }

  async function downloadPdf() {
    const payload = buildCurrentPayload();
    const response = await fetch("/auth/site/business-finance-pdf", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify(payload),
    });
    if (!response.ok) {
      const text = await response.text();
      throw new Error(text || "Не удалось скачать PDF.");
    }
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = payload.filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.setTimeout(() => window.URL.revokeObjectURL(url), 1000);
  }

  function renderModal(selectedMonth) {
    const month = normalizeMonthKey(selectedMonth);
    const history = loadHistory();
    const current = getRecord(month);
    const previous = history.find((item) => item.month < month) || null;
    const expenseNorm = buildExpenseNorm(current, previous);
    const planFact = buildPlanFact(current);
    const summaryLines = buildSummary(current, previous, expenseNorm);
    const modal = document.getElementById("business-modal");
    const body = document.getElementById("business-modal-body");

    if (!modal || !body) return;

    const kicker = modal.querySelector(".text-yellow-500");
    const title = modal.querySelector("h3");
    if (kicker) kicker.textContent = "Финансы бизнеса";
    if (title) title.textContent = "Расходы, выручка и итог по месяцам";

    if (!hasBusinessFinanceAccess()) {
      body.innerHTML = getBusinessFinanceUpgradeHtml();
      return;
    }

    body.innerHTML = `
      <p class="text-sm text-gray-400 mb-4">Этот раздел живет отдельно от Яндекс Директа. Вы сами вносите расходы и выручку, а кабинет показывает, остается бизнес в плюсе или уже проседает.</p>
      <div class="grid xl:grid-cols-[1.2fr_0.8fr] gap-5">
        <div class="space-y-5">
          <div class="glass-card p-5">
            <div class="flex items-center justify-between gap-3 mb-4">
              <p class="field-label !mb-0">Месяц для заполнения</p>
              <button id="business-finance-pdf-btn" class="btn-secondary px-4 py-2 rounded-xl text-sm">Скачать PDF</button>
            </div>
            <div id="business-finance-status" class="hidden rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-100 mb-4"></div>
            <select id="business-finance-month" class="field-select">
              ${buildMonthOptions().map((option) => `<option value="${option.value}" ${option.value === month ? "selected" : ""}>${escapeHtml(option.label)}</option>`).join("")}
            </select>
            <div class="grid md:grid-cols-2 gap-4 mt-4">
              <div>
                <label class="field-label">Выручка</label>
                <input id="business-finance-revenue" class="field-input" type="number" min="0" step="0.01" value="${current.revenue}">
              </div>
              <div>
                <label class="field-label">План по выручке</label>
                <input id="business-finance-plan-revenue" class="field-input" type="number" min="0" step="0.01" value="${current.planRevenue}">
              </div>
              <div>
                <label class="field-label">Зарплаты</label>
                <input id="business-finance-payroll" class="field-input" type="number" min="0" step="0.01" value="${current.payroll}">
              </div>
              <div>
                <label class="field-label">Аренда</label>
                <input id="business-finance-rent" class="field-input" type="number" min="0" step="0.01" value="${current.rent}">
              </div>
              <div>
                <label class="field-label">Налоги</label>
                <input id="business-finance-taxes" class="field-input" type="number" min="0" step="0.01" value="${current.taxes}">
              </div>
              <div>
                <label class="field-label">Расходы на рекламу</label>
                <input id="business-finance-ad-spend" class="field-input" type="number" min="0" step="0.01" value="${current.adSpend}">
              </div>
              <div>
                <label class="field-label">Прочие расходы</label>
                <input id="business-finance-other-spend" class="field-input" type="number" min="0" step="0.01" value="${current.otherSpend}">
              </div>
              <div>
                <label class="field-label">Лимит расходов</label>
                <input id="business-finance-plan-spend" class="field-input" type="number" min="0" step="0.01" value="${current.planSpend}">
              </div>
            </div>
            <div class="mt-4">
              <label class="field-label">Комментарий к месяцу</label>
              <textarea id="business-finance-note" class="field-textarea" placeholder="Например: наняли сотрудника, была акция, сезонная просадка, выросла аренда, изменились налоги.">${escapeHtml(current.note)}</textarea>
            </div>
            <div class="flex justify-end mt-4">
              <button id="business-finance-save-btn" class="btn-primary px-5 py-3 rounded-xl text-sm">Сохранить месяц</button>
            </div>
          </div>

          <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
            <div class="glass-card p-4"><p class="field-label">Все расходы</p><p class="text-2xl font-black">${formatMoney(current.totalSpend)}</p></div>
            <div class="glass-card p-4"><p class="field-label">Чистый итог</p><p class="text-2xl font-black ${current.profit >= 0 ? "text-green-400" : "text-red-400"}">${formatMoney(current.profit)}</p></div>
            <div class="glass-card p-4"><p class="field-label">ROI</p><p class="text-2xl font-black">${current.roi != null ? formatPercent(current.roi) : "—"}</p></div>
            <div class="glass-card p-4"><p class="field-label">Доля рекламы</p><p class="text-2xl font-black">${current.adShare != null ? formatPercent(current.adShare) : "—"}</p></div>
          </div>

          <div class="grid md:grid-cols-2 gap-4">
            <div class="glass-card p-4">
              <p class="field-label">Точка безубыточности</p>
              <p class="text-2xl font-black">${formatMoney(current.breakEvenRevenue)}</p>
              <p class="text-xs text-gray-500 mt-3">Сколько выручки нужно за месяц, чтобы просто выйти в ноль.</p>
            </div>
            <div class="glass-card p-4">
              <p class="field-label">Норма расходов</p>
              <p class="text-2xl font-black ${expenseNorm.toneClass}">${escapeHtml(expenseNorm.label)}</p>
              <p class="text-xs text-gray-500 mt-3">${escapeHtml(expenseNorm.description)}</p>
            </div>
          </div>

          <div class="grid md:grid-cols-2 gap-4">
            <div class="glass-card p-4">
              <p class="field-label">План-факт по выручке</p>
              <p class="text-2xl font-black ${planFact.revenueTone}">${escapeHtml(planFact.revenueStatus)}</p>
              <p class="text-xs text-gray-500 mt-3">${current.planRevenue > 0 ? `Факт ${escapeHtml(formatMoney(current.revenue))} против плана ${escapeHtml(formatMoney(current.planRevenue))}.` : "Задайте план по выручке, чтобы видеть отклонение."}</p>
            </div>
            <div class="glass-card p-4">
              <p class="field-label">План-факт по расходам</p>
              <p class="text-2xl font-black ${planFact.spendTone}">${escapeHtml(planFact.spendStatus)}</p>
              <p class="text-xs text-gray-500 mt-3">${current.planSpend > 0 ? `Факт ${escapeHtml(formatMoney(current.totalSpend))} против лимита ${escapeHtml(formatMoney(current.planSpend))}.` : "Задайте лимит расходов, чтобы видеть перерасход."}</p>
            </div>
          </div>

          <div class="glass-card p-5">
            <p class="field-label">График за последние 6 месяцев</p>
            <p class="text-xs text-gray-500 mb-4">Здесь видно не только выручку и все расходы, но и из чего именно эти расходы состоят.</p>
            ${buildChart(history)}
          </div>
        </div>

        <div class="space-y-5">
          <div class="glass-card p-5">
            <p class="field-label">Что это значит простыми словами</p>
            <div class="space-y-3 mt-3">
              ${summaryLines.map((item) => `<div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300">${escapeHtml(item)}</div>`).join("")}
            </div>
          </div>

          <div class="glass-card p-5">
            <p class="field-label">Сравнение по месяцам</p>
            <div class="space-y-3 mt-3">${buildHistoryRows(history)}</div>
          </div>

          <div class="glass-card p-5">
            <p class="field-label">Что смотреть в первую очередь</p>
            <div class="space-y-3 mt-3">
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300">Если точка безубыточности выше вашей обычной выручки, бизнесу тяжело держаться в плюсе. Значит, надо или резать расходы, или поднимать продажи.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300">Если раздел показывает статус “Проверить”, первым делом смотрите, что именно растет быстрее выручки: реклама, зарплаты или прочие траты.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300">Комментарий к месяцу помогает потом не гадать, почему цифры изменились: акция, новый сотрудник, сезонность, аренда, налоги.</div>
            </div>
          </div>
        </div>
      </div>
    `;

    const statusBox = document.getElementById("business-finance-status");
    if (statusBox && historyLoadWarning) {
      statusBox.textContent = historyLoadWarning;
      statusBox.classList.remove("hidden");
    }

    document.getElementById("business-finance-month").addEventListener("change", (event) => {
      renderModal(event.target.value);
    });

    document.getElementById("business-finance-save-btn").addEventListener("click", async () => {
      const monthValue = document.getElementById("business-finance-month").value;
      const statusBox = document.getElementById("business-finance-status");
      try {
        if (statusBox) {
          statusBox.textContent = "";
          statusBox.classList.add("hidden");
        }
        await upsertRecord({
          month: monthValue,
          revenue: document.getElementById("business-finance-revenue").value,
          planRevenue: document.getElementById("business-finance-plan-revenue").value,
          planSpend: document.getElementById("business-finance-plan-spend").value,
          payroll: document.getElementById("business-finance-payroll").value,
          rent: document.getElementById("business-finance-rent").value,
          taxes: document.getElementById("business-finance-taxes").value,
          adSpend: document.getElementById("business-finance-ad-spend").value,
          otherSpend: document.getElementById("business-finance-other-spend").value,
          note: document.getElementById("business-finance-note").value,
        });
        renderModal(monthValue);
      } catch (error) {
        if (statusBox) {
          statusBox.textContent = String(error && error.message || "Не удалось сохранить месяц.");
          statusBox.classList.remove("hidden");
        }
      }
    });

    document.getElementById("business-finance-pdf-btn").addEventListener("click", async () => {
      const statusBox = document.getElementById("business-finance-status");
      try {
        if (statusBox) {
          statusBox.textContent = "";
          statusBox.classList.add("hidden");
        }
        await downloadPdf();
      } catch (error) {
        window.alert(String(error && error.message || "Не удалось скачать PDF."));
      }
    });

    const originalPdfButton = document.getElementById("business-finance-pdf-btn");
    if (originalPdfButton) {
      const cleanPdfButton = originalPdfButton.cloneNode(true);
      originalPdfButton.replaceWith(cleanPdfButton);
      cleanPdfButton.addEventListener("click", async () => {
        const statusBox = document.getElementById("business-finance-status");
        if (statusBox) {
          statusBox.textContent = "";
          statusBox.classList.add("hidden");
        }
        try {
          await downloadPdf();
        } catch (error) {
          let message = String(error && error.message || "Не удалось скачать PDF.");
          if (message.includes("Not Found") || message.includes("404")) {
            message = "PDF-модуль пока не опубликован на сервере. Нужно обновить только маршрут финансового PDF.";
          } else if (message.includes("403")) {
            message = "PDF по финансам бизнеса доступен только на тарифах Pro и Business.";
          }
          if (statusBox) {
            statusBox.textContent = message;
            statusBox.classList.remove("hidden");
          }
        }
      });
    }
  }

  async function openStandaloneBusinessFinanceModal() {
    if (typeof window.openModal === "function") {
      window.openModal("business-modal");
    }
    await ensureBusinessFinanceSubscription();
    try {
      await ensureHistoryLoaded();
    } catch (error) {
      historyLoadWarning = String(error && error.message || "Не удалось загрузить финансы бизнеса.");
      historyCache = Array.isArray(historyCache) ? historyCache : [];
    }
    renderModal(currentMonthKey());
  }

  function bindButtons() {
    ["open-business-finance-btn", "tool-business-btn"].forEach((id) => {
      const node = document.getElementById(id);
      if (!node || node.dataset.businessFinanceBound === "1") return;
      node.dataset.businessFinanceBound = "1";
      node.addEventListener("click", openStandaloneBusinessFinanceModal);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", bindButtons, { once: true });
  } else {
    bindButtons();
  }

  window.openStandaloneBusinessFinanceModal = openStandaloneBusinessFinanceModal;
  window.openBusinessMetricsModal = openStandaloneBusinessFinanceModal;
})();