/* ============================================================
   Views 3 — Skaičiuoklė, Atostogos ir ligos, Tabelis
   ============================================================ */
const D3 = window.PavData;

/* ===================== SKAIČIUOKLĖ (net↔gross) ===================== */
function CalculatorView() {
  const [mode, setMode] = useState("bruto"); // bruto | neto
  const [amount, setAmount] = useState(2000);
  const [pillar, setPillar] = useState(false);

  const opts = { pillarII: pillar };
  const gross = mode === "bruto" ? amount : D3.grossFromNet(amount, opts);
  const c = D3.calcPayroll(gross || 0, opts);
  const presets = mode === "bruto" ? [1038, 1500, 2000, 3000, 5000] : [1000, 1300, 1600, 2000, 3000];
  const sliderMax = mode === "bruto" ? 8000 : 5500;
  const costMode = mode === "cost";

  return (
    <div style={{ maxWidth: 860, margin: "0 auto" }}>
      <div className="info-banner">
        <Icon name="bolt" size={18} />
        {costMode
          ? "Kainos darbdaviui skaičiuoklė — įveskite norimą „į rankas“ sumą ir matykite visą įmonės sąnaudą."
          : "Dvipusė skaičiuoklė — įveskite bruto sumą arba norimą „į rankas“ atlyginimą ir matykite visus mokesčius."}
      </div>
      <div className="grid-2-even" style={{ alignItems: "stretch" }}>
        <div className="card card-pad">
          <div className="seg" style={{ marginBottom: 22 }}>
            <button className={mode === "bruto" ? "active" : ""} onClick={() => { setMode("bruto"); setAmount(2000); }}>Nuo bruto</button>
            <button className={mode === "neto" ? "active" : ""} onClick={() => { setMode("neto"); setAmount(1300); }}>Nuo „į rankas“</button>
            <button className={mode === "cost" ? "active" : ""} onClick={() => { setMode("cost"); setAmount(1300); }}>Darbdavio kaina</button>
          </div>
          <label className="ff-label" style={{ display: "block", marginBottom: 9 }}>
            {mode === "bruto" ? "Atlyginimas „ant popieriaus“ (bruto)" : "Atlyginimas „į rankas“ (neto)"}
          </label>
          <div style={{ position: "relative", marginBottom: 16 }}>
            <input className="ff-input" style={{ height: 58, fontFamily: "var(--mono)", fontSize: 26, fontWeight: 600, paddingRight: 40 }}
              inputMode="decimal" value={amount}
              onChange={(e) => setAmount(parseFloat(String(e.target.value).replace(/\s/g, "").replace(",", ".")) || 0)} />
            <span style={{ position: "absolute", right: 16, top: 16, fontSize: 20, color: "var(--ink-faint)", fontWeight: 600 }}>€</span>
          </div>
          <input type="range" className="calc-slider" min={mode === "bruto" ? 1038 : 800} max={sliderMax} step="10"
            value={Math.min(sliderMax, Math.max(800, amount))} onChange={(e) => setAmount(parseFloat(e.target.value))}
            style={{ width: "100%", margin: "4px 0 16px" }} />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 22 }}>
            {presets.map((p) => (
              <button key={p} className="btn btn--ghost" style={{ padding: "7px 13px", fontSize: 12.5 }} onClick={() => setAmount(p)}>
                {p === 1038 ? "MMA" : D3.fmtNum(p) + " €"}
              </button>
            ))}
          </div>
          <ToggleField label="Kaupia pensiją (II pakopa)" hint="Papildomi +3 % Sodros įmokos" value={pillar} onChange={setPillar} />
        </div>

        <div className="card card-pad" style={{ background: "linear-gradient(170deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface) 70%)" }}>
          <div style={{ paddingBottom: 20, borderBottom: "1px dashed var(--line)", marginBottom: 18 }}>
            <div style={{ fontSize: 13.5, color: "var(--ink-soft)" }}>{costMode ? "Bendra sąnauda darbdaviui" : "Atlyginimas „į rankas“ (neto)"}</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 44, fontWeight: 650, letterSpacing: "-.02em", color: "var(--accent-strong)", marginTop: 6 }}>{D3.fmtEur(costMode ? c.employerTotal : c.net)}</div>
          </div>
          <div className="psd-rows" style={{ padding: 0 }}>
            {costMode && <div className="psd-row"><span>Darbuotojui „į rankas“</span><b>{D3.fmtEur(c.net)}</b></div>}
            <div className="psd-row"><span>Priskaičiuota (bruto)</span><b>{D3.fmtEur(gross)}</b></div>
            <div className="psd-row"><span>NPD (neapmokestinama)</span><b>{D3.fmtEur(c.npd)}</b></div>
            <div className="psd-row minus"><span>GPM (20 %)</span><b>−{D3.fmtEur(c.gpm)}</b></div>
            <div className="psd-row minus"><span>Sodra ({(c.sodraRate * 100).toFixed(1).replace(".", ",")} %)</span><b>−{D3.fmtEur(c.sodra)}</b></div>
            <div className="psd-row"><span>Darbdavio Sodra + GF</span><b>{D3.fmtEur(c.employerSodra + c.guaranteeFund)}</b></div>
            <div className="psd-row" style={{ borderTop: "1px solid var(--line)", marginTop: 6, paddingTop: 14 }}>
              <span style={{ fontWeight: 600, color: "var(--ink)" }}>{costMode ? "Mokesčiai iš viso" : "Darbdavio sąnaudos"}</span>
              <b style={{ color: "var(--ink)" }}>{D3.fmtEur(costMode ? (c.gpm + c.sodra + c.employerSodra + c.guaranteeFund) : c.employerTotal)}</b>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===================== ATOSTOGOS IR LIGOS ===================== */
function LeaveView({ company }) {
  const [rows, setRows] = useState(() => D3.leaveRequests(company));
  const [tab, setTab] = useState("list");
  const [showToast, toastNode] = useToast();
  useEffect(() => { setRows(D3.leaveRequests(company)); }, [company.id]);

  const setStatus = (id, status) => {
    setRows((rs) => rs.map((r) => (r.id === id ? { ...r, status } : r)));
    showToast(status === "patvirtinta" ? "Prašymas patvirtintas" : "Prašymas atmestas");
  };

  const pending = rows.filter((r) => r.status === "laukia").length;
  const onLeave = company.employees.filter((e) => e.status === "atostogos").length;
  const onSick = company.employees.filter((e) => e.status === "liga").length;

  const typeLabel = (t) => t === "atostogos" ? "Kasmetinės atostogos" : t === "liga" ? "Liga" : "Nemokamos atostogos";
  const typeBadge = (t) => t === "liga" ? <Badge kind="warn">Liga</Badge> : t === "nemokamos" ? <Badge kind="muted">Nemokamos</Badge> : <Badge kind="info">Atostogos</Badge>;
  const stBadge = (s) => s === "patvirtinta" ? <Badge kind="ok">Patvirtinta</Badge> : s === "atmesta" ? <Badge kind="warn">Atmesta</Badge> : <Badge kind="muted">Laukia</Badge>;

  const kpis = [
    { ic: "clock", label: "Laukia patvirtinimo", val: pending },
    { ic: "calendar", label: "Šiuo metu atostogose", val: onLeave },
    { ic: "shield", label: "Nedarbingume (liga)", val: onSick },
  ];

  return (
    <div>
      {toastNode}
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        {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>
        ))}
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 14 }}>
        <div className="seg">
          <button className={tab === "list" ? "active" : ""} onClick={() => setTab("list")}>Sąrašas</button>
          <button className={tab === "calendar" ? "active" : ""} onClick={() => setTab("calendar")}>Kalendorius</button>
        </div>
      </div>

      {tab === "calendar" ? <LeaveCalendar company={company} /> : (
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><h3>Prašymai</h3></div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr><th>Darbuotojas</th><th>Tipas</th><th>Laikotarpis</th><th className="num">Dienos</th><th>Būsena</th><th></th></tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id}>
                  <td>
                    <span className="cell-emp">
                      <Avatar text={r.emp.initials} />
                      <span><span className="nm">{r.emp.name}</span><br /><span className="pos">{r.emp.position}</span></span>
                    </span>
                  </td>
                  <td>{typeBadge(r.type)}</td>
                  <td>{fmtDate(r.from)} – {fmtDate(r.to)}</td>
                  <td className="num strong">{r.days} d.</td>
                  <td>{stBadge(r.status)}</td>
                  <td className="num">
                    {r.status === "laukia" ? (
                      <span style={{ display: "inline-flex", gap: 6 }}>
                        <button className="btn btn--primary" style={{ padding: "6px 12px", fontSize: 12.5 }} onClick={() => setStatus(r.id, "patvirtinta")}>Tvirtinti</button>
                        <button className="btn btn--ghost" style={{ padding: "6px 12px", fontSize: 12.5 }} onClick={() => setStatus(r.id, "atmesta")}>Atmesti</button>
                      </span>
                    ) : <span style={{ color: "var(--ink-faint)", fontSize: 12.5 }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      )}

      <div className="card">
        <div className="card-head"><h3>Atostogų likučiai</h3><span className="badge-st muted">2026 m.</span></div>
        <div className="table-wrap">
          <table className="data">
            <thead><tr><th>Darbuotojas</th><th className="num">Sukaupta</th><th className="num">Panaudota</th><th className="num">Likutis</th><th>Užimtumas</th></tr></thead>
            <tbody>
              {company.employees.map((e) => {
                const b = D3.leaveBalance(e);
                const pct = Math.round((b.used / b.accrued) * 100);
                return (
                  <tr key={e.id}>
                    <td><span className="cell-emp"><Avatar text={e.initials} /><span className="nm">{e.name}</span></span></td>
                    <td className="num">{b.accrued} d.</td>
                    <td className="num">{b.used} d.</td>
                    <td className="num strong">{b.left} d.</td>
                    <td style={{ minWidth: 140 }}>
                      <div style={{ height: 7, borderRadius: 99, background: "var(--bg-2)", overflow: "hidden", width: 120 }}>
                        <div style={{ width: pct + "%", height: "100%", background: pct > 80 ? "#B07A1E" : "var(--accent)", borderRadius: 99 }}></div>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ===================== TABELIS (timesheet) ===================== */
function TimesheetView({ company, monthLabel }) {
  const ts = D3.timesheet(company);
  const tot = ts.reduce((a, r) => ({ worked: a.worked + r.worked, sick: a.sick + r.sick, vac: a.vac + r.vac, ot: a.ot + r.overtime, hours: a.hours + r.hours }), { worked: 0, sick: 0, vac: 0, ot: 0, hours: 0 });
  return (
    <div>
      <div className="info-banner">
        <Icon name="clock" size={18} />
        Darbo laiko apskaita — {monthLabel}. Dirbtos dienos ir viršvalandžiai automatiškai perkeliami į darbo užmokesčio skaičiavimą.
      </div>
      <div className="card">
        <div className="card-head"><h3>Darbo laiko apskaitos žiniaraštis</h3><span className="badge-st info">{monthLabel}</span></div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Darbuotojas</th>
                <th className="num">Darbo dienos</th>
                <th className="num">Dirbta</th>
                <th className="num">Atostogos</th>
                <th className="num">Liga</th>
                <th className="num">Viršval.</th>
                <th className="num">Iš viso val.</th>
              </tr>
            </thead>
            <tbody>
              {ts.map((r) => (
                <tr key={r.emp.id}>
                  <td><span className="cell-emp"><Avatar text={r.emp.initials} /><span><span className="nm">{r.emp.name}</span><br /><span className="pos">{r.emp.position}</span></span></span></td>
                  <td className="num">{r.workDays}</td>
                  <td className="num strong">{r.worked}</td>
                  <td className="num">{r.vac || "—"}</td>
                  <td className="num">{r.sick || "—"}</td>
                  <td className="num" style={{ color: r.overtime ? "var(--accent-strong)" : "var(--ink-faint)" }}>{r.overtime ? "+" + r.overtime : "—"}</td>
                  <td className="num strong">{r.hours} val.</td>
                </tr>
              ))}
              <tr className="total">
                <td>Iš viso ({ts.length})</td>
                <td className="num">—</td>
                <td className="num">{tot.worked}</td>
                <td className="num">{tot.vac}</td>
                <td className="num">{tot.sick}</td>
                <td className="num">+{tot.ot}</td>
                <td className="num">{tot.hours} val.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalculatorView, LeaveView, TimesheetView });