/* Dashboard — Dnes (dnešný prehľad) */

function Dashboard({ goEmployee, openTerminal, version }) {
  const today = TD.fmt(TD.TODAY);
  const recs = TD.recordsForDate(today);

  const working = recs.filter(r => r.status === "working" || r.status === "working_late");
  const done = recs.filter(r => r.status === "done" || r.status === "done_late");
  const planned = recs.filter(r => r.status === "planned");
  const absent = recs.filter(r => TD.isAbsence(r.status));
  const late = recs.filter(r => r.status === "working_late" || r.status === "done_late");
  const hoursToday = done.reduce((s, r) => s + r.hours, 0)
    + working.reduce((s, r) => { const h = TD.diffH(r.in, "11:20"); return s + (h > 0 && h < 16 ? h : 0); }, 0);

  function row(r) {
    const e = TD.empById(r.eid);
    return (
      <tr key={r.eid} className="clickable" onClick={() => goEmployee(e.id)}>
        <td>
          <div className="cell-name">
            <Avatar emp={e} size={38} />
            <div>
              <b>{e.name}</b>
              <div style={{ marginTop: 2 }}><PositionPill pos={e.pos} /></div>
            </div>
          </div>
        </td>
        <td><ShiftTag shift={r.shift} /></td>
        <td className="tnum">{r.in ? <b>{r.in}</b> : <span className="faint">—</span>}</td>
        <td className="tnum">{r.out || (r.in ? <span className="muted">v práci</span> : <span className="faint">—</span>)}</td>
        <td><StatusBadge status={r.status} /></td>
      </tr>
    );
  }

  const ordered = [...working, ...planned, ...done, ...absent];

  return (
    <div>
      <div className="stats">
        <div className="stat">
          <div className="k"><Icon.people width="15" height="15" />Práve v práci</div>
          <div className="v" style={{ color: "var(--sage-dark)" }}>{working.length}<small> / {recs.filter(r=>!TD.isAbsence(r.status)).length}</small></div>
          <div className="meta">z {recs.length} naplánovaných na dnes</div>
        </div>
        <div className="stat">
          <div className="k"><Icon.check width="15" height="15" />Už odpracovali</div>
          <div className="v">{done.length}</div>
          <div className="meta">dokončené zmeny</div>
        </div>
        <div className="stat">
          <div className="k"><Icon.warn width="15" height="15" />Meškania dnes</div>
          <div className="v" style={{ color: late.length ? "var(--late)" : "var(--ink)" }}>{late.length}</div>
          <div className="meta">{absent.length} neprítomných / dovolenka</div>
        </div>
        <div className="stat">
          <div className="k"><Icon.hours width="15" height="15" />Odpracované hodiny</div>
          <div className="v tnum">{Math.round(hoursToday)}<small> h</small></div>
          <div className="meta">priebežne dnes</div>
        </div>
      </div>

      <div className="card">
        <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow">{fmtDateLong(TD.TODAY)}</div>
            <h2 style={{ fontSize: 19, marginTop: 2 }}>Dochádzka dnes</h2>
          </div>
          <span className="badge work"><span className="dot"></span>{working.length} v práci</span>
        </div>
        <div style={{ padding: "6px 8px 8px" }}>
          <table className="table">
            <thead><tr><th>Zamestnanec</th><th>Zmena</th><th>Príchod</th><th>Odchod</th><th>Stav</th></tr></thead>
            <tbody>{ordered.map(row)}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });