/* ============================================================
   Views 2 — Payslips, Reports, Companies, Settings
   ============================================================ */
const Dt2 = window.PavData;

/* ===================== PAYSLIPS ===================== */
function PayslipsView({ company, monthLabel }) {
  const [empId, setEmpId] = useState(company.employees[0].id);
  const [showToast, toastNode] = useToast();
  useEffect(() => { setEmpId(company.employees[0].id); }, [company.id]);

  const emp = company.employees.find((e) => e.id === empId) || company.employees[0];
  const c = Dt2.calcPayroll(emp.gross, emp);

  return (
    <div>
      {toastNode}
      <div className="card pay-toolbar" style={{ marginBottom: 16, padding: "14px 16px", display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ fontSize: 13, fontWeight: 550, color: "var(--ink-soft)" }}>Darbuotojas</span>
        <select className="fld-select" value={empId} onChange={(e) => setEmpId(e.target.value)} style={{ minWidth: 220 }}>
          {company.employees.map((e) => <option key={e.id} value={e.id}>{e.name} — {e.position}</option>)}
        </select>
        <div style={{ flex: 1 }}></div>
        <button className="btn btn--ghost" style={{ padding: "9px 16px", fontSize: 14 }} onClick={() => showToast("Lapelis išsiųstas el. paštu")}>
          <Icon name="mail" size={15} /> Siųsti el. paštu
        </button>
        <button className="btn btn--primary" style={{ padding: "9px 16px", fontSize: 14 }} onClick={() => {
          document.body.classList.add("print-payslip");
          window.print();
          setTimeout(() => document.body.classList.remove("print-payslip"), 600);
        }}>
          <Icon name="print" size={15} /> Spausdinti / PDF
        </button>
      </div>

      <div className="payslip-doc">
        <div className="psd-head">
          <div>
            <div className="psd-co">{company.name}</div>
            <div className="psd-meta">Įmonės kodas: {company.code}<br />{company.address}</div>
          </div>
          <span className="psd-tag">Atlyginimo lapelis</span>
        </div>
        <div className="psd-emp">
          <div><div className="k">Darbuotojas</div><div className="v">{emp.name}</div></div>
          <div><div className="k">Laikotarpis</div><div className="v">{monthLabel}</div></div>
          <div><div className="k">Pareigos</div><div className="v">{emp.position}</div></div>
          <div><div className="k">Tabelio Nr.</div><div className="v">{emp.id.toUpperCase()}-{String(emp.gross).slice(0,2)}</div></div>
        </div>
        <div className="psd-rows">
          <div className="psd-row section-lbl"><span>Priskaičiuota</span><span></span></div>
          <div className="psd-row"><span>Mėnesinis atlyginimas (bruto)</span><b>{Dt2.fmtEur(emp.gross)}</b></div>
          <div className="psd-row"><span>Neapmokestinamasis dydis (NPD)</span><b>{Dt2.fmtEur(c.npd)}</b></div>
          <div className="psd-row"><span>Apmokestinamos pajamos</span><b>{Dt2.fmtEur(c.taxable)}</b></div>

          <div className="psd-row section-lbl"><span>Atskaitymai</span><span></span></div>
          <div className="psd-row minus"><span>Gyventojų pajamų mokestis (GPM 20 %)</span><b>−{Dt2.fmtEur(c.gpm)}</b></div>
          <div className="psd-row minus"><span>Sodros įmokos ({(c.sodraRate*100).toFixed(1)} %)</span><b>−{Dt2.fmtEur(c.sodra)}</b></div>

          <div className="psd-row section-lbl"><span>Darbdavio mokami mokesčiai</span><span></span></div>
          <div className="psd-row"><span>Darbdavio Sodra (1,77 %)</span><b>{Dt2.fmtEur(c.employerSodra)}</b></div>
          <div className="psd-row"><span>Garantinis fondas (0,16 %)</span><b>{Dt2.fmtEur(c.guaranteeFund)}</b></div>
        </div>
        <div className="psd-net">
          <span>Išmokama į rankas (neto)</span>
          <b>{Dt2.fmtEur(c.net)}</b>
        </div>
      </div>
      <p className="pay-foot" style={{ textAlign: "center", fontSize: 12, color: "var(--ink-faint)", marginTop: 16 }}>
        Dokumentas sugeneruotas automatiškai · Buhalteris 2.0 · {monthLabel}
      </p>
    </div>
  );
}

/* ===================== REPORTS ===================== */
function ReportsView({ company }) {
  const [reps, setReps] = useState(() => Dt2.reports());
  const [showToast, toastNode] = useToast();
  const submit = (idx) => {
    setReps((rs) => rs.map((r, i) => (i === idx ? { ...r, status: "pateikta" } : r)));
    showToast("Ataskaita pateikta");
  };
  const repBadge = (s) =>
    s === "pateikta" ? <Badge kind="ok">Pateikta</Badge> :
    s === "paruošta" ? <Badge kind="warn">Paruošta</Badge> : <Badge kind="muted">{s}</Badge>;

  return (
    <div>
      {toastNode}
      <div className="info-banner">
        <Icon name="shield" size={18} />
        Ataskaitos formuojamos automatiškai pagal patvirtintą darbo užmokestį ir teikiamos „Sodros“ EDAS bei VMI EDS sistemoms.
      </div>
      <div className="card">
        <div className="card-head"><h3>Ataskaitos institucijoms</h3><span className="badge-st muted">{company.name}</span></div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr><th>Kodas</th><th>Ataskaita</th><th>Institucija</th><th>Laikotarpis</th><th>Terminas</th><th>Būsena</th><th></th></tr>
            </thead>
            <tbody>
              {reps.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.code}</td>
                  <td>{r.name}</td>
                  <td><span className="badge-st info" style={{ background: "var(--bg-2)", color: "var(--ink-soft)" }}>{r.inst}</span></td>
                  <td>{r.period}</td>
                  <td>{r.due === "—" ? "—" : fmtDate(r.due)}</td>
                  <td>{repBadge(r.status)}</td>
                  <td className="num">
                    {r.status === "paruošta"
                      ? <span style={{ display: "inline-flex", gap: 6 }}>
                          <button className="btn btn--ghost" style={{ padding: "6px 11px", fontSize: 12.5 }} onClick={() => { window.downloadFile(`${r.code}-${r.period.replace(/\s/g, "-")}.csv`, Dt2.buildReportFile(company, r.code, r.period), "text/csv;charset=utf-8"); showToast(r.code + " atsisiųsta"); }}><Icon name="download" size={13} /> Failas</button>
                          <button className="btn btn--primary" style={{ padding: "6px 13px", fontSize: 13 }} onClick={() => submit(i)}><Icon name="send" size={13} /> Pateikti</button>
                        </span>
                      : <button className="btn btn--ghost" style={{ padding: "6px 13px", fontSize: 13 }} onClick={() => { window.downloadFile(`${r.code}-${r.period.replace(/\s/g, "-")}.csv`, Dt2.buildReportFile(company, r.code, r.period), "text/csv;charset=utf-8"); showToast(r.code + " atsisiųsta"); }}><Icon name="download" size={13} /> Failas</button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ===================== COMPANIES ===================== */
function CompaniesView({ companies, activeId, onSwitch, onAdd }) {
  const [form, setForm] = useState(false);
  const [showToast, toastNode] = useToast();
  const save = (co) => { onAdd(co); setForm(false); showToast("Įmonė pridėta"); };
  return (
    <div>
      {toastNode}
      <div className="info-banner">
        <Icon name="building" size={18} />
        Buhalterio planas — valdykite neribotą įmonių skaičių vienoje paskyroje ir greitai perjunkite klientus.
      </div>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        {companies.map((co) => {
          const total = co.employees.reduce((s, e) => s + e.gross, 0);
          const active = co.id === activeId;
          return (
            <div className="card card-pad" key={co.id} style={{ borderColor: active ? "var(--accent)" : undefined, cursor: "pointer" }} onClick={() => onSwitch(co.id)}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                <span className="cav" style={{ width: 42, height: 42, borderRadius: 11, background: active ? "var(--accent)" : "var(--ink)", color: "#fff", display: "grid", placeItems: "center", fontWeight: 650, fontSize: 14 }}>
                  {Dt2.companyInitials(co.name)}
                </span>
                {active && <span className="badge-st info" style={{ marginLeft: "auto" }}>Aktyvi</span>}
              </div>
              <div style={{ fontSize: 16, fontWeight: 650, letterSpacing: "-.01em" }}>{co.name}</div>
              <div style={{ fontSize: 13, color: "var(--ink-faint)", marginTop: 3 }}>{co.kind}</div>
              <div className="kv" style={{ marginTop: 16, marginBottom: 0 }}>
                <div className="cell"><div className="k">Darbuotojai</div><div className="v">{co.employees.length}</div></div>
                <div className="cell"><div className="k">DU fondas</div><div className="v">{Dt2.fmtEur(total, 0)}</div></div>
                <div className="cell"><div className="k">Įmonės kodas</div><div className="v" style={{ fontSize: 13 }}>{co.code}</div></div>
                <div className="cell"><div className="k">PVM kodas</div><div className="v" style={{ fontSize: 13 }}>{co.vat}</div></div>
              </div>
            </div>
          );
        })}
        <div className="card card-pad" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", borderStyle: "dashed", color: "var(--ink-faint)", minHeight: 200, cursor: "pointer" }} onClick={() => setForm(true)}>
          <div className="kic" style={{ background: "var(--bg-2)", color: "var(--ink-soft)" }}><Icon name="plus" size={20} sw={2.2} /></div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-soft)", marginTop: 12 }}>Pridėti įmonę</div>
          <div style={{ fontSize: 12.5, marginTop: 4 }}>Naujas klientas per kelias minutes</div>
        </div>
      </div>
      {form && <CompanyWizard onComplete={save} onClose={() => setForm(false)} />}
    </div>
  );
}

/* ===================== SETTINGS ===================== */
function SettingsView({ company, onSaveCompany }) {
  const T = Dt2.TAX;
  const [f, setF] = useState({ name: company.name, kind: company.kind, code: company.code, vat: company.vat, address: company.address });
  const [showToast, toastNode] = useToast();
  useEffect(() => { setF({ name: company.name, kind: company.kind, code: company.code, vat: company.vat, address: company.address }); }, [company.id]);
  const set = (k) => (v) => setF((s) => ({ ...s, [k]: v }));
  const dirty = ["name", "kind", "code", "vat", "address"].some((k) => f[k] !== company[k]);
  const save = () => { onSaveCompany && onSaveCompany(f); showToast("Įmonės duomenys išsaugoti"); };

  const rates = [
    { label: "Gyventojų pajamų mokestis (GPM)", val: "20 %" },
    { label: "Darbuotojo Sodra (be kaupimo)", val: "19,5 %" },
    { label: "Papildomas pensijų kaupimas (II pakopa)", val: "+3,0 %" },
    { label: "Darbdavio Sodra", val: "1,77 %" },
    { label: "Garantinis fondas", val: "0,16 %" },
    { label: "Minimalus mėnesinis atlyginimas (MMA)", val: Dt2.fmtEur(T.MMA, 0) },
    { label: "Maksimalus NPD", val: "747 €" },
  ];
  const us = Dt2.users();
  const roleBadge = (r) => r === "Buhalterė" || r === "Buhalteris" ? <Badge kind="info">{r}</Badge> : r === "Vadovas" ? <Badge kind="ok">{r}</Badge> : <Badge kind="muted">{r}</Badge>;

  return (
    <div>
      {toastNode}
      <div className="grid-2-even">
        <div className="card">
          <div className="card-head">
            <h3>Įmonės duomenys</h3>
            {dirty && <button className="btn btn--primary" style={{ padding: "7px 14px", fontSize: 13 }} onClick={save}><Icon name="check" size={14} sw={2.4} /> Išsaugoti</button>}
          </div>
          <div className="card-pad">
            <div className="form-grid">
              <Field label="Pavadinimas" value={f.name} onChange={set("name")} span />
              <Field label="Veiklos sritis" value={f.kind} onChange={set("kind")} />
              <Field label="Įmonės kodas" value={f.code} onChange={set("code")} />
              <Field label="PVM mokėtojo kodas" value={f.vat} onChange={set("vat")} />
              <Field label="Adresas" value={f.address} onChange={set("address")} />
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <h3>Mokesčių tarifai {T.YEAR} m.</h3>
            <span className="badge-st ok"><Icon name="refresh" size={12} sw={2.4} /> Atnaujinta</span>
          </div>
          <div className="card-pad" style={{ paddingTop: 6 }}>
            {rates.map((r, i) => (
              <div className="psd-row" key={i} style={{ borderBottom: "1px solid var(--line-2)" }}>
                <span>{r.label}</span><b>{r.val}</b>
              </div>
            ))}
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line-2)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Demonstraciniai duomenys</div>
                <div style={{ fontSize: 12, color: "var(--ink-faint)", marginTop: 2 }}>Atstatyti pradinius įmonių ir darbuotojų duomenis</div>
              </div>
              <button className="btn btn--ghost" style={{ padding: "8px 14px", fontSize: 13 }}
                onClick={() => { try { localStorage.removeItem("pav_companies_v2"); } catch (e) {} location.reload(); }}>
                <Icon name="refresh" size={14} sw={2.2} /> Atstatyti
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-head">
          <h3>Vartotojai ir teisės</h3>
          <button className="btn btn--ghost" style={{ padding: "7px 14px", fontSize: 13 }} onClick={() => showToast("Pakvietimas išsiųstas")}><Icon name="plus" size={14} sw={2.2} /> Pakviesti vartotoją</button>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead><tr><th>Vartotojas</th><th>El. paštas</th><th>Rolė</th><th>Prieiga</th><th></th></tr></thead>
            <tbody>
              {us.map((u, i) => (
                <tr key={i}>
                  <td><span className="cell-emp"><Avatar text={u.name.split(" ").map((x) => x[0]).join("")} /><span className="nm">{u.name}{u.you && <span style={{ fontSize: 11, color: "var(--ink-faint)", fontWeight: 400 }}> (jūs)</span>}</span></span></td>
                  <td>{u.email}</td>
                  <td>{roleBadge(u.role)}</td>
                  <td style={{ fontSize: 13 }}>{u.access}</td>
                  <td className="num"><Icon name="gear" size={16} style={{ color: "var(--ink-faint)" }} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid-2-even" style={{ marginTop: 16 }}>
        <div className="card">
          <div className="card-head"><h3>Integracijos</h3><span className="badge-st muted">Bankai ir VMI</span></div>
          <div className="card-pad">
            <div className="integ-grid">
              {[
                { n: "Swedbank", d: "SEPA mokėjimai", c: "#FA5400", on: true },
                { n: "SEB", d: "SEPA mokėjimai", c: "#62A744", on: false },
                { n: "i.SAF / VMI", d: "Sąskaitų teikimas", c: "#2A6FDB", on: true },
                { n: "Sodra EDAS", d: "Ataskaitos", c: "#1F8A5B", on: true },
              ].map((it, i) => (
                <div className="integ" key={i}>
                  <span className="ilogo" style={{ background: it.c }}>{it.n[0]}</span>
                  <span><div className="iname">{it.n}</div><div className="idesc">{it.d}</div></span>
                  <span className="ibtn">{it.on ? <Badge kind="ok">Prijungta</Badge> : <button className="btn btn--ghost" style={{ padding: "6px 12px", fontSize: 12.5 }} onClick={() => showToast("Jungiamasi…")}>Prijungti</button>}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <AuditCard />
      </div>
    </div>
  );
}

Object.assign(window, { PayslipsView, ReportsView, CompaniesView, SettingsView });