// cashflow-page.jsx — Cash flow: баланс, надходження, виплати, прогноз

function CashflowPage({ role }) {
  const accounts = window.DATA.CASH_ACCOUNTS;
  const ops = window.DATA.CASH_OPS;
  const invoices = window.DATA.INVOICES;
  const expenses = window.DATA.EXPENSES;
  const today = "2026-05-26";
  const [horizon, setHorizon] = React.useState(12); // тижнів вперед

  // ===== Поточні баланси =====
  const usdRate = 41.5;
  const totalUah = accounts.reduce((s, a) => s + (a.currency === "UAH" ? a.balance : a.balance * usdRate), 0);
  const mainBalance = accounts.find(a => a.primary)?.balance || 0;

  // ===== Прогноз: побудова тижневих кошиків =====
  const weeks = buildWeeks(today, horizon);
  const monthlyOutflow = expenses.reduce((s, e) => s + (e.monthlyAmount || 0), 0);
  const monthlySalary = window.DATA.TEAM.reduce((s, p) => {
    const pay = window.computePayroll(p.id, p.partRate ? 88 : 176, 176);
    return s + (pay?.net || 0);
  }, 0);

  // Надходження: усі неоплачені інвойси з dueDate у горизонті
  const upcomingIn = invoices.filter(i => i.status !== "paid" && i.dueDate >= today);

  // Виплати: щомісячні витрати (розкидані по тижнях рівномірно) + ЗП в кінці кожного місяця
  // Для прогнозу спрощуємо: за тиждень = monthlyOutflow / 4.33 для нормальних витрат
  const weeklyExpense = monthlyOutflow / 4.33;

  // Заповнюємо тижні
  let runningBalance = totalUah;
  weeks.forEach(w => {
    // надходження
    upcomingIn.forEach(inv => {
      if (inv.dueDate >= w.start && inv.dueDate <= w.end) {
        w.inflow += inv.amount;
        w.inflowItems.push({ kind: "invoice", inv });
      }
    });
    // витрати: розкидаємо щомісячні
    w.outflow += weeklyExpense;
    // ЗП в останньому тижні кожного місяця (приблизно)
    const monthEnd = new Date(w.end);
    const nextDay = new Date(monthEnd);
    nextDay.setDate(nextDay.getDate() + 1);
    if (nextDay.getMonth() !== monthEnd.getMonth()) {
      w.outflow += monthlySalary;
      w.outflowItems.push({ kind: "salary", amount: monthlySalary });
    }
    // Великі субпідряд/експертиза витрати з nextDate в цьому тижні
    expenses.forEach(e => {
      if (e.periodicity === "once" && !e.paid && e.nextDate >= w.start && e.nextDate <= w.end) {
        w.outflow += e.amount;
        w.outflowItems.push({ kind: "expense", e });
      }
    });
    w.net = w.inflow - w.outflow;
    runningBalance += w.net;
    w.balance = runningBalance;
    if (runningBalance < 0) w.hasGap = true;
  });

  const minBalance = Math.min(...weeks.map(w => w.balance), totalUah);
  const gapWeeks = weeks.filter(w => w.hasGap);
  const totalInflow = weeks.reduce((s, w) => s + w.inflow, 0);
  const totalOutflow = weeks.reduce((s, w) => s + w.outflow, 0);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Cash flow</h1>
        <div className="page-sub">
          <span>прогноз надходжень і витрат</span>
          <span className="dot"></span>
          <span>горизонт {horizon} тижнів</span>
          {gapWeeks.length > 0 && <>
            <span className="dot"></span>
            <span style={{color: "var(--late)"}}>можливий касовий розрив у {gapWeeks.length} {window.plural(gapWeeks.length, "тижні", "тижнях", "тижнях")}</span>
          </>}
        </div>
      </div>

      {/* Загальний баланс */}
      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi" style={{background: "var(--bg-active)", borderColor: "var(--accent)"}}>
          <div className="kpi-label">Загальний баланс</div>
          <div className="kpi-value" style={{color: "var(--accent-ink)"}}>{window.formatMoney(Math.round(totalUah))} <span style={{fontSize: 16}}>₴</span></div>
          <div className="kpi-sub">{accounts.length} рахунків · сьогодні</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Очікувані надходження</div>
          <div className="kpi-value" style={{color: "var(--c-green-deep)"}}>+{window.formatMoney(totalInflow)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">{upcomingIn.length} рахунків · {horizon} тижнів</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Заплановані виплати</div>
          <div className="kpi-value" style={{color: "var(--late)"}}>−{window.formatMoney(Math.round(totalOutflow))} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">ЗП · оренда · ПЗ · субпідряд</div>
        </div>
        <div className={`kpi ${gapWeeks.length > 0 ? "is-warn" : ""}`}>
          <div className="kpi-label">Мінімум балансу</div>
          <div className="kpi-value">{window.formatMoney(Math.round(minBalance))} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">{gapWeeks.length > 0 ? "перевір прогноз!" : "усе в нормі"}</div>
        </div>
      </div>

      {/* Графік прогнозу */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Прогноз балансу</h2>
          <span className="section-sub">по тижнях</span>
          <div className="filter-pill" role="tablist" style={{marginLeft: "auto"}}>
            <button className={`filter-pill-item ${horizon === 8 ? "is-active" : ""}`} onClick={() => setHorizon(8)}>8 тижнів</button>
            <button className={`filter-pill-item ${horizon === 12 ? "is-active" : ""}`} onClick={() => setHorizon(12)}>12 тижнів</button>
            <button className={`filter-pill-item ${horizon === 24 ? "is-active" : ""}`} onClick={() => setHorizon(24)}>6 міс</button>
          </div>
        </div>
        <CashflowChart weeks={weeks} initialBalance={totalUah} />
      </section>

      {/* Рахунки */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Рахунки</h2>
          <span className="section-sub">{accounts.length}</span>
        </div>
        <div className="account-grid">
          {accounts.map(a => (
            <div key={a.id} className={`account-card ${a.primary ? "is-primary" : ""}`}>
              <div className="account-head">
                <div>
                  <div className="account-label">{a.label}</div>
                  <div className="account-bank">{a.bank}</div>
                </div>
                {a.primary && <span className="empl-chip empl-staff">основний</span>}
              </div>
              <div className="account-balance">
                {a.currency === "USD" ? "$" : ""}{window.formatMoney(a.balance)} <span>{a.currency === "USD" ? "USD" : "₴"}</span>
              </div>
              {a.currency === "USD" && (
                <div className="account-uah">≈ {window.formatMoney(Math.round(a.balance * usdRate))} ₴</div>
              )}
              {a.iban && <div className="account-iban">{a.iban}</div>}
            </div>
          ))}
        </div>
      </section>

      {/* Тижнева таблиця прогнозу */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Деталізація по тижнях</h2>
          <span className="section-sub">{horizon} тижнів</span>
        </div>
        <table className="data-table compact-table">
          <thead>
            <tr>
              <th>Тиждень</th>
              <th className="num-col">Надходження</th>
              <th className="num-col">Виплати</th>
              <th className="num-col">Чистий рух</th>
              <th className="num-col">Баланс на кінець</th>
              <th>Деталі</th>
            </tr>
          </thead>
          <tbody>
            {weeks.map((w, idx) => (
              <tr key={idx} className={w.hasGap ? "row-overdue" : ""}>
                <td>
                  <div className="cell-name">{w.label}</div>
                  <div className="cell-sub">{w.range}</div>
                </td>
                <td className="num-col" style={{color: w.inflow > 0 ? "var(--c-green-deep)" : "var(--ink-4)"}}>
                  {w.inflow > 0 ? "+" + window.formatMoney(w.inflow) + " ₴" : "—"}
                </td>
                <td className="num-col" style={{color: "var(--ink-2)"}}>
                  −{window.formatMoney(Math.round(w.outflow))} ₴
                </td>
                <td className={`num-col num-bold`} style={{color: w.net >= 0 ? "var(--c-green-deep)" : "var(--late)"}}>
                  {w.net >= 0 ? "+" : ""}{window.formatMoney(Math.round(w.net))} ₴
                </td>
                <td className="num-col num-bold" style={{color: w.balance < 0 ? "var(--late)" : "var(--ink)"}}>
                  {window.formatMoney(Math.round(w.balance))} ₴
                </td>
                <td>
                  {w.inflowItems.length + w.outflowItems.length > 0
                    ? <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>{w.inflowItems.length + w.outflowItems.length} операцій</button>
                    : <span style={{color: "var(--ink-4)", fontSize: 12}}>тільки регулярні</span>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Останні операції */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Останні операції</h2>
          <span className="section-sub">{ops.length} останніх рухів по рахунках</span>
        </div>
        <table className="data-table compact-table">
          <thead>
            <tr>
              <th style={{width: 90}}>Дата</th>
              <th>Опис</th>
              <th>Рахунок</th>
              <th className="num-col">Сума</th>
            </tr>
          </thead>
          <tbody>
            {ops.map(o => {
              const acc = accounts.find(a => a.id === o.account);
              return (
                <tr key={o.id}>
                  <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(o.date)}</td>
                  <td>
                    <div style={{display: "flex", alignItems: "center", gap: 10}}>
                      <div className={`op-icon op-${o.type}`}>{o.type === "in" ? "↓" : "↑"}</div>
                      <span style={{fontSize: 13.5}}>{o.note}</span>
                    </div>
                  </td>
                  <td style={{fontSize: 12, color: "var(--ink-3)"}}>{acc?.label}</td>
                  <td className="num-col num-bold" style={{color: o.amount > 0 ? "var(--c-green-deep)" : "var(--ink)"}}>
                    {o.amount > 0 ? "+" : ""}{window.formatMoney(o.amount)} ₴
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>
    </div>
  );
}

// ============ ГРАФІК ============
function CashflowChart({ weeks, initialBalance }) {
  const allBalances = [initialBalance, ...weeks.map(w => w.balance)];
  const maxBal = Math.max(...allBalances);
  const minBal = Math.min(...allBalances, 0);
  const range = maxBal - minBal || 1;

  // bars: positive = inflow up, negative = outflow down
  const maxBar = Math.max(...weeks.map(w => Math.max(w.inflow, w.outflow)), 1);

  return (
    <div className="cashflow-graph">
      {/* Bars: in/out per week */}
      <div className="cf-bars">
        <div className="cf-zero-line"></div>
        {weeks.map((w, idx) => (
          <div key={idx} className="cf-bar-col">
            {w.inflow > 0 && (
              <div className="cf-bar cf-bar-in" style={{height: (w.inflow / maxBar * 60) + "px"}}
                   title={`Надходження: ${window.formatMoney(w.inflow)} ₴`}></div>
            )}
            {w.outflow > 0 && (
              <div className="cf-bar cf-bar-out" style={{height: (w.outflow / maxBar * 60) + "px"}}
                   title={`Виплати: ${window.formatMoney(Math.round(w.outflow))} ₴`}></div>
            )}
          </div>
        ))}
      </div>
      {/* Balance line */}
      <svg className="cf-line" viewBox={`0 0 ${weeks.length * 60} 200`} preserveAspectRatio="none">
        <polyline
          points={weeks.map((w, i) => {
            const x = i * 60 + 30;
            const y = 200 - ((w.balance - minBal) / range) * 180 - 10;
            return `${x},${y}`;
          }).join(" ")}
          fill="none"
          stroke="var(--c-green-deep)"
          strokeWidth="2.5"
          strokeLinejoin="round"
          strokeLinecap="round"
        />
        {weeks.map((w, i) => {
          const x = i * 60 + 30;
          const y = 200 - ((w.balance - minBal) / range) * 180 - 10;
          return (
            <g key={i}>
              <circle cx={x} cy={y} r="4" fill={w.balance < 0 ? "var(--late)" : "var(--c-green-deep)"} />
            </g>
          );
        })}
      </svg>
      {/* Week labels */}
      <div className="cf-labels">
        {weeks.map((w, idx) => (
          <div key={idx} className={`cf-label ${w.hasGap ? "is-gap" : ""}`}>
            <div className="cf-label-week">{w.label}</div>
            <div className="cf-label-bal">{Math.round(w.balance / 1000)}k</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ helpers ============
function buildWeeks(todayIso, count) {
  const result = [];
  const today = new Date(todayIso);
  for (let i = 0; i < count; i++) {
    const start = new Date(today);
    start.setDate(start.getDate() + i * 7);
    const end = new Date(start);
    end.setDate(end.getDate() + 6);
    result.push({
      start: start.toISOString().slice(0, 10),
      end: end.toISOString().slice(0, 10),
      label: i === 0 ? "Цей тиждень" : i === 1 ? "Наст. тиждень" : `${start.getDate()}.${pad2(start.getMonth()+1)}`,
      range: `${start.getDate()}.${pad2(start.getMonth()+1)}–${end.getDate()}.${pad2(end.getMonth()+1)}`,
      inflow: 0, outflow: 0, net: 0, balance: 0,
      inflowItems: [], outflowItems: [],
      hasGap: false,
    });
  }
  return result;
}
function pad2(n) { return String(n).padStart(2, "0"); }

window.CashflowPage = CashflowPage;