/* Výkazy a exporty — mesačný prehľad, rozpis hodín pre účtovníčku, PDF + CSV */

function Reports({ goExport, version }) {
  const [posFilter, setPosFilter] = React.useState("all");
  const list = TD.EMPLOYEES.filter(e => posFilter === "all" || e.pos === posFilter);
  const rows = list.map(e => ({ e, s: TD.monthSummary(e.id) }));

  const tot = rows.reduce((a, { s }) => ({
    worked: a.worked + s.worked, night: a.night + s.night, weekend: a.weekend + s.sat + s.sun,
    holiday: a.holiday + s.holiday, overtime: a.overtime + s.overtime, days: a.days + s.daysWorked,
    absDays: a.absDays + s.absDays, wage: a.wage + s.wage,
  }), { worked: 0, night: 0, weekend: 0, holiday: 0, overtime: 0, days: 0, absDays: 0, wage: 0 });

  function exportCSV() {
    const sep = ";";
    const head = ["Zamestnanec", "Pozícia", "Os. číslo", "Odprac. dni", "Odprac. hodiny", "z toho nočné", "Sobota", "Nedeľa", "Sviatok", "Nadčas", "Dovolenka (dni)", "PN (dni)", "OČR (dni)", "Paragraf (dni)", "Neplatené (dni)", "Meškania", "Hod. sadzba", "Hrubá mzda"];
    const num = (n) => String(Math.round(n * 100) / 100).replace(".", ",");
    const lines = [head.join(sep)];
    rows.forEach(({ e, s }) => {
      lines.push([
        e.name, TD.POSITIONS[e.pos].label, e.id.toUpperCase(),
        s.daysWorked, num(s.worked), num(s.night), num(s.sat), num(s.sun), num(s.holiday), num(s.overtime),
        s.abs.dovolenka, s.abs.pn, s.abs.ocr, s.abs.paragraf, s.abs.neplatene, s.late,
        num(e.rate), num(s.wage),
      ].join(sep));
    });
    lines.push([
      "SPOLU (" + rows.length + ")", "", "", tot.days, num(tot.worked), num(tot.night), "", "", num(tot.holiday), num(tot.overtime),
      "", "", "", "", "", "", "", num(tot.wage),
    ].join(sep));
    const blob = new Blob(["\uFEFF" + lines.join("\r\n")], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = "vykaz_dochadzky_" + TD.MONTHS[TD.MONTH] + "_" + TD.YEAR + ".csv";
    document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
  }

  return (
    <div>
      <div className="section-head">
        <div>
          <div className="eyebrow">Mzdové obdobie</div>
          <h2 style={{ fontSize: 22 }}>{TD.MONTHS[TD.MONTH][0].toUpperCase() + TD.MONTHS[TD.MONTH].slice(1)} {TD.YEAR}</h2>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <div className="seg">
            <button className={posFilter === "all" ? "on" : ""} onClick={() => setPosFilter("all")}>Všetky</button>
            {Object.values(TD.POSITIONS).map(p => <button key={p.id} className={posFilter === p.id ? "on" : ""} onClick={() => setPosFilter(p.id)}>{p.label}</button>)}
          </div>
          <button className="btn ghost" onClick={exportCSV}><Icon.sheet width="16" height="16" /> CSV</button>
          <button className="btn ghost" onClick={() => goExport({ mode: "summary", pos: posFilter })}><Icon.report width="16" height="16" /> Prehľad PDF</button>
          <button className="btn orange" onClick={() => goExport({ mode: "all", pos: posFilter })}><Icon.pdf width="16" height="16" /> Po zamestnancoch</button>
        </div>
      </div>

      <div className="stats stats-5" style={{ marginBottom: 20 }}>
        <div className="stat"><div className="k"><Icon.hours width="15" height="15" />Odpracované</div><div className="v tnum">{Math.round(tot.worked)}<small> h</small></div><div className="meta">{tot.days} odprac. dní</div></div>
        <div className="stat"><div className="k"><Icon.moon width="15" height="15" />Nočné hodiny</div><div className="v tnum">{Math.round(tot.night)}<small> h</small></div><div className="meta">22:00–06:00</div></div>
        <div className="stat"><div className="k"><Icon.sun width="15" height="15" />Víkend / sviatok</div><div className="v tnum">{Math.round(tot.weekend + tot.holiday)}<small> h</small></div><div className="meta">{Math.round(tot.holiday)} h vo sviatok</div></div>
        <div className="stat"><div className="k"><Icon.calendar width="15" height="15" />Neprítomnosti</div><div className="v tnum">{tot.absDays}<small> dní</small></div><div className="meta">D / PN / OČR / P / NV</div></div>
        <div className="stat"><div className="k"><Icon.euro width="15" height="15" />Mzdy (hrubé)</div><div className="v tnum" style={{ color: "var(--sage-dark)" }}>{fmtEur(tot.wage)}</div><div className="meta">podklad pre mzdy</div></div>
      </div>

      <div className="card" style={{ padding: "6px 8px 8px", overflowX: "auto" }}>
        <table className="table rep-table">
          <thead>
            <tr>
              <th>Zamestnanec</th>
              <th className="r">Dni</th>
              <th className="r">Odprac.</th>
              <th className="r" title="Nočné hodiny 22:00–06:00">Nočné</th>
              <th className="r" title="Sobota + nedeľa">Víkend</th>
              <th className="r" title="Práca vo sviatok">Sviatok</th>
              <th className="r" title="Nad mesačný fond">Nadčas</th>
              <th>Neprítomnosť (dni)</th>
              <th className="r">Hrubá mzda</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(({ e, s }) => (
              <tr key={e.id} className="clickable" onClick={() => goExport({ mode: "one", eid: e.id })}>
                <td><div className="cell-name"><Avatar emp={e} size={34} /><div><b>{e.name}</b><div style={{ marginTop: 1 }}><PositionPill pos={e.pos} /></div></div></div></td>
                <td className="tnum r">{s.daysWorked}</td>
                <td className="tnum r"><b>{fmtH(s.worked)}</b></td>
                <td className="tnum r" style={{ color: s.night ? "var(--ink)" : "var(--ink-faint)" }}>{s.night ? fmtH(s.night) : "—"}</td>
                <td className="tnum r" style={{ color: (s.sat + s.sun) ? "var(--ink)" : "var(--ink-faint)" }}>{(s.sat + s.sun) ? fmtH(s.sat + s.sun) : "—"}</td>
                <td className="tnum r" style={{ color: s.holiday ? "var(--ink)" : "var(--ink-faint)" }}>{s.holiday ? fmtH(s.holiday) : "—"}</td>
                <td className="tnum r" style={{ color: s.overtime ? "var(--orange)" : "var(--ink-faint)" }}>{s.overtime ? fmtH(s.overtime) : "—"}</td>
                <td>
                  <div className="abs-cells">
                    {["dovolenka", "pn", "ocr", "paragraf", "neplatene"].map(k => s.abs[k] ? <span key={k} className="abs-count"><AbsChip type={k} />{s.abs[k]}</span> : null)}
                    {!s.absDays && <span className="faint">—</span>}
                  </div>
                </td>
                <td className="tnum r">{fmtEur(s.wage)}</td>
                <td className="r" style={{ width: 40 }}><button className="icon-btn" title="Výkaz PDF" onClick={ev => { ev.stopPropagation(); goExport({ mode: "one", eid: e.id }); }}><Icon.pdf width="16" height="16" /></button></td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr className="total">
              <td>Spolu ({rows.length} zam.)</td>
              <td className="tnum r">{tot.days}</td>
              <td className="tnum r">{fmtH(tot.worked)}</td>
              <td className="tnum r">{fmtH(tot.night)}</td>
              <td className="tnum r">{fmtH(tot.weekend)}</td>
              <td className="tnum r">{fmtH(tot.holiday)}</td>
              <td className="tnum r">{fmtH(tot.overtime)}</td>
              <td className="tnum">{tot.absDays} dní</td>
              <td className="tnum r">{fmtEur(tot.wage)}</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>

      <p className="muted" style={{ fontSize: 13, marginTop: 14, display: "flex", alignItems: "center", gap: 7, lineHeight: 1.5 }}>
        <Icon.sheet width="15" height="15" /> <b style={{ fontWeight: 600 }}>CSV</b> obsahuje rozpis hodín (nočné, sobota, nedeľa, sviatok, nadčas) a neprítomnosti v dňoch — priamo na zaslanie účtovníčke. Príplatky systém zámerne nepočíta. Evidencia podľa §99 Zákonníka práce.
      </p>
    </div>
  );
}

/* ---- PDF / tlačový dokument ---- */
function PrintDoc({ target, onClose }) {
  React.useEffect(() => {
    function esc(e) { if (e.key === "Escape") onClose(); }
    window.addEventListener("keydown", esc);
    return () => window.removeEventListener("keydown", esc);
  }, []);

  let emps;
  if (target.mode === "one") emps = [TD.empById(target.eid)];
  else emps = TD.EMPLOYEES.filter(e => !target.pos || target.pos === "all" || e.pos === target.pos);

  const titleTxt = target.mode === "one" ? "Výkaz dochádzky — " + TD.empById(target.eid).name
    : target.mode === "summary" ? "Mesačný prehľad prevádzky (" + emps.length + " zam.)"
      : "Výkazy po zamestnancoch (" + emps.length + ")";

  return (
    <div className="print-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="print-bar">
        <Icon.pdf width="20" height="20" style={{ color: "var(--orange)" }} />
        <span className="pb-title">{titleTxt}</span>
        <span className="spacer"></span>
        <button className="btn ghost sm" onClick={onClose}><Icon.close width="15" height="15" /> Zavrieť</button>
        <button className="btn orange sm" onClick={() => window.print()}><Icon.print width="16" height="16" /> Tlačiť / Uložiť PDF</button>
      </div>
      <div className="print-doc">
        {target.mode === "summary"
          ? <SummaryPage emps={emps} />
          : emps.map(e => <PrintPage key={e.id} emp={e} />)}
      </div>
    </div>
  );
}

function PdHead({ wide }) {
  const today = new Date();
  return (
    <div className="pd-head">
      <div className="pd-brand">
        <TDLogo size={wide ? 44 : 52} color="#1C1B19" />
        <div><b>Hotel &amp; Office</b><span>Evidencia pracovného času · §99 ZP</span></div>
      </div>
      <div className="pd-meta">
        IČO: 52 945 715<br />IČ DPH: SK2121186639<br />
        Vygenerované: {today.getDate()}.{today.getMonth() + 1}.{today.getFullYear()}
      </div>
    </div>
  );
}

function PrintPage({ emp }) {
  const recs = TD.recordsForEmployee(emp.id);
  const s = TD.monthSummary(emp.id);
  const rowsForTable = recs.filter(r => r.hours > 0 || r.in || TD.isAbsence(r.status));

  return (
    <div className="print-page">
      <PdHead />
      <div className="pd-title">Výkaz dochádzky</div>
      <div className="pd-sub">{emp.name} · {TD.POSITIONS[emp.pos].label} · os. č. {emp.id.toUpperCase()} · obdobie {TD.MONTHS[TD.MONTH]} {TD.YEAR}</div>

      <div className="pd-info">
        <div className="pdi"><div className="k">Odpracované hodiny</div><div className="v">{fmtH(s.worked)}</div></div>
        <div className="pdi"><div className="k">Odpracované dni</div><div className="v">{s.daysWorked}</div></div>
        <div className="pdi"><div className="k">Hod. sadzba</div><div className="v">{fmtEur(emp.rate)}</div></div>
        <div className="pdi"><div className="k">Hrubá mzda</div><div className="v">{fmtEur(s.wage)}</div></div>
      </div>

      {/* Rozpis hodín pre účtovníčku */}
      <div className="pd-grid2">
        <div>
          <div className="pd-h">Rozpis odpracovaných hodín</div>
          <table className="pd-mini">
            <tbody>
              <tr><td>Odpracované spolu</td><td className="num">{fmtH(s.worked)}</td></tr>
              <tr><td>z toho nočné (22:00–06:00)</td><td className="num">{fmtH(s.night)}</td></tr>
              <tr><td>z toho sobota</td><td className="num">{fmtH(s.sat)}</td></tr>
              <tr><td>z toho nedeľa</td><td className="num">{fmtH(s.sun)}</td></tr>
              <tr><td>z toho sviatok</td><td className="num">{fmtH(s.holiday)}</td></tr>
              <tr><td>Nadčas (nad fond {s.fond} h)</td><td className="num">{fmtH(s.overtime)}</td></tr>
            </tbody>
          </table>
        </div>
        <div>
          <div className="pd-h">Neprítomnosť (dni)</div>
          <table className="pd-mini">
            <tbody>
              <tr><td>Dovolenka (D)</td><td className="num">{s.abs.dovolenka}</td></tr>
              <tr><td>PN — práceneschopnosť</td><td className="num">{s.abs.pn}</td></tr>
              <tr><td>OČR — ošetrovanie čl. rodiny</td><td className="num">{s.abs.ocr}</td></tr>
              <tr><td>Paragraf / lekár (P)</td><td className="num">{s.abs.paragraf}</td></tr>
              <tr><td>Neplatené voľno (NV)</td><td className="num">{s.abs.neplatene}</td></tr>
            </tbody>
          </table>
          <div className="pd-vac">Dovolenka: nárok <b>{s.vac.ent}</b> · čerpané <b>{s.vac.taken}</b> · <span className="left">zostatok {s.vac.left} dní</span></div>
        </div>
      </div>

      <div className="pd-h" style={{ marginTop: 14 }}>Denná evidencia</div>
      <table className="pd-table">
        <thead><tr><th>Dátum</th><th>Deň</th><th>Zmena</th><th>Príchod</th><th>Odchod</th><th>Prest.</th><th className="num">Hodiny</th><th>Stav</th></tr></thead>
        <tbody>
          {rowsForTable.map(r => {
            const d = new Date(r.date);
            const ab = TD.isAbsence(r.status);
            const hol = TD.isHoliday(r.date);
            return (
              <tr key={r.date} className={hol ? "is-hol" : ""}>
                <td>{d.getDate()}.{d.getMonth() + 1}.{d.getFullYear()}{hol && <span className="hol-dot" title={TD.HOLIDAYS[r.date]}>★</span>}</td>
                <td>{TD.DOW[TD.dowOf(r.date)]}</td>
                <td>{ab ? "—" : (TD.SHIFTS[r.shift] ? TD.SHIFTS[r.shift].label : "—")}</td>
                <td>{r.in || "—"}</td>
                <td>{r.out || "—"}</td>
                <td>{r.breakMin ? r.breakMin + " min" : "—"}</td>
                <td className="num">{r.hours ? fmtH(r.hours) : "—"}</td>
                <td>{ab ? TD.ABSENCE[r.status].code + " — " + TD.statusLabel[r.status] : TD.statusLabel[r.status]}</td>
              </tr>
            );
          })}
          <tr className="tot"><td colSpan="6">Spolu odpracované</td><td className="num">{fmtH(s.worked)}</td><td></td></tr>
        </tbody>
      </table>

      <div className="pd-legal">
        Evidencia pracovného času podľa §99 Zákonníka práce. Dovolenka §100–117 · PN/OČR §141 · prekážky v práci §136–141 ·
        práca nadčas §97, vo sviatok §122, nočná práca §123, v sobotu/nedeľu §122a/122b. Príplatky sa do tohto výkazu nepočítajú.
      </div>

      <div className="pd-foot">
        <div>Meškania: {s.late} × · Hrubá mzda: <b>{fmtEur(s.wage)}</b> ({fmtEur(emp.rate)}/h)</div>
        <div className="pd-sign"><div className="line"></div>Podpis zodpovednej osoby</div>
      </div>
    </div>
  );
}

function SummaryPage({ emps }) {
  const rows = emps.map(e => ({ e, s: TD.monthSummary(e.id) }));
  const t = rows.reduce((a, { s }) => ({
    worked: a.worked + s.worked, night: a.night + s.night, sat: a.sat + s.sat, sun: a.sun + s.sun,
    holiday: a.holiday + s.holiday, overtime: a.overtime + s.overtime, days: a.days + s.daysWorked,
    d: a.d + s.abs.dovolenka, pn: a.pn + s.abs.pn, ocr: a.ocr + s.abs.ocr, p: a.p + s.abs.paragraf, nv: a.nv + s.abs.neplatene,
    wage: a.wage + s.wage,
  }), { worked: 0, night: 0, sat: 0, sun: 0, holiday: 0, overtime: 0, days: 0, d: 0, pn: 0, ocr: 0, p: 0, nv: 0, wage: 0 });

  return (
    <div className="print-page wide">
      <PdHead wide />
      <div className="pd-title">Mesačný výkaz dochádzky — prehľad prevádzky</div>
      <div className="pd-sub">Obdobie {TD.MONTHS[TD.MONTH]} {TD.YEAR} · {rows.length} zamestnancov · mzdový podklad</div>

      <table className="pd-table sum">
        <thead>
          <tr>
            <th>Zamestnanec</th><th>Pozícia</th><th className="num">Dni</th><th className="num">Odprac.</th>
            <th className="num">Nočné</th><th className="num">So</th><th className="num">Ne</th><th className="num">Sviat.</th><th className="num">Nadč.</th>
            <th className="num">D</th><th className="num">PN</th><th className="num">OČR</th><th className="num">P</th><th className="num">NV</th>
            <th className="num">Hrubá mzda</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(({ e, s }) => (
            <tr key={e.id}>
              <td><b>{e.name}</b></td>
              <td>{TD.POSITIONS[e.pos].label}</td>
              <td className="num">{s.daysWorked}</td>
              <td className="num"><b>{fmtH(s.worked)}</b></td>
              <td className="num">{s.night ? fmtH(s.night) : "—"}</td>
              <td className="num">{s.sat ? fmtH(s.sat) : "—"}</td>
              <td className="num">{s.sun ? fmtH(s.sun) : "—"}</td>
              <td className="num">{s.holiday ? fmtH(s.holiday) : "—"}</td>
              <td className="num">{s.overtime ? fmtH(s.overtime) : "—"}</td>
              <td className="num">{s.abs.dovolenka || "—"}</td>
              <td className="num">{s.abs.pn || "—"}</td>
              <td className="num">{s.abs.ocr || "—"}</td>
              <td className="num">{s.abs.paragraf || "—"}</td>
              <td className="num">{s.abs.neplatene || "—"}</td>
              <td className="num">{fmtEur(s.wage)}</td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr className="tot">
            <td colSpan="2">Spolu ({rows.length})</td>
            <td className="num">{t.days}</td><td className="num">{fmtH(t.worked)}</td>
            <td className="num">{fmtH(t.night)}</td><td className="num">{fmtH(t.sat)}</td><td className="num">{fmtH(t.sun)}</td>
            <td className="num">{fmtH(t.holiday)}</td><td className="num">{fmtH(t.overtime)}</td>
            <td className="num">{t.d}</td><td className="num">{t.pn}</td><td className="num">{t.ocr}</td><td className="num">{t.p}</td><td className="num">{t.nv}</td>
            <td className="num">{fmtEur(t.wage)}</td>
          </tr>
        </tfoot>
      </table>

      <div className="pd-legal">
        Vysvetlivky: D — dovolenka · PN — práceneschopnosť · OČR — ošetrovanie člena rodiny · P — paragraf/lekár · NV — neplatené voľno.
        Hodnoty v stĺpcoch Nočné/So/Ne/Sviatok sú odpracované hodiny v danom režime (podklad pre príplatky §122–123). Evidencia podľa §99 Zákonníka práce.
      </div>

      <div className="pd-foot">
        <div>Spolu hrubé mzdy: <b>{fmtEur(t.wage)}</b></div>
        <div className="pd-sign"><div className="line"></div>Podpis zodpovednej osoby</div>
      </div>
    </div>
  );
}

Object.assign(window, { Reports, PrintDoc });