/* ============================================================
   Views 1 — Dashboard, Employees, Payroll
   ============================================================ */
const Dt = window.PavData;

/* ===================== DASHBOARD ===================== */
function DashboardView({ company, month, onNav }) {
  const [showOnboard, setShowOnboard] = useState(() => { try { return localStorage.getItem("pav_onboard_done") !== "1"; } catch (e) { return true; } });
  const dismissOnboard = () => { try { localStorage.setItem("pav_onboard_done", "1"); } catch (e) {} setShowOnboard(false); };

  const emps = company.employees;
  const totalGross = emps.reduce((s, e) => s + e.gross, 0);
  const calcs = emps.map((e) => Dt.calcPayroll(e.gross, e));
  const totalNet = calcs.reduce((s, c) => s + c.net, 0);
  const totalTaxes = calcs.reduce((s, c) => s + c.gpm + c.sodra + c.employerSodra, 0);
  const employerTotal = calcs.reduce((s, c) => s + c.employerTotal, 0);
  const hist = Dt.history(company);
  // Overlay real confirmed runs onto the chart (last bar = sausis / monthIdx 0)
  if (company.runs && company.runs[0] && company.runs[0].totals) {
    hist[hist.length - 1] = { month: "Sau", gross: Math.round(company.runs[0].totals.gross) };
  }
  const confirmedCount = company.runs ? Object.keys(company.runs).length : 0;
  const acts = Dt.activity();
  const reps = Dt.reports().filter((r) => r.status === "paruošta");

  const kpis = [
    { ic: "wallet", label: "Priskaičiuota (bruto)", val: Dt.fmtEur(totalGross, 0), trend: "up", delta: "+5,2 %" },
    { ic: "users", label: "Darbuotojai", val: Dt.fmtNum(emps.length), trend: "flat", delta: emps.filter(e=>e.status==="aktyvus").length + " aktyvūs" },
    { ic: "shield", label: "Mokesčiai valstybei", val: Dt.fmtEur(totalTaxes, 0), trend: "up", delta: "GPM + Sodra" },
    { ic: "briefcase", label: "Darbdavio sąnaudos", val: Dt.fmtEur(employerTotal, 0), trend: "up", delta: "su Sodra" },
  ];

  return (
    <div>
      {showOnboard && (
        <div className="card onboard">
          <button className="onboard-x" onClick={dismissOnboard} aria-label="Paslėpti"><Icon name="x" size={15} /></button>
          <div className="onboard-head">
            <div className="onboard-ring">
              <svg viewBox="0 0 36 36"><circle className="ring-bg" cx="18" cy="18" r="15.5" /><circle className="ring-fg" cx="18" cy="18" r="15.5" style={{ strokeDashoffset: 97 * (1 - 0.75) }} /></svg>
              <span>3/4</span>
            </div>
            <div>
              <h3 style={{ fontSize: 16, fontWeight: 650 }}>Pradžios žingsniai</h3>
              <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 2 }}>Beveik baigta — atlikite paskutinį žingsnį, kad pradėtumėte.</p>
            </div>
          </div>
          <div className="onboard-steps">
            {[
              { t: "Sukurti įmonę", done: true },
              { t: "Pridėti darbuotojus", done: true },
              { t: "Patikrinti mokesčių tarifus", done: true },
              { t: "Apskaičiuoti pirmą darbo užmokestį", done: false, action: () => onNav("payroll") },
            ].map((s, i) => (
              <div className={"onboard-step" + (s.done ? " done" : "")} key={i} onClick={s.action}>
                <span className="os-check">{s.done ? <Icon name="check" size={13} sw={3} /> : <span className="os-num">{i + 1}</span>}</span>
                <span className="os-t">{s.t}</span>
                {!s.done && <span className="os-go">Pradėti →</span>}
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="kpi-grid">
        {kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="kic"><Icon name={k.ic} size={19} /></div>
            <div className="klabel">{k.label}</div>
            <div className="kval">{k.val}</div>
            <div className={"ktrend " + k.trend}>
              {k.trend === "up" && <Icon name="trend" size={13} sw={2.2} />}
              {k.delta}
            </div>
          </div>
        ))}
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Darbo užmokesčio fondas</h3>
            </div>
            <span className="badge-st info">Paskutiniai 6 mėn.</span>
          </div>
          <div className="card-pad" style={{ paddingTop: 8 }}>
            <BarChart data={hist} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Artėjantys terminai</h3></div>
          {reps.map((r, i) => (
            <div className="list-row" key={i}>
              <div className="lr-ic acc"><Icon name="calendar" size={18} /></div>
              <div className="lr-main">
                <div className="lr-title">{r.code} — {r.inst}</div>
                <div className="lr-sub">{r.period}</div>
              </div>
              <div className="lr-meta">iki {fmtDate(r.due)}</div>
            </div>
          ))}
          <div className="list-row">
            <div className="lr-ic"><Icon name="wallet" size={18} /></div>
            <div className="lr-main">
              <div className="lr-title">Atlyginimų pervedimas</div>
              <div className="lr-sub">{emps.length} darbuotojų</div>
            </div>
            <div className="lr-meta">iki 10 d.</div>
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ marginTop: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Šio mėnesio užmokestis</h3>
            <span className="ch-link" onClick={() => onNav("payroll")}>Atidaryti skaičiavimą →</span>
          </div>
          <div className="table-wrap">
            <table className="data">
              <thead>
                <tr><th>Darbuotojas</th><th className="num">Bruto</th><th className="num">Neto</th><th>Būsena</th></tr>
              </thead>
              <tbody>
                {emps.slice(0, 5).map((e, i) => (
                  <tr key={e.id}>
                    <td>
                      <span className="cell-emp">
                        <Avatar text={e.initials} />
                        <span><span className="nm">{e.name}</span><br /><span className="pos">{e.position}</span></span>
                      </span>
                    </td>
                    <td className="num">{Dt.fmtEur(e.gross)}</td>
                    <td className="num strong">{Dt.fmtEur(calcs[i].net)}</td>
                    <td>{statusBadge(e.status)}</td>
                  </tr>
                ))}
                <tr className="total">
                  <td>Iš viso ({emps.length})</td>
                  <td className="num">{Dt.fmtEur(totalGross)}</td>
                  <td className="num">{Dt.fmtEur(totalNet)}</td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Naujausi veiksmai</h3></div>
          {acts.map((a, i) => (
            <div className="act-row" key={i}>
              <span className="ad"></span>
              <div>
                <div className="at"><b>{a.who}</b> {a.act}</div>
                <div className="aw">{a.when}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ===================== EMPLOYEES ===================== */
function EmployeesView({ company, onAdd, onUpdate, onRemove, onImport }) {
  const [q, setQ] = useState("");
  const [sel, setSel] = useState(null);          // employee shown in drawer
  const [form, setForm] = useState(null);        // { mode:'new'|'edit', emp }
  const [importOpen, setImportOpen] = useState(false);
  const [showToast, toastNode] = useToast();
  const emps = company.employees.filter((e) =>
    (e.name + " " + e.position + " " + e.dept).toLowerCase().includes(q.toLowerCase())
  );

  // open "new" form from the topbar/page-head button
  useEffect(() => {
    const h = () => setForm({ mode: "new" });
    window.addEventListener("pav:new-employee", h);
    const openH = (e) => {
      const emp = company.employees.find((x) => x.id === e.detail);
      if (emp) setSel(emp);
    };
    window.addEventListener("pav:open-employee", openH);
    return () => { window.removeEventListener("pav:new-employee", h); window.removeEventListener("pav:open-employee", openH); };
  }, [company.employees]);

  const save = (emp) => {
    if (form.mode === "edit") { onUpdate(company.id, emp); showToast("Darbuotojo duomenys atnaujinti"); }
    else { onAdd(company.id, emp); showToast("Darbuotojas pridėtas"); }
    setForm(null); setSel(null);
  };
  const del = () => {
    onRemove(company.id, form.emp.id);
    showToast("Darbuotojas pašalintas");
    setForm(null); setSel(null);
  };

  return (
    <div>
      {toastNode}
      <div className="card" style={{ marginBottom: 16, padding: "14px 16px", display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <div className="tb-search" style={{ display: "flex", width: 280, maxWidth: "100%" }}>
          <Icon name="search" size={15} />
          <input placeholder="Ieškoti darbuotojo, pareigų…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <span style={{ fontSize: 13, color: "var(--ink-faint)" }}>{emps.length} iš {company.employees.length}</span>
        <div style={{ flex: 1 }}></div>
        <button className="btn btn--ghost" style={{ padding: "9px 16px", fontSize: 14 }} onClick={() => setImportOpen(true)}>
          <Icon name="download" size={15} /> Importuoti
        </button>
        <button className="btn btn--primary" style={{ padding: "9px 16px", fontSize: 14 }} onClick={() => setForm({ mode: "new" })}>
          <Icon name="plus" size={15} sw={2.2} /> Naujas darbuotojas
        </button>
      </div>

      {company.employees.length === 0 ? (
        <div className="card empty">
          <div className="eic"><Icon name="users" size={28} /></div>
          <h3>Dar nėra darbuotojų</h3>
          <p>Pridėkite pirmą darbuotoją arba importuokite visą komandą iš CSV failo per kelias sekundes.</p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
            <button className="btn btn--ghost" onClick={() => setImportOpen(true)}><Icon name="download" size={15} /> Importuoti CSV</button>
            <button className="btn btn--primary" onClick={() => setForm({ mode: "new" })}><Icon name="plus" size={15} sw={2.2} /> Naujas darbuotojas</button>
          </div>
        </div>
      ) : (
      <div className="card">
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Darbuotojas</th><th>Padalinys</th><th>Įdarbintas</th>
                <th className="num">Atlyginimas (bruto)</th><th className="num">Neto</th><th>Būsena</th><th></th>
              </tr>
            </thead>
            <tbody>
              {emps.map((e) => {
                const c = Dt.calcPayroll(e.gross, e);
                return (
                  <tr key={e.id} className="clickable" onClick={() => setSel(e)}>
                    <td>
                      <span className="cell-emp">
                        <Avatar text={e.initials} />
                        <span><span className="nm">{e.name}</span><br /><span className="pos">{e.position}</span></span>
                      </span>
                    </td>
                    <td>{e.dept}</td>
                    <td>{fmtDate(e.hireDate)}</td>
                    <td className="num strong">{Dt.fmtEur(e.gross)}</td>
                    <td className="num">{Dt.fmtEur(c.net)}</td>
                    <td>{statusBadge(e.status)}</td>
                    <td className="num"><Icon name="chevRight" size={16} style={{ color: "var(--ink-faint)" }} /></td>
                  </tr>
                );
              })}
              {emps.length === 0 && (
                <tr><td colSpan="7" style={{ textAlign: "center", color: "var(--ink-faint)", padding: "32px 0" }}>Darbuotojų nerasta</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      )}

      {sel && <EmployeeDrawer emp={sel} company={company} onClose={() => setSel(null)} onEdit={() => { const e = sel; setSel(null); setForm({ mode: "edit", emp: e }); }} />}
      {form && (
        <EmployeeForm
          initial={form.mode === "edit" ? form.emp : null}
          onSave={save}
          onDelete={del}
          onClose={() => setForm(null)}
        />
      )}
      {importOpen && (
        <ImportModal
          onClose={() => setImportOpen(false)}
          onImport={(parsedRows) => {
            const built = parsedRows.map((r) => Dt.buildEmployee(r));
            onImport(company.id, built);
            setImportOpen(false);
            showToast(`Importuota ${built.length} darbuotojų`);
          }}
        />
      )}
    </div>
  );
}

function EmployeeDrawer({ emp, company, onClose, onEdit }) {
  const [vis, setVis] = useState(false);
  const [doc, setDoc] = useState(null); // 'contract' | 'cert'
  useEffect(() => { const t = setTimeout(() => setVis(true), 10); return () => clearTimeout(t); }, []);
  const c = Dt.calcPayroll(emp.gross, emp);
  const close = () => { setVis(false); setTimeout(onClose, 260); };
  return (
    <>
      <div className={"drawer-scrim" + (vis ? " in" : "")} onClick={close}></div>
      <aside className={"drawer" + (vis ? " in" : "")}>
        <div className="drawer-head">
          <strong style={{ fontSize: 15 }}>Darbuotojo kortelė</strong>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="x" onClick={() => { setVis(false); setTimeout(onEdit, 180); }} title="Redaguoti" style={{ width: "auto", padding: "0 12px", gap: 7, fontSize: 13, fontWeight: 550, color: "var(--accent-strong)" }}>
              Redaguoti
            </button>
            <button className="x" onClick={close} aria-label="Uždaryti"><Icon name="x" size={16} /></button>
          </div>
        </div>
        <div className="drawer-body">
          <div className="emp-hero">
            <Avatar text={emp.initials} size={56} />
            <div>
              <div className="nm">{emp.name}</div>
              <div className="pos">{emp.position} · {emp.dept}</div>
              <div style={{ marginTop: 6 }}>{statusBadge(emp.status)}</div>
            </div>
          </div>

          <div className="kv">
            <div className="cell"><div className="k">El. paštas</div><div className="v" style={{ fontSize: 12.5 }}>{emp.email}</div></div>
            <div className="cell"><div className="k">Įdarbinimo data</div><div className="v">{fmtDate(emp.hireDate)}</div></div>
            <div className="cell"><div className="k">Pensijų kaupimas (II)</div><div className="v">{emp.pillarII ? "Taip (+3 %)" : "Ne"}</div></div>
            <div className="cell"><div className="k">Atostogų likutis</div><div className="v">{emp.vacationDays} d.</div></div>
          </div>

          <h4 style={{ fontSize: 13, fontWeight: 600, margin: "4px 0 12px", color: "var(--ink-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>Mėnesio skaičiavimas</h4>
          <div className="card" style={{ boxShadow: "none" }}>
            <div className="psd-rows" style={{ padding: "8px 18px" }}>
              <div className="psd-row"><span>Priskaičiuota (bruto)</span><b>{Dt.fmtEur(emp.gross)}</b></div>
              <div className="psd-row"><span>NPD pritaikyta</span><b>{Dt.fmtEur(c.npd)}</b></div>
              <div className="psd-row minus"><span>GPM (20 %)</span><b>−{Dt.fmtEur(c.gpm)}</b></div>
              <div className="psd-row minus"><span>Sodra ({(c.sodraRate*100).toFixed(1)} %)</span><b>−{Dt.fmtEur(c.sodra)}</b></div>
              <div className="psd-row" style={{ borderTop: "1.5px solid var(--line)", marginTop: 6, paddingTop: 12 }}><span style={{ fontWeight: 600, color: "var(--ink)" }}>Išmokama (neto)</span><b style={{ color: "var(--accent-strong)", fontSize: 15 }}>{Dt.fmtEur(c.net)}</b></div>
            </div>
          </div>
          <div style={{ marginTop: 10, fontSize: 12.5, color: "var(--ink-faint)", display: "flex", justifyContent: "space-between" }}>
            <span>Darbdavio sąnaudos</span><b style={{ fontFamily: "var(--mono)", color: "var(--ink-soft)" }}>{Dt.fmtEur(c.employerTotal)}</b>
          </div>

          <h4 style={{ fontSize: 13, fontWeight: 600, margin: "22px 0 12px", color: "var(--ink-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>Dokumentai</h4>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn--ghost" style={{ flex: 1, padding: "11px 14px", fontSize: 13.5 }} onClick={() => setDoc("contract")}><Icon name="doc" size={15} /> Darbo sutartis</button>
            <button className="btn btn--ghost" style={{ flex: 1, padding: "11px 14px", fontSize: 13.5 }} onClick={() => setDoc("cert")}><Icon name="doc" size={15} /> Pažyma apie atlyginimą</button>
          </div>
        </div>
      </aside>
      {doc && <DocModal emp={emp} company={company} kind={doc} onClose={() => setDoc(null)} />}
    </>
  );
}

/* ===================== PAYROLL ===================== */
function PayrollView({ company, monthIdx, monthLabel, onConfirm }) {
  const [rows, setRows] = useState(() => company.employees.map((e) => ({ ...e, bonus: 0 })));
  const [sepa, setSepa] = useState(false);
  const [showToast, toastNode] = useToast();

  const confirmed = !!(company.runs && company.runs[monthIdx]);

  // reset when company or month changes
  useEffect(() => { setRows(company.employees.map((e) => ({ ...e, bonus: 0 }))); }, [company.id, monthIdx]);

  const calcs = rows.map((e) => Dt.calcPayroll((e.gross || 0) + (e.bonus || 0), e));
  const t = calcs.reduce((a, c) => ({
    gross: a.gross + c.gross, gpm: a.gpm + c.gpm, sodra: a.sodra + c.sodra,
    net: a.net + c.net, emp: a.emp + c.employerTotal,
  }), { gross: 0, gpm: 0, sodra: 0, net: 0, emp: 0 });

  const setField = (id, field, v) => {
    const n = parseFloat(String(v).replace(",", ".")) || 0;
    setRows((rs) => rs.map((r) => (r.id === id ? { ...r, [field]: n } : r)));
  };

  const payments = rows.map((e, i) => ({ name: e.name, iban: e.iban, amount: calcs[i].net }));

  return (
    <div>
      {toastNode}
      <div className="info-banner">
        <Icon name="bolt" size={18} />
        Įveskite bruto atlyginimą ir priedus — GPM, NPD, Sodra ir neto perskaičiuojami akimirksniu pagal {Dt.TAX.YEAR} m. tarifus.
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>Darbo užmokestis — {monthLabel}</h3>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
            {confirmed ? <span className="badge-st ok">Patvirtinta</span> : <span className="badge-st warn">Juodraštis</span>}
            <button className="btn btn--ghost" style={{ padding: "9px 16px", fontSize: 14 }} onClick={() => setSepa(true)}>
              <Icon name="wallet" size={15} /> Banko mokėjimai (SEPA)
            </button>
            <button className="btn btn--primary" style={{ padding: "9px 16px", fontSize: 14 }}
              onClick={() => {
                const map = {}; rows.forEach((r) => { map[r.id] = r.gross; });
                const totals = { gross: t.gross, net: t.net, gpm: t.gpm, sodra: t.sodra, emp: t.emp };
                if (onConfirm) onConfirm(company.id, monthIdx, map, totals);
                showToast("Darbo užmokestis patvirtintas ir išsaugotas");
              }}>
              <Icon name="check" size={15} sw={2.4} /> {confirmed ? "Perskaičiuoti" : "Patvirtinti"}
            </button>
          </div>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Darbuotojas</th>
                <th className="num">Bruto (€)</th>
                <th className="num">Priedas (€)</th>
                <th className="num">GPM 20 %</th>
                <th className="num">Sodra</th>
                <th className="num">Neto</th>
                <th className="num">Darbdaviui</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((e, i) => {
                const c = calcs[i];
                return (
                  <tr key={e.id}>
                    <td>
                      <span className="cell-emp">
                        <Avatar text={e.initials} />
                        <span><span className="nm">{e.name}</span><br /><span className="pos">{e.position}</span></span>
                      </span>
                    </td>
                    <td className="num">
                      <span className="editable-cell">
                        <input value={e.gross} inputMode="decimal"
                          onChange={(ev) => setField(e.id, "gross", ev.target.value)} />
                      </span>
                    </td>
                    <td className="num">
                      <span className="editable-cell">
                        <input value={e.bonus} inputMode="decimal" style={{ width: 72 }}
                          onChange={(ev) => setField(e.id, "bonus", ev.target.value)} />
                      </span>
                    </td>
                    <td className="num">{Dt.fmtEur(c.gpm)}</td>
                    <td className="num">{Dt.fmtEur(c.sodra)}</td>
                    <td className="num strong">{Dt.fmtEur(c.net)}</td>
                    <td className="num" style={{ color: "var(--ink-faint)" }}>{Dt.fmtEur(c.employerTotal)}</td>
                  </tr>
                );
              })}
              <tr className="total">
                <td>Iš viso ({rows.length})</td>
                <td className="num">{Dt.fmtEur(t.gross)}</td>
                <td className="num">—</td>
                <td className="num">{Dt.fmtEur(t.gpm)}</td>
                <td className="num">{Dt.fmtEur(t.sodra)}</td>
                <td className="num">{Dt.fmtEur(t.net)}</td>
                <td className="num">{Dt.fmtEur(t.emp)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {sepa && <SepaModal company={company} payments={payments} monthLabel={monthLabel} total={t.net} onClose={() => setSepa(false)} />}

      <div className="grid-2-even" style={{ marginTop: 16 }}>
        <div className="card card-pad">
          <h3 style={{ fontSize: 14, marginBottom: 14 }}>Mokesčių paskirstymas</h3>
          {[
            { label: "Neto darbuotojams", val: t.net, color: "var(--accent)" },
            { label: "GPM (VMI)", val: t.gpm, color: "oklch(0.62 0.13 258)" },
            { label: "Sodra (darbuotojų)", val: t.sodra, color: "oklch(0.74 0.10 258)" },
          ].map((r, i) => {
            const pct = (r.val / (t.net + t.gpm + t.sodra)) * 100;
            return (
              <div key={i} style={{ marginBottom: 13 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 5 }}>
                  <span style={{ color: "var(--ink-soft)" }}>{r.label}</span>
                  <b style={{ fontFamily: "var(--mono)" }}>{Dt.fmtEur(r.val)}</b>
                </div>
                <div style={{ height: 8, borderRadius: 99, background: "var(--bg-2)", overflow: "hidden" }}>
                  <div style={{ width: pct + "%", height: "100%", background: r.color, borderRadius: 99 }}></div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="card card-pad">
          <h3 style={{ fontSize: 14, marginBottom: 14 }}>Suvestinė</h3>
          <div className="psd-rows" style={{ padding: 0 }}>
            <div className="psd-row"><span>Bendras DU fondas (bruto)</span><b>{Dt.fmtEur(t.gross)}</b></div>
            <div className="psd-row"><span>Išmokama darbuotojams</span><b>{Dt.fmtEur(t.net)}</b></div>
            <div className="psd-row"><span>Mokesčiai (GPM + Sodra)</span><b>{Dt.fmtEur(t.gpm + t.sodra)}</b></div>
            <div className="psd-row" style={{ borderTop: "1.5px solid var(--line)", marginTop: 6, paddingTop: 12 }}>
              <span style={{ fontWeight: 600, color: "var(--ink)" }}>Bendros darbdavio sąnaudos</span>
              <b style={{ color: "var(--accent-strong)", fontSize: 15 }}>{Dt.fmtEur(t.emp)}</b>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function fmtDate(iso) {
  if (!iso || iso === "—") return "—";
  const [y, m, d] = iso.split("-");
  return `${d}.${m}.${y}`;
}

/* ===================== SEPA EXPORT MODAL ===================== */
function SepaModal({ company, payments, monthLabel, total, onClose }) {
  const [showToast, toastNode] = useToast();
  const download = () => {
    const xml = Dt.buildSepaXml(company, payments, monthLabel);
    try {
      const blob = new Blob([xml], { type: "application/xml" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url; a.download = `atlyginimai-${monthLabel.replace(/\s/g, "-")}.xml`;
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    } catch (e) {}
    showToast("SEPA failas atsisiųstas");
  };
  return (
    <Modal
      title="Banko mokėjimai (SEPA)"
      wide
      onClose={onClose}
      footer={
        <>
          <span style={{ marginRight: "auto", fontSize: 13.5, color: "var(--ink-soft)" }}>Iš viso: <b style={{ fontFamily: "var(--mono)", color: "var(--ink)" }}>{Dt.fmtEur(total)}</b></span>
          <button className="btn btn--ghost" style={{ padding: "10px 16px", fontSize: 14 }} onClick={onClose}>Uždaryti</button>
          <button className="btn btn--primary" style={{ padding: "10px 16px", fontSize: 14 }} onClick={download}>
            <Icon name="download" size={15} /> Atsisiųsti .xml (pain.001)
          </button>
        </>
      }
    >
      {toastNode}
      <p style={{ fontSize: 13.5, color: "var(--ink-soft)", marginBottom: 16, lineHeight: 1.5 }}>
        Sugeneruotas mokėjimų failas, kurį galite įkelti į internetinę bankininkystę ir apmokėti visus atlyginimus vienu kartu.
      </p>
      <div className="table-wrap" style={{ border: "1px solid var(--line)", borderRadius: "var(--r-sm)" }}>
        <table className="data">
          <thead><tr><th>Gavėjas</th><th>IBAN</th><th>Paskirtis</th><th className="num">Suma</th></tr></thead>
          <tbody>
            {payments.map((p, i) => (
              <tr key={i}>
                <td className="strong">{p.name}</td>
                <td style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{p.iban}</td>
                <td style={{ fontSize: 12.5 }}>Atlyginimas {monthLabel}</td>
                <td className="num strong">{Dt.fmtEur(p.amount)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Modal>
  );
}

Object.assign(window, { DashboardView, EmployeesView, PayrollView, SepaModal, fmtDate });