/* MeView — pohľad zamestnanca na seba (pípanie + vlastná dochádzka) */

function MeView({ meId, punch, version, screen }) {
  const e = TD.empById(meId);
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => { const t = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(t); }, []);

  const today = TD.fmt(TD.TODAY);
  const rec = TD.records[meId + "|" + today];
  const isIn = rec && (rec.status === "working" || rec.status === "working_late");
  const tstr = String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");
  const [view, setView] = React.useState("cal");

  if (screen === "rozvrh") return <MySchedule meId={meId} />;

  const recs = TD.recordsForEmployee(meId).slice().reverse().filter(r => !TD.isFuture(r.date));
  const mh = TD.monthHours(meId);
  const s = TD.monthSummary(meId);

  return (
    <div>
      <div className="card me-hero">
        <Avatar emp={e} size={70} />
        <div>
          <h2 style={{ fontSize: 24 }}>Dobrý deň, {e.first}!</h2>
          <div style={{ marginTop: 6 }}><PositionPill pos={e.pos} /></div>
        </div>
        <div className="now">
          <div className="t tnum">{tstr}</div>
          <div className="d">{fmtDateLong(TD.TODAY)}</div>
        </div>
      </div>

      <div className="me-grid">
        <div className="card" style={{ padding: 26 }}>
          <div className="eyebrow">Moja zmena dnes</div>
          {rec && TD.SHIFTS[rec.shift] ? (
            <div style={{ margin: "10px 0 18px" }}><ShiftTag shift={rec.shift} /></div>
          ) : <p className="muted" style={{ margin: "8px 0 18px" }}>Na dnes nemáte naplánovanú zmenu.</p>}

          <div className={"me-status " + (isIn ? "in" : "out")} style={{ width: "100%", justifyContent: "center", marginBottom: 16 }}>
            {isIn ? <React.Fragment><Icon.clock width="19" height="19" /> V práci od <b className="tnum">{rec.in}</b>{rec.status === "working_late" && <span className="badge late" style={{ marginLeft: 4 }}>meškanie</span>}</React.Fragment>
              : rec && rec.out ? <React.Fragment><Icon.check width="19" height="19" /> Zmena ukončená · {fmtH(rec.hours)}</React.Fragment>
                : <React.Fragment><Icon.clock width="19" height="19" /> Zatiaľ ste sa nepípli</React.Fragment>}
          </div>

          <button className={"btn " + (isIn ? "orange" : "sage")} style={{ width: "100%", padding: "16px", fontSize: 16, borderRadius: 13 }}
            onClick={() => punch(meId)}>
            {isIn ? <React.Fragment><Icon.out width="20" height="20" /> Pípnuť odchod</React.Fragment> : <React.Fragment><Icon.in width="20" height="20" /> Pípnuť príchod</React.Fragment>}
          </button>
          <p className="faint" style={{ fontSize: 12, textAlign: "center", marginTop: 10, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
            <Icon.card width="13" height="13" /> Karta NFC {e.nfc}
          </p>
        </div>

        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Tento mesiac</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}><span className="muted">Odpracované hodiny</span><b className="serif tnum" style={{ fontSize: 22 }}>{fmtH(mh)}</b></div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}><span className="muted">Odpracované dni</span><b className="serif tnum" style={{ fontSize: 22 }}>{recs.filter(r => r.hours > 0).length}</b></div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}><span className="muted">Hrubá mzda (odhad)</span><b className="serif tnum" style={{ fontSize: 22, color: "var(--sage-dark)" }}>{fmtEur(mh * e.rate)}</b></div>
            <div className="me-vac">
              <div><div className="me-vac-k">Zostatok dovolenky</div><div className="me-vac-sub">z {s.vac.ent} dní · čerpané {s.vac.taken}</div></div>
              <b className="serif tnum" style={{ fontSize: 26, color: "var(--gold-dark, #B07D14)" }}>{s.vac.left}<small style={{ fontSize: 13, fontWeight: 500 }}> dní</small></b>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div className="emp-cal-head">
          <h2 style={{ fontSize: 18 }}>Moja dochádzka — {TD.MONTHS[TD.MONTH]}</h2>
          <div className="seg sm">
            <button className={view === "cal" ? "on" : ""} onClick={() => setView("cal")}><Icon.calendar width="14" height="14" /> Kalendár</button>
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")}><Icon.report width="14" height="14" /> Zoznam</button>
          </div>
        </div>
        {view === "cal" ? <div style={{ padding: "8px 18px 20px" }}><MonthCalendar eid={meId} /></div> :
        <table className="table">
          <thead><tr><th>Dátum</th><th>Zmena</th><th>Príchod</th><th>Odchod</th><th style={{ textAlign: "right" }}>Hodiny</th><th>Stav</th></tr></thead>
          <tbody>
            {recs.map(r => { const d = new Date(r.date); return (
              <tr key={r.date}>
                <td><b style={{ fontWeight: 600 }}>{TD.DOW[(d.getDay() + 6) % 7]} {d.getDate()}.{d.getMonth() + 1}.</b></td>
                <td><ShiftTag shift={r.shift} /></td>
                <td className="tnum">{r.in || <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 className="tnum" style={{ textAlign: "right" }}>{r.hours ? <b>{fmtH(r.hours)}</b> : <span className="faint">—</span>}</td>
                <td><StatusBadge status={r.status} /></td>
              </tr>
            ); })}
          </tbody>
        </table>}
      </div>
    </div>
  );
}

function MySchedule({ meId }) {
  const e = TD.empById(meId);
  const recs = TD.recordsForEmployee(meId).filter(r => r.date >= TD.todayStr).slice(0, 14);
  return (
    <div>
      <div className="section-head"><h2 style={{ fontSize: 20 }}>Nadchádzajúce zmeny</h2></div>
      <div className="card" style={{ padding: 8 }}>
        {recs.length === 0 && <p className="muted" style={{ padding: 20 }}>Žiadne naplánované zmeny.</p>}
        {recs.map(r => {
          const d = new Date(r.date); const isToday = r.date === TD.fmt(TD.TODAY);
          const ab = TD.isAbsence(r.status) ? TD.ABSENCE[r.status] : null;
          const sh = ab ? null : TD.SHIFTS[r.shift];
          if (!ab && !sh) return null;
          return (
          <div key={r.date} className="sched-row" style={isToday ? { background: "var(--orange-tint)" } : null}>
            <div className="sched-date">
              <div className="sched-dow">{TD.DOW[TD.dowOf(r.date)]}</div>
              <div className="sched-num serif">{d.getDate()}.</div>
              <div className="sched-mon">{TD.MONTHS[d.getMonth()].slice(0, 3)}</div>
            </div>
            <span className="slot-bar2" style={{ background: ab ? ab.color : sh.color }}></span>
            <div style={{ flex: 1 }}>
              {ab ? <React.Fragment><b style={{ fontSize: 15 }}>{ab.label.split(" — ")[0]}</b><div className="muted" style={{ fontSize: 13 }}>neprítomnosť ({ab.code})</div></React.Fragment>
                : <React.Fragment><b style={{ fontSize: 15 }}>{sh.label} zmena</b><div className="muted tnum" style={{ fontSize: 13 }}>{sh.start} – {sh.end}</div></React.Fragment>}
            </div>
            {isToday && <span className="badge gold"><span className="dot"></span>Dnes</span>}
          </div>
        ); })}
      </div>
    </div>
  );
}

Object.assign(window, { MeView, MySchedule });