// cash-register.jsx — Каса (неофіційний готівковий контур)
// ⚠ Поза офіційним обліком. Доступ лише director / accountant + перемикач видимості готівки.
// Фіксує готівкові надходження (підрядники/замовники) і видатки (ЗП «у конверті», постачальники).

function CashKindChip({ kind }) {
  const k = (window.CASH_LEDGER_KINDS || {})[kind] || { label: kind, dir: "both" };
  return <span className={`cash-kind-chip dir-${k.dir}`}><window.Ico e={k.icon} size={12} /> {k.label}</span>;
}

function CashAddForm({ onAdd, onCancel }) {
  const KINDS = window.CASH_LEDGER_KINDS;
  const [dir, setDir] = React.useState("in");
  const [kind, setKind] = React.useState("client");
  const [counterparty, setCounterparty] = React.useState("");
  const [amount, setAmount] = React.useState("");
  const [date, setDate] = React.useState(window.SYS_DATE);
  const [note, setNote] = React.useState("");

  const kindOpts = Object.entries(KINDS).filter(([, v]) => v.dir === dir || v.dir === "both");
  React.useEffect(() => {
    if (!kindOpts.some(([id]) => id === kind)) setKind(kindOpts[0][0]);
  }, [dir]);

  const num = parseFloat(String(amount).replace(/\s/g, "").replace(",", ".")) || 0;
  const canSave = counterparty.trim() && num > 0;
  const save = () => {
    if (!canSave) return;
    onAdd({ id: "c-" + Math.random().toString(36).slice(2, 8), date, dir, kind, amount: Math.round(num), counterparty: counterparty.trim(), note: note.trim() });
  };

  return (
    <div className="cash-addform">
      <div className="cash-addform-grid">
        <div className="cp-row">
          <label className="cp-label">Напрям</label>
          <div className="nt-seg">
            <button type="button" className={`nt-seg-item ${dir === "in" ? "is-active" : ""}`} onClick={() => setDir("in")}>Надходження</button>
            <button type="button" className={`nt-seg-item ${dir === "out" ? "is-active" : ""}`} onClick={() => setDir("out")}>Видаток</button>
          </div>
        </div>
        <div className="cp-row">
          <label className="cp-label">Призначення</label>
          <select className="cp-input" value={kind} onChange={(e) => setKind(e.target.value)}>
            {kindOpts.map(([id, v]) => <option key={id} value={id}>{v.label}</option>)}
          </select>
        </div>
        <div className="cp-row">
          <label className="cp-label">Контрагент / опис <span className="cp-required">*</span></label>
          <input className="cp-input" value={counterparty} onChange={(e) => setCounterparty(e.target.value)} placeholder="Напр.: Замовник котеджу · Лісники" />
        </div>
        <div className="cp-row">
          <label className="cp-label">Сума, ₴ <span className="cp-required">*</span></label>
          <input className="cp-input" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="напр.: 40000" inputMode="numeric" />
        </div>
        <div className="cp-row">
          <label className="cp-label">Дата</label>
          <input className="cp-input" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        </div>
        <div className="cp-row cp-row-full">
          <label className="cp-label">Нотатка</label>
          <input className="cp-input" value={note} onChange={(e) => setNote(e.target.value)} placeholder="деталі (необов'язково)" />
        </div>
      </div>
      <div className="cash-addform-foot">
        <button className="btn" onClick={onCancel}>Скасувати</button>
        <button className="btn btn-primary" onClick={save} disabled={!canSave} style={!canSave ? { opacity: 0.5 } : {}}>Записати операцію</button>
      </div>
    </div>
  );
}

function CashRegisterPage({ role }) {
  const cashVisible = window.useCashVisible();
  const L = window.DATA.CASH_LEDGER;
  const [ops, setOps] = React.useState(L.ops);
  const [filter, setFilter] = React.useState("all"); // all | in | out
  const [adding, setAdding] = React.useState(false);

  // 1) Доступ за роллю
  if (!window.canSeeCash(role)) {
    return (
      <div className="page">
        <div className="cash-locked">
          <div className="cash-locked-ic"><window.Ico name="lock" size={26} /></div>
          <h2>Доступ обмежено</h2>
          <p>Готівковий контур бачать лише директор і бухгалтер.</p>
        </div>
      </div>
    );
  }

  // Хронологічний баланс
  const chrono = [...ops].sort((a, b) => a.date.localeCompare(b.date));
  let run = L.opening;
  const balanceById = {};
  chrono.forEach(o => { run += (o.dir === "in" ? o.amount : -o.amount); balanceById[o.id] = run; });
  const balance = run;

  const totalIn = ops.filter(o => o.dir === "in").reduce((s, o) => s + o.amount, 0);
  const totalOut = ops.filter(o => o.dir === "out").reduce((s, o) => s + o.amount, 0);
  const salaryOut = ops.filter(o => o.dir === "out" && o.kind === "salary").reduce((s, o) => s + o.amount, 0);
  const cashSalaryMonthly = window.totalCashMonthly();

  // Розбивка за призначенням
  const byKind = {};
  ops.forEach(o => { byKind[o.kind] = (byKind[o.kind] || 0) + o.amount; });

  const addOp = (op) => {
    const next = [op, ...ops];
    setOps(next);
    window.DATA.CASH_LEDGER.ops = next;
    setAdding(false);
  };
  const removeOp = (id) => {
    const next = ops.filter(o => o.id !== id);
    setOps(next);
    window.DATA.CASH_LEDGER.ops = next;
  };
  const paySalaryEnvelopes = () => {
    addOp({
      id: "c-" + Math.random().toString(36).slice(2, 8),
      date: window.SYS_DATE, dir: "out", kind: "salary",
      amount: cashSalaryMonthly, counterparty: "ЗП «у конверті» · поточний місяць",
      note: window.DATA.TEAM.filter(p => p.cashSalary > 0).map(p => `${p.name.split(" ")[1] || p.name} ${window.formatMoney(p.cashSalary)}`).join(" · "),
    });
  };

  const shown = filter === "all" ? ops : ops.filter(o => o.dir === filter);
  const shownSorted = [...shown].sort((a, b) => b.date.localeCompare(a.date) || (b.id > a.id ? 1 : -1));

  // 2) Гейт видимості готівки
  if (!cashVisible) {
    return (
      <div className="page">
        <div className="page-head">
          <h1 className="page-h1">Каса</h1>
          <div className="page-sub"><span>готівковий контур · конфіденційно</span></div>
        </div>
        <div className="cash-privacy-gate">
          <div className="cash-locked-ic"><window.Ico name="lock" size={26} /></div>
          <h2>Готівку приховано</h2>
          <p>Це неофіційний управлінський облік готівки. Дані чутливі — увімкніть показ готівки, щоб переглянути касу.</p>
          <window.CashToggle role={role} />
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Каса</h1>
        <div className="page-sub">
          <span>готівковий контур</span>
          <span className="dot"></span>
          <span>{ops.length} операцій</span>
          <span className="dot"></span>
          <span>з {window.formatDate(L.openingDate)}</span>
        </div>
      </div>

      {/* Банер конфіденційності */}
      <div className="cash-privacy">
        <window.Ico name="lock" size={15} />
        <div>
          <b>Неофіційний управлінський облік.</b> Поза бухгалтерією та банком. Частина підрядників і замовників
          розраховується готівкою; з цих коштів виплачується готівкова частина ЗП «у конверті» та дрібні витрати.
          Доступ — лише директор і бухгалтер.
        </div>
        <window.CashToggle role={role} />
      </div>

      {/* KPI */}
      <div className="kpi-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="kpi cash-kpi-balance">
          <div className="kpi-label">Залишок готівки</div>
          <div className="kpi-value">{window.formatMoney(balance)} <span style={{ fontSize: 16, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">на {window.formatDate(window.SYS_DATE)}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Надходження</div>
          <div className="kpi-value" style={{ color: "var(--c-green-deep)" }}>+{window.formatMoney(totalIn)} <span style={{ fontSize: 16, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">за весь облік</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Видатки</div>
          <div className="kpi-value" style={{ color: "var(--late)" }}>−{window.formatMoney(totalOut)} <span style={{ fontSize: 16, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">за весь облік</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">З них на ЗП «у конверті»</div>
          <div className="kpi-value">{window.formatMoney(salaryOut)} <span style={{ fontSize: 16, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">{window.formatMoney(cashSalaryMonthly)} ₴/міс за моделлю</div>
        </div>
      </div>

      {/* Розбивка за призначенням */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Рух за призначенням</h2>
          <span className="section-sub">надходження та видатки</span>
        </div>
        <div className="cash-break">
          {Object.entries(byKind).map(([kind, sum]) => {
            const k = window.CASH_LEDGER_KINDS[kind] || {};
            return (
              <div key={kind} className={`cash-break-item dir-${k.dir}`}>
                <div className="cash-break-ic"><window.Ico e={k.icon} size={15} /></div>
                <div className="cash-break-body">
                  <div className="cash-break-label">{k.label || kind}</div>
                  <div className={`cash-break-val ${k.dir === "in" ? "is-in" : "is-out"}`}>{k.dir === "in" ? "+" : "−"}{window.formatMoney(sum)} ₴</div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Тулбар */}
      <div className="toolbar" style={{ marginTop: 28 }}>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filter === "all" ? "is-active" : ""}`} onClick={() => setFilter("all")}>Усі</button>
          <button className={`filter-pill-item ${filter === "in" ? "is-active" : ""}`} onClick={() => setFilter("in")}>Надходження</button>
          <button className={`filter-pill-item ${filter === "out" ? "is-active" : ""}`} onClick={() => setFilter("out")}>Видатки</button>
        </div>
        <button className="btn" onClick={paySalaryEnvelopes} title="Записати видаток на готівкову ЗП за моделлю команди">
          <window.Ico name="mail" size={14} /> Виплатити ЗП-конверти ({window.formatMoney(cashSalaryMonthly)} ₴)
        </button>
        <button className="btn btn-primary" style={{ marginLeft: "auto" }} onClick={() => setAdding(a => !a)}>
          <window.Icon.Plus /> Нова операція
        </button>
      </div>

      {adding && <CashAddForm onAdd={addOp} onCancel={() => setAdding(false)} />}

      {/* Журнал */}
      <table className="data-table cash-table">
        <thead>
          <tr>
            <th style={{ width: 96 }}>Дата</th>
            <th>Призначення</th>
            <th>Контрагент / опис</th>
            <th className="num-col" style={{ width: 130 }}>Сума</th>
            <th className="num-col" style={{ width: 130 }}>Залишок</th>
            <th style={{ width: 40 }}></th>
          </tr>
        </thead>
        <tbody>
          {shownSorted.map(o => (
            <tr key={o.id}>
              <td className="td-mono" style={{ fontSize: 12, whiteSpace: "nowrap" }}>{window.formatDate(o.date)}</td>
              <td><CashKindChip kind={o.kind} /></td>
              <td>
                <div className="cell-name">{o.counterparty}</div>
                {o.note && <div className="cell-sub">{o.note}</div>}
              </td>
              <td className={`num-col num-bold ${o.dir === "in" ? "cash-in" : "cash-out"}`}>
                {o.dir === "in" ? "+" : "−"}{window.formatMoney(o.amount)} ₴
              </td>
              <td className="num-col td-mono" style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{window.formatMoney(balanceById[o.id])} ₴</td>
              <td>
                <button className="st-del" onClick={() => removeOp(o.id)} title="Видалити запис"><window.Icon.X /></button>
              </td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={3}><b>Початковий залишок на {window.formatDate(L.openingDate)}</b></td>
            <td className="num-col td-mono" style={{ color: "var(--ink-3)" }}>{window.formatMoney(L.opening)} ₴</td>
            <td className="num-col num-bold">{window.formatMoney(balance)} ₴</td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      <div className="hint-box" style={{ marginTop: 20 }}>
        <b>Навіщо це.</b> Готівка від підрядників і замовників не проходить через банк, але реальні гроші є — і з них
        ідуть готівкові виплати. Каса показує чесний залишок і рух, щоб кошти не «губилися». У офіційну звітність
        (P&L, банк, ДПС) ці суми не потрапляють.
      </div>
    </div>
  );
}

window.CashRegisterPage = CashRegisterPage;