/* app.jsx — Root: prihlásenie, overenie u backendu, potom domov alebo sprievodca hlásením.

   Stavy: "nacitavam" → "login" | "ready" | "host" (backend vrátil 403) | "chyba"
   O prístupe rozhoduje VŽDY backend (functions/api, jwt.js). Klient len zobrazí, čo backend povie.

   Lokálny náhľad bez prihlásenia: na localhost s ?nahlad=1 sa appka vyrenderuje s vymysleným
   používateľom a autami (vzor PLUS Hubu), aby sa dalo ladiť UI bez Entra a bez backendu.
   Na produkčnej adrese sa parameter ignoruje. Ďalšie: &rola=spravca|veduci|it, &auta=0 (prázdny
   zoznam), &auta=chyba (chyba načítania), ?nahlad=host (obrazovka bez prístupu).
*/
(function () {
  "use strict";

  const { useState, useEffect } = React;
  const auth = window.AUTA_AUTH;

  const LOKALNE = ["localhost", "127.0.0.1", "[::1]"].includes(window.location.hostname);
  const PARAMS = new URLSearchParams(window.location.search);
  const NAHLAD = LOKALNE ? PARAMS.get("nahlad") : null;

  if (NAHLAD === "1") {
    const auta = PARAMS.get("auta");
    const vymyslene = [
      { id: "3", spz: "BT123AB", firma: "PPS", znacka: "Škoda", model: "Octavia Combi", farba: "Sivá", asistencia: { cislo: "+421 2 0000 0000", poistovna: "Poisťovňa A" } },
      { id: "1", spz: "BA456CD", firma: "PP", znacka: "Škoda", model: "Superb", farba: "Čierna", asistencia: { cislo: "+421 2 0000 0000", poistovna: "Poisťovňa A" } },
      { id: "2", spz: "BL789EF", firma: "PLUSIM", znacka: "Hyundai", model: "Tucson", farba: "Biela", asistencia: null },
      { id: "5", spz: "BT321GH", firma: "PPS", znacka: "Škoda", model: "Kodiaq", farba: "Modrá", asistencia: { cislo: "+421 2 0000 0001", poistovna: "Poisťovňa B" } },
    ];
    window.AUTA_API = {
      ja: async () => ({ meno: "Ján Novák", email: "jan.novak@example.sk", rola: PARAMS.get("rola") || "zamestnanec", vidiFinancie: false }),
      vozidla: () => new Promise((ok, zle) => setTimeout(() => {
        if (auta === "chyba") { const e = new Error("Chyba servera (502)."); e.status = 502; zle(e); }
        else ok(auta === "0" ? [] : vymyslene);
      }, 400)),
    };
  }

  // Tlačidlo Späť v prehliadači nevyhodí z appky, ale vráti na domov (stav v history.state;
  // URL sa nemení, hash používa MSAL pri prihlásení — rovnaký dôvod ako v Helpdesku).
  function useObrazovka() {
    const [obrazovka, setObrazovka] = useState((history.state && history.state.fa) || "domov");
    useEffect(() => {
      if (!history.state || !history.state.fa) history.replaceState({ fa: "domov" }, "");
      const spat = (e) => setObrazovka((e.state && e.state.fa) || "domov");
      window.addEventListener("popstate", spat);
      return () => window.removeEventListener("popstate", spat);
    }, []);
    const prejdi = (kam) => {
      if (kam === obrazovka) return;
      if (kam === "domov" && history.state && history.state.fa !== "domov") { history.back(); return; }
      history.pushState({ fa: kam }, "");
      setObrazovka(kam);
    };
    return [obrazovka, prejdi];
  }

  function Prihlasenie({ onLogin, chyba }) {
    return (
      <main className="uvod">
        <div className="uvod-karta">
          <span className="logo-ikona logo-velke" aria-hidden="true"><window.Icon name="auto" size={36} /></span>
          <h1 className="nadpis">Firemné autá</h1>
          <p className="tlmene">Hlásenie škôd na firemných autách PROPLUSCO a PLUSIM.</p>
          {chyba && <div className="hlaska hlaska-chyba" role="alert"><window.Icon name="vykricnik" /><span>{chyba}</span></div>}
          <button type="button" className="btn btn-primarna btn-velka btn-plna" onClick={onLogin}>Prihlásiť sa cez Microsoft 365</button>
          <p className="male tlmene">Použite svoj pracovný účet, ten istý ako do Outlooku a Teams.</p>
        </div>
      </main>
    );
  }

  function BezPristupu({ email, onOdhlasit }) {
    return (
      <main className="uvod">
        <div className="uvod-karta">
          <span className="logo-ikona logo-velke logo-varovanie" aria-hidden="true"><window.Icon name="vykricnik" size={36} /></span>
          <h1 className="nadpis">Do aplikácie nemáte prístup</h1>
          <p className="tlmene">Aplikácia je len pre zamestnancov PROPLUSCO a PLUSIM.</p>
          {email && <p className="male">Prihlásený účet: <strong>{email}</strong></p>}
          <button type="button" className="btn btn-primarna btn-velka btn-plna" onClick={onOdhlasit}>Odhlásiť sa</button>
        </div>
      </main>
    );
  }

  function Root() {
    const [stav, setStav] = useState("nacitavam");
    const [ja, setJa] = useState(null);
    const [chyba, setChyba] = useState(null);
    const [obrazovka, prejdi] = useObrazovka();

    const overUServera = () => {
      setStav("nacitavam");
      window.AUTA_API.ja()
        .then((d) => { setJa(d); setStav("ready"); })
        .catch((e) => {
          if (e.status === 403) setStav("host");
          else { setChyba(e.message); setStav("chyba"); }
        });
    };

    useEffect(() => {
      if (NAHLAD === "1") { overUServera(); return; }
      if (NAHLAD === "host") { setStav("host"); return; }
      auth.ensureReady()
        .then(() => { if (auth.getAccount()) overUServera(); else setStav("login"); })
        .catch((e) => { setChyba("Prihlásenie zlyhalo: " + e.message); setStav("login"); });
    }, []);

    const odhlasit = () => (NAHLAD ? window.location.reload() : auth.logout());

    if (stav === "nacitavam") return <main className="uvod"><p className="tlmene" role="status">Načítavam.</p></main>;
    if (stav === "login") return <Prihlasenie onLogin={() => auth.login()} chyba={chyba} />;
    if (stav === "host") {
      const acc = NAHLAD ? { username: "host@example.com" } : auth.getAccount();
      return <BezPristupu email={acc && acc.username} onOdhlasit={odhlasit} />;
    }
    if (stav === "chyba") {
      return (
        <main className="uvod">
          <div className="uvod-karta">
            <h1 className="nadpis">Niečo sa pokazilo</h1>
            <div className="hlaska hlaska-chyba" role="alert"><window.Icon name="vykricnik" /><span>{chyba}</span></div>
            <button type="button" className="btn btn-primarna btn-velka btn-plna" onClick={overUServera}><window.Icon name="znova" />Skúsiť znova</button>
            <button type="button" className="btn btn-text btn-plna" onClick={odhlasit}>Odhlásiť sa</button>
          </div>
        </main>
      );
    }

    if (obrazovka === "nahlasenie") return <window.Nahlasenie ja={ja} onKoniec={() => prejdi("domov")} />;
    return <window.Domov ja={ja} onNahlasit={() => prejdi("nahlasenie")} onOdhlasit={odhlasit} />;
  }

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