// cash-salary-debt.jsx — Борг готівкою: нарахування і видача ЗП «у конверті» по кожній людині,
// щоб бачити загальну заборгованість компанії. Чутливо — лише при увімкненому показі готівки.

const scdRound2 = (n) => Math.round((Number(n) || 0) * 100) / 100;
const scdParseAmt = (s) => parseFloat(String(s).replace(/\s/g, "").replace(",", ".")) || 0;
const SCD_MONTHS_UA = ["січень","лютий","березень","квітень","травень","червень","липень","серпень","вересень","жовтень","листопад","грудень"];
const scdPeriodLabel = (id) => {
  if (!id) return "—";
  const [y, m] = id.split("-").map(Number);
  return m >= 1 && m <= 12 ? `${SCD_MONTHS_UA[m - 1]} ${y}` : id;
};
const scdRnd = () => Math.random().toString(36).slice(2, 10);

function AccrueForm({ team, defaultPeriod, onSave, onCancel }) {
  const [employee, setEmployee] = React.useState(team[0] ? team[0].id : "");
  const [date, setDate] = React.useState(window.SYS_DATE);
  const [amount, setAmount] = React.useState("");
  const [note, setNote] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const num = scdParseAmt(amount);
  const canSave = num > 0 && employee;
  const save = async () => {
    if (!canSave || busy) return;
    setBusy(true);
    const ok = await onSave({ employee, date, period: date.slice(0, 7), amount: scdRound2(num), note: note.trim() });
    setBusy(false);
    if (ok !== false) onCancel();
  };
  return (
    <div className="cash-addform">
      <div className="auth-hint" style={{padding: "0 0 8px"}}>
        Ручне нарахування боргу (напр., заднім числом за минулі періоди — щоб відобразити реальну картину).
      </div>
      <div className="cash-addform-grid">
        <div className="cp-row"><label className="cp-label">Працівник <span className="cp-required">*</span></label>
          <select className="cp-input" value={employee} onChange={e => setEmployee(e.target.value)}>
            {team.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select></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"><label className="cp-label">Сума, ₴ <span className="cp-required">*</span></label>
          <input className="cp-input" value={amount} onChange={e => setAmount(e.target.value)} inputMode="decimal" placeholder="напр. 15000" autoFocus /></div>
        <div className="cp-row"><label className="cp-label">Нотатка</label>
          <input className="cp-input" value={note} onChange={e => setNote(e.target.value)} placeholder={`напр. борг за ${scdPeriodLabel(defaultPeriod)}`} /></div>
      </div>
      <div className="cash-addform-foot">
        <button className="btn" onClick={onCancel} disabled={busy}>Скасувати</button>
        <button className="btn btn-primary" onClick={save} disabled={!canSave || busy}>{busy ? "Збереження…" : "Нарахувати"}</button>
      </div>
    </div>
  );
}

function PayoutForm({ team, presetEmployee, onSave, onCancel }) {
  const [employee, setEmployee] = React.useState(presetEmployee || (team[0] ? team[0].id : ""));
  const [date, setDate] = React.useState(window.SYS_DATE);
  const [amount, setAmount] = React.useState("");
  const [note, setNote] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const num = scdParseAmt(amount);
  const canSave = num > 0 && employee;
  const save = async () => {
    if (!canSave || busy) return;
    setBusy(true);
    const ok = await onSave({ employee, date, amount: scdRound2(num), note: note.trim() });
    setBusy(false);
    if (ok !== false) onCancel();
  };
  return (
    <div className="cash-addform">
      <div className="auth-hint" style={{padding: "0 0 8px"}}>
        Видача готівкою зменшує борг перед працівником і одночасно списується з готівкового рахунка в «Гроші».
      </div>
      <div className="cash-addform-grid">
        <div className="cp-row"><label className="cp-label">Працівник <span className="cp-required">*</span></label>
          <select className="cp-input" value={employee} onChange={e => setEmployee(e.target.value)} disabled={!!presetEmployee}>
            {team.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select></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"><label className="cp-label">Видано, ₴ <span className="cp-required">*</span></label>
          <input className="cp-input" value={amount} onChange={e => setAmount(e.target.value)} inputMode="decimal" placeholder="напр. 5000" autoFocus /></div>
        <div className="cp-row"><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} disabled={busy}>Скасувати</button>
        <button className="btn btn-primary" onClick={save} disabled={!canSave || busy}>{busy ? "Проведення…" : "Видати готівку"}</button>
      </div>
    </div>
  );
}

function PersonDebtDrawer({ person, entries, canEdit, onAccrue, onPayout, onDelete, onClose }) {
  const [adding, setAdding] = React.useState(null); // "accrual" | "payment" | null
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const chrono = [...entries].sort((a, b) => (a.date || "").localeCompare(b.date || "") || (a.id > b.id ? 1 : -1));
  let run = 0;
  const withBalance = chrono.map(e => { run += e.kind === "accrual" ? e.amount : -e.amount; return { ...e, balance: run }; });
  const accrued = entries.filter(e => e.kind === "accrual").reduce((s, e) => s + e.amount, 0);
  const paid = entries.filter(e => e.kind === "payment").reduce((s, e) => s + e.amount, 0);
  const debt = scdRound2(accrued - paid);
  const m = window.formatMoney;

  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 style={{fontSize: 12, color: "var(--ink-3)"}}>Борг готівкою</span>
        </div>
        <div className="drawer-body">
          <div style={{display: "flex", gap: 14, alignItems: "center", marginBottom: 20}}>
            <div className="team-avatar" style={{width: 48, height: 48, fontSize: 17}}>{person.initials}</div>
            <div>
              <h1 className="drawer-h1" style={{marginBottom: 4}}>{person.name}</h1>
              <div style={{fontSize: 13, color: "var(--ink-3)"}}>{person.role}</div>
            </div>
          </div>

          <div className="payroll-breakdown">
            <div className="pb-row pb-sub"><span className="pb-label">Нараховано всього</span><span className="pb-val num-bold">{m(accrued)} ₴</span></div>
            <div className="pb-row pb-sub"><span className="pb-label">Видано всього</span><span className="pb-val num-bold" style={{color: "var(--c-green-deep)"}}>− {m(paid)} ₴</span></div>
            <div className="pb-row pb-final"><span className="pb-label">Борг зараз</span><span className="pb-val" style={{color: debt > 0 ? "var(--late)" : "var(--c-green-deep)"}}>{m(debt)} ₴</span></div>
          </div>

          {canEdit && (
            <div style={{display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap"}}>
              <button className="btn btn-sm" onClick={() => setAdding(adding === "accrual" ? null : "accrual")}><window.Icon.Plus /> Нарахування</button>
              <button className="btn btn-sm btn-primary" onClick={() => setAdding(adding === "payment" ? null : "payment")}><window.Icon.Plus /> Видача готівки</button>
            </div>
          )}
          {adding === "accrual" && <div style={{marginTop: 10}}><AccrueForm team={[person]} onSave={onAccrue} onCancel={() => setAdding(null)} /></div>}
          {adding === "payment" && <div style={{marginTop: 10}}><PayoutForm team={[person]} presetEmployee={person.id} onSave={onPayout} onCancel={() => setAdding(null)} /></div>}

          <div className="drawer-section" style={{marginTop: 24}}>
            <div className="drawer-section-h">Журнал</div>
            {withBalance.length === 0 ? (
              <div style={{fontSize: 12.5, color: "var(--ink-3)"}}>Записів ще немає.</div>
            ) : (
              <table className="data-table compact-table">
                <thead><tr><th>Дата</th><th>Тип</th><th className="num-col">Сума</th><th className="num-col">Борг</th><th></th></tr></thead>
                <tbody>
                  {[...withBalance].reverse().map(e => (
                    <tr key={e.id}>
                      <td className="td-mono" style={{fontSize: 11.5}}>{window.formatDate(e.date)}</td>
                      <td>
                        {e.kind === "accrual"
                          ? <span className="status-tag tone-amber">нараховано</span>
                          : <span className="status-tag tone-live">видано</span>}
                        {e.note && <div className="cell-sub" style={{marginTop: 2}}>{e.note}</div>}
                      </td>
                      <td className="num-col" style={{color: e.kind === "accrual" ? "var(--late)" : "var(--c-green-deep)"}}>{e.kind === "accrual" ? "+" : "−"} {m(e.amount)}</td>
                      <td className="num-col num-bold">{m(e.balance)}</td>
                      <td>{canEdit && <button className="btn btn-ghost" style={{padding: "2px 6px", fontSize: 11}} onClick={() => onDelete(e)}>✕</button>}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      </aside>
    </>
  );
}

function CashSalaryDebtPage({ role }) {
  const cashVisible = window.useCashVisible();
  const canSeeCash = window.canSeeCash(role);
  const live = !!(window.API && window.API.mode === "live");
  const canEdit = role === "director" || role === "accountant";
  const team = window.DATA.TEAM || [];
  const m = window.formatMoney;
  const period = window.PAYROLL_PERIOD;

  const [entries, setEntries] = React.useState([]);
  const [openPerson, setOpenPerson] = React.useState(null);
  const [addingAccrual, setAddingAccrual] = React.useState(false);
  const [addingPayout, setAddingPayout] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  const fromApi = (e) => ({ ...e });
  const reload = React.useCallback(() => {
    if (!live) return Promise.resolve();
    return window.API.list("salary-cash").then(r => setEntries((r || []).map(fromApi))).catch(() => {});
  }, [live]);
  React.useEffect(() => { reload(); }, [reload]);

  if (!canSeeCash) {
    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>
    );
  }
  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>
    );
  }

  const byPerson = {};
  team.forEach(p => { byPerson[p.id] = { person: p, accrued: 0, paid: 0, last: null, entries: [] }; });
  entries.forEach(e => {
    if (!byPerson[e.employee]) return; // працівник видалений з команди
    const row = byPerson[e.employee];
    row.entries.push(e);
    if (e.kind === "accrual") row.accrued += e.amount;
    else row.paid += e.amount;
    if (e.kind === "payment" && (!row.last || e.date > row.last)) row.last = e.date;
  });
  const rows = Object.values(byPerson).map(r => ({ ...r, debt: scdRound2(r.accrued - r.paid) }));
  const totalAccrued = rows.reduce((s, r) => s + r.accrued, 0);
  const totalPaid = rows.reduce((s, r) => s + r.paid, 0);
  const totalDebt = scdRound2(totalAccrued - totalPaid);
  const inDebtCount = rows.filter(r => r.debt > 0).length;

  // — динаміка по місяцях (для всієї команди) —
  const byMonth = {};
  entries.forEach(e => {
    const mo = (e.date || "").slice(0, 7);
    if (!mo) return;
    if (!byMonth[mo]) byMonth[mo] = { accrued: 0, paid: 0 };
    if (e.kind === "accrual") byMonth[mo].accrued += e.amount; else byMonth[mo].paid += e.amount;
  });
  const months = Object.keys(byMonth).sort();
  let cum = 0;
  const monthRows = months.map(mo => {
    cum += byMonth[mo].accrued - byMonth[mo].paid;
    return { mo, ...byMonth[mo], cum: scdRound2(cum) };
  }).reverse();

  const alreadyAccruedThisPeriod = new Set(entries.filter(e => e.kind === "accrual" && e.period === period.id).map(e => e.employee));
  const accrueCurrentPeriod = async () => {
    const todo = team.filter(p => (p.cashSalary || 0) > 0 && !alreadyAccruedThisPeriod.has(p.id));
    if (!todo.length) { alert("Усі нарахування за цей період уже внесені."); return; }
    if (!confirm(`Нарахувати готівкову ЗП за ${period.label} для ${todo.length} ${window.plural ? window.plural(todo.length, "особи", "осіб", "осіб") : "осіб"}?`)) return;
    setBusy(true);
    try {
      for (const p of todo) {
        await window.API.post("/salary-cash", { employee: p.id, date: window.SYS_DATE, period: period.id, kind: "accrual", amount: p.cashSalary, note: `Нараховано за ${period.label}` });
      }
      await reload();
    } catch (e) { alert("Помилка нарахування: " + (e.message || e)); }
    setBusy(false);
  };

  const saveAccrual = async (data) => {
    try {
      await window.API.post("/salary-cash", { ...data, kind: "accrual" });
      await reload();
      return true;
    } catch (e) { alert("Не вдалося зберегти нарахування: " + (e.message || e)); return false; }
  };
  const savePayout = async (data) => {
    const id = "sce-" + scdRnd();
    const ref = "zpc:" + id;
    const person = team.find(p => p.id === data.employee);
    try {
      await window.API.post("/salary-cash", { id, ...data, kind: "payment", cashOpRef: ref });
      await window.API.post("/cash-ops", { date: data.date, type: "out", category: "salary", amount: data.amount, account: null, counterparty: person ? person.name : data.employee, note: data.note || `Видача ЗП готівкою${person ? " · " + person.name : ""}`, ref });
      await reload();
      return true;
    } catch (e) { alert("Не вдалося провести видачу: " + (e.message || e)); return false; }
  };
  const deleteEntry = async (entry) => {
    if (!confirm("Видалити запис? Разом з ним видалиться повʼязана касова операція (якщо є).")) return;
    try {
      await window.API.del("/salary-cash/" + entry.id);
      if (entry.kind === "payment" && entry.cashOpRef) {
        const ops = await window.API.list("cash-ops", { ref: entry.cashOpRef }).catch(() => []);
        await Promise.all((ops || []).map(o => window.API.del("/cash-ops/" + o.id)));
      }
      await reload();
    } catch (e) { alert("Не вдалося видалити: " + (e.message || e)); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Борг готівкою</h1>
        <div className="page-sub">
          <span>заборгованість по ЗП «у конверті» · по кожній людині</span>
          <span className="dot"></span>
          <span style={{color: "var(--ink-2)"}}>конфіденційно</span>
        </div>
      </div>

      <div className="hint-box" style={{marginBottom: 18}}>
        <b>Як це працює.</b> «Нараховано» — скільки готівкою належить видати (за поточний період — автоматично з розрахунку ЗП, за минулі періоди — вносите вручну). «Видано» — реальні видачі, які ви фіксуєте самі. Різниця — борг перед працівником.
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi" style={{borderTop: "2px solid var(--late)"}}>
          <div className="kpi-label">Загальний борг</div>
          <div className="kpi-value" style={{color: "var(--late)"}}>{m(totalDebt)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">{inDebtCount} {window.plural ? window.plural(inDebtCount, "людина", "людини", "людей") : "людей"} з боргом</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Нараховано всього</div>
          <div className="kpi-value">{m(totalAccrued)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Видано всього</div>
          <div className="kpi-value" style={{color: "var(--c-green-deep)"}}>{m(totalPaid)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Поточний період</div>
          <div className="kpi-value" style={{fontSize: 20}}>{period.label}</div>
        </div>
      </div>

      {canEdit && live && (
        <div className="toolbar" style={{marginTop: 20, flexWrap: "wrap", gap: 8}}>
          <button className="btn" onClick={accrueCurrentPeriod} disabled={busy}>{busy ? "Нарахування…" : `Нарахувати за ${period.label}`}</button>
          <button className="btn" onClick={() => setAddingAccrual(v => !v)}><window.Icon.Plus /> Нарахування заднім числом</button>
          <button className="btn btn-primary" onClick={() => setAddingPayout(v => !v)} style={{marginLeft: "auto"}}><window.Icon.Plus /> Видати готівку</button>
        </div>
      )}
      {addingAccrual && <div style={{marginTop: 10}}><AccrueForm team={team} defaultPeriod={period.id} onSave={saveAccrual} onCancel={() => setAddingAccrual(false)} /></div>}
      {addingPayout && <div style={{marginTop: 10}}><PayoutForm team={team} onSave={savePayout} onCancel={() => setAddingPayout(false)} /></div>}

      <table className="data-table" style={{marginTop: 20}}>
        <thead>
          <tr>
            <th></th>
            <th>Працівник</th>
            <th className="num-col">Нараховано</th>
            <th className="num-col">Видано</th>
            <th className="num-col">Борг</th>
            <th>Остання видача</th>
            <th style={{width: 90}}></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.person.id}>
              <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{r.person.initials}</div></td>
              <td><div className="cell-name">{r.person.name}</div><div className="cell-sub">{r.person.role}</div></td>
              <td className="num-col">{m(r.accrued)}</td>
              <td className="num-col" style={{color: "var(--c-green-deep)"}}>{m(r.paid)}</td>
              <td className="num-col num-bold" style={{color: r.debt > 0 ? "var(--late)" : "var(--ink-3)"}}>{m(r.debt)} ₴</td>
              <td style={{fontSize: 12, color: "var(--ink-3)"}}>{r.last ? window.formatDate(r.last) : "—"}</td>
              <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}} onClick={() => setOpenPerson(r.person.id)}>Деталі</button></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={2}><b>Усього</b></td>
            <td className="num-col num-bold">{m(totalAccrued)}</td>
            <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{m(totalPaid)}</td>
            <td className="num-col num-bold" style={{color: "var(--late)"}}>{m(totalDebt)} ₴</td>
            <td></td><td></td>
          </tr>
        </tfoot>
      </table>

      {monthRows.length > 0 && (
        <section className="section" style={{marginTop: 32}}>
          <div className="section-head">
            <h2 className="section-h2">Динаміка по місяцях</h2>
            <span className="section-sub">по всій команді · наростаючим підсумком</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></tr></thead>
            <tbody>
              {monthRows.map(r => (
                <tr key={r.mo}>
                  <td>{scdPeriodLabel(r.mo)}</td>
                  <td className="num-col">{m(r.accrued)}</td>
                  <td className="num-col" style={{color: "var(--c-green-deep)"}}>{m(r.paid)}</td>
                  <td className="num-col num-bold" style={{color: r.cum > 0 ? "var(--late)" : "var(--ink-3)"}}>{m(r.cum)} ₴</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      )}

      {openPerson && byPerson[openPerson] && (
        <PersonDebtDrawer
          person={byPerson[openPerson].person}
          entries={byPerson[openPerson].entries}
          canEdit={canEdit && live}
          onAccrue={saveAccrual}
          onPayout={savePayout}
          onDelete={deleteEntry}
          onClose={() => setOpenPerson(null)}
        />
      )}
    </div>
  );
}

window.CashSalaryDebtPage = CashSalaryDebtPage;