/* App — orchestrátor: role, navigácia, punch, terminál, PDF */

const { useState, useEffect, useRef } = React;

function pad(n) { return String(n).padStart(2, "0"); }

function App() {
  const [role, setRole] = useState("manager");           // manager | employee
  const [meId] = useState("e4");                          // prihlásený zamestnanec (Lucia, čašníčka)
  const [screen, setScreen] = useState("dnes");
  const [selEmp, setSelEmp] = useState(null);
  const [terminal, setTerminal] = useState(false);
  const [print, setPrint] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [, setVersion] = useState(0);
  const bump = () => setVersion(v => v + 1);

  // pri prepnutí roly nastav úvodnú obrazovku
  useEffect(() => { setScreen(role === "manager" ? "dnes" : "moja"); setSelEmp(null); }, [role]);

  // ---- punch logika presunutá do data.js (TD.punch — 4 razítka + auto-prestávka) ----
  function punch(eid) {
    TD.applyAutoBreaks();          // najprv zaznamenaj prebiehajúce auto-prestávky
    const res = TD.punch(eid);
    bump();
    return res;
  }

  function goEmployee(id) { setSelEmp(id); setScreen("zamestnanci"); }

  // ---- nav definície ----
  const managerNav = [
    { id: "dnes", label: "Dnes", icon: Icon.today },
    { id: "kalendar", label: "Kalendár zmien", icon: Icon.calendar },
    { id: "zamestnanci", label: "Zamestnanci", icon: Icon.people },
    { id: "vykazy", label: "Výkazy a exporty", icon: Icon.report },
  ];
  const empNav = [
    { id: "moja", label: "Moja dochádzka", icon: Icon.today },
    { id: "rozvrh", label: "Môj rozvrh", icon: Icon.calendar },
  ];
  const nav = role === "manager" ? managerNav : empNav;

  const titles = {
    dnes: ["Prehľad dňa", fmtDateLong(TD.TODAY)],
    kalendar: ["Kalendár zmien", "Plánovanie rozvrhu zamestnancov"],
    zamestnanci: [selEmp ? "Detail zamestnanca" : "Zamestnanci", selEmp ? "Dochádzka a údaje" : "Tím — hotel a office"],
    vykazy: ["Výkazy a exporty", "Mesačná dochádzka a mzdové podklady"],
    moja: ["Moja dochádzka", fmtDateLong(TD.TODAY)],
    rozvrh: ["Môj rozvrh", "Naplánované zmeny"],
  };
  const [title, sub] = titles[screen] || ["", ""];
  const me = TD.empById(meId);

  return (
    <div className="app">
      {menuOpen && <div className="nav-backdrop" onClick={() => setMenuOpen(false)}></div>}
      {/* SIDEBAR */}
      <aside className={"sidebar" + (menuOpen ? " open" : "")}>
        <div className="sb-brand">
          <TDLogo size={50} />
          <div className="sb-brand-txt"><b>Dochádzka</b><span>Hotel &amp; Office</span></div>
        </div>

        <nav className="sb-nav">
          <div className="sb-section">{role === "manager" ? "Prevádzka" : "Moje"}</div>
          {nav.map(n => (
            <button key={n.id} className={"nav-item" + (screen === n.id ? " active" : "")} onClick={() => { setScreen(n.id); setSelEmp(null); setMenuOpen(false); }}>
              <n.icon /> {n.label}
            </button>
          ))}
          {role === "manager" && (
            <React.Fragment>
              <div className="sb-section">Terminál</div>
              <button className="nav-item" onClick={() => { setTerminal(true); setMenuOpen(false); }}><Icon.terminal /> Spustiť kiosk</button>
            </React.Fragment>
          )}
        </nav>

        <div className="sb-foot">
          <div className="who">
            {role === "manager"
              ? <React.Fragment><div className="avatar" style={{ background: "#1C1B19" }}>VM</div><div className="who-txt"><b>Vedúci prevádzky</b><span>Manažérske konto</span></div></React.Fragment>
              : <React.Fragment><Avatar emp={me} size={38} /><div className="who-txt"><b>{me.name}</b><span>{TD.POSITIONS[me.pos].label}</span></div></React.Fragment>}
          </div>
          <div className="role-switch">
            <button className={role === "manager" ? "on" : ""} onClick={() => setRole("manager")}><Icon.report width="15" height="15" /> Manažér</button>
            <button className={role === "employee" ? "on" : ""} onClick={() => setRole("employee")}><Icon.in width="15" height="15" /> Zamestnanec</button>
          </div>
        </div>
      </aside>

      {/* MAIN */}
      <main className="main">
        <header className="topbar">
          <button className="hamburger" onClick={() => setMenuOpen(true)} aria-label="Otvoriť menu"><Icon.menu width="22" height="22" /></button>
          <div className="topbar-title">
            <h1>{title}</h1>
            <div className="sub">{sub}</div>
          </div>
          <div className="topbar-spacer"></div>
          {role === "manager" && screen !== "vykazy" && (
            <button className="btn orange" onClick={() => setTerminal(true)}><Icon.nfc width="17" height="17" /> <span className="btn-label">Terminál</span></button>
          )}
        </header>

        <div className="content">
          {role === "manager" && screen === "dnes" && <Dashboard goEmployee={goEmployee} openTerminal={() => setTerminal(true)} version={0} />}
          {role === "manager" && screen === "kalendar" && <Calendar bump={bump} version={0} />}
          {role === "manager" && screen === "zamestnanci" && <Employees selectedId={selEmp} goEmployee={goEmployee} goList={() => setSelEmp(null)} goExport={(eid) => setPrint({ mode: "one", eid })} version={0} />}
          {role === "manager" && screen === "vykazy" && <Reports goExport={(t) => setPrint(t)} version={0} />}
          {role === "employee" && <MeView meId={meId} punch={punch} version={0} screen={screen} />}
        </div>
      </main>

      {terminal && <Terminal onClose={() => setTerminal(false)} punch={punch} />}
      {print && <PrintDoc target={print} onClose={() => setPrint(null)} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);