/* NFC Terminál — kiosk na pípanie príchodu / odchodu */

function Terminal({ onClose, punch }) {
  const [now, setNow] = React.useState(new Date());
  const [flash, setFlash] = React.useState(null); // {employee, type, time, late}
  const [reading, setReading] = React.useState(false);
  const timer = React.useRef(null);

  React.useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => { clearInterval(t); clearTimeout(timer.current); };
  }, []);

  function tap(emp) {
    if (reading || flash) return;
    setReading(true);
    setTimeout(() => {
      setReading(false);
      const res = punch(emp.id);
      setFlash(res);
      timer.current = setTimeout(() => setFlash(null), 3400);
    }, 850);
  }

  const hh = String(now.getHours()).padStart(2, "0");
  const mm = String(now.getMinutes()).padStart(2, "0");
  const ss = String(now.getSeconds()).padStart(2, "0");
  const dateStr = TD.DOW[(now.getDay() + 6) % 7] + " · " + now.getDate() + ". " + TD.MONTHS[now.getMonth()] + " " + now.getFullYear();

  return (
    <div className="term">
      <button className="term-exit" onClick={onClose}>
        <Icon.close width="18" height="18" /> Ukončiť terminál
      </button>

      <div className="term-head">
        <TDLogo size={66} color="#FAF8F3" />
        <div className="term-title serif">Dochádzkový terminál</div>
        <div className="term-sub">Hotel &amp; Office · Evidencia pracovného času</div>
      </div>

      <div className="term-clock tnum">{hh}:{mm}<span className="ss">:{ss}</span></div>
      <div className="term-date">{dateStr}</div>

      {/* idle prompt / reading / flash */}
      <div className={"term-reader" + (reading ? " reading" : "") + (flash ? " " + (flash.type === "in" ? "in" : "out") : "")}>
        {flash ? (
          <FlashCard flash={flash} />
        ) : (
          <React.Fragment>
            <div className="reader-ring">
              <Icon.nfc width="62" height="62" />
            </div>
            <div className="reader-txt">
              {reading ? "Načítavam kartu…" : "Priložte zamestnaneckú kartu k čítačke"}
            </div>
            <div className="reader-hint">alebo zvoľte kartu nižšie ↓</div>
          </React.Fragment>
        )}
      </div>

      {/* simulované NFC karty */}
      <div className="term-cards-wrap">
        <div className="term-cards-label">Simulácia kariet — klepnite pre priloženie</div>
        <div className="term-cards">
          {TD.EMPLOYEES.map(e => {
            const rec = TD.records[e.id + "|" + TD.fmt(TD.TODAY)];
            const isIn = rec && (rec.status === "working" || rec.status === "working_late");
            return (
              <button key={e.id} className={"nfc-card" + (isIn ? " active" : "")} onClick={() => tap(e)} disabled={reading || flash}>
                <Icon.card className="nfc-chip" width="22" height="22" />
                <span className="nfc-name">{e.first} {e.last[0]}.</span>
                <span className="nfc-id tnum">{e.nfc}</span>
                {isIn && <span className="nfc-status">v práci</span>}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function FlashCard({ flash }) {
  const e = flash.employee;
  const isIn = flash.type === "in";
  return (
    <div className="flash">
      <div className="avatar flash-av" style={{ background: e.av }}>{e.initials}</div>
      <div className="flash-icon">
        {isIn ? <Icon.in width="26" height="26" /> : <Icon.out width="26" height="26" />}
      </div>
      <div className="flash-main">
        <div className="flash-hi">{isIn ? "Dobrý deň" : "Dovidenia"}, {e.first}!</div>
        <div className="flash-line">
          {isIn ? "Príchod zaznamenaný" : "Odchod zaznamenaný"} o <b className="tnum">{flash.time}</b>
          {flash.late && isIn && <span className="flash-late">meškanie</span>}
          {!isIn && flash.hours != null && <span className="flash-h">{flash.hours.toFixed(2).replace(".", ",")} h</span>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Terminal });