/* home.jsx — domovská obrazovka podľa rozloženia "B · Dlaždice + widgety" (artboardy Main, Employee, Mobile).
   Zatiaľ bez živých čísel z aplikácií a bez upozornení (PLAN.md, milníky 4 a 5).
   Na mobile sa tie isté dlaždice ukážu ako mriežka ikon a dole je navigačná lišta.
   Vystavuje window.HomeScreen.

   props:
     pouzivatel — { meno, krstne, email, firma, oddelenie, fotka, rola: "superadmin" | "admin" | "zamestnanec" }
     apps       — zoznam z HUB_CONFIG.APPS
     onLogout   — odhlásenie
*/
(function () {
  "use strict";

  const { useState, useEffect, useRef, useCallback, useMemo } = React;

  const NAZOV_ROLY = { superadmin: "Super admin", admin: "Admin" };

  function pozdrav(datum) {
    const h = datum.getHours();
    if (h < 10) return "Dobré ráno";
    if (h >= 18) return "Dobrý večer";
    return "Dobrý deň";
  }

  function dnesnyDatum(datum) {
    // "pondelok 5. októbra 2026" → s veľkým začiatočným písmenom, ako v dizajne
    const s = datum.toLocaleDateString("sk-SK", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
    return s.charAt(0).toUpperCase() + s.slice(1);
  }

  // Menu profilu. Otvára ho tlačidlo v hlavičke aj "Profil" v spodnej lište na mobile, preto je
  // stav otvorenia u rodiča. Na mobile sa menu ukáže ako panel zospodu (CSS).
  function ProfilMenu({ pouzivatel, otvorene, setOtvorene, onLogout }) {
    const obal = useRef(null);

    useEffect(() => {
      if (!otvorene) return;
      function klik(e) {
        if (obal.current && obal.current.contains(e.target)) return;
        if (e.target.closest && e.target.closest("[data-profil-prepinac]")) return; // prepína sám
        setOtvorene(false);
      }
      function klaves(e) { if (e.key === "Escape") setOtvorene(false); }
      document.addEventListener("mousedown", klik);
      document.addEventListener("keydown", klaves);
      return () => {
        document.removeEventListener("mousedown", klik);
        document.removeEventListener("keydown", klaves);
      };
    }, [otvorene, setOtvorene]);

    const podtitul = [pouzivatel.firma, pouzivatel.oddelenie].filter(Boolean).join(" · ");

    return (
      <div className="profil" ref={obal}>
        <button type="button" className="profil__btn" aria-haspopup="true" aria-expanded={otvorene}
          aria-label={"Profil a odhlásenie – " + pouzivatel.meno} onClick={() => setOtvorene((o) => !o)}>
          <Avatar meno={pouzivatel.meno} fotka={pouzivatel.fotka} />
          <span className="profil__text">
            <span className="profil__meno">{pouzivatel.meno}</span>
            {podtitul && <span className="profil__pod">{podtitul}</span>}
          </span>
        </button>
        {otvorene && (
          <>
            {/* Len na mobile (CSS): klik vedľa panelu ho zavrie; zavrieť sa dá aj Esc a prepínačom. */}
            <div className="profil__zaclona" aria-hidden="true" onClick={() => setOtvorene(false)} />
            <div className="profil__menu">
              <div className="profil__hlavicka">
                <Avatar meno={pouzivatel.meno} fotka={pouzivatel.fotka} size={44} />
                <div>
                  <div className="profil__meno">{pouzivatel.meno}</div>
                  <div className="profil__pod">{pouzivatel.email}</div>
                  {podtitul && <div className="profil__pod">{podtitul}</div>}
                  {NAZOV_ROLY[pouzivatel.rola] && <span className="stitok profil__rola">{NAZOV_ROLY[pouzivatel.rola]}</span>}
                </div>
              </div>
              <button type="button" className="profil__polozka" onClick={onLogout}>
                <Icon name="odhlasit" size={20} />
                Odhlásiť sa
              </button>
            </div>
          </>
        )}
      </div>
    );
  }

  function AppIkona({ app, size = 56 }) {
    return (
      <span className="app-ikona" style={{ width: size, height: size, background: app.farba, color: app.farbaIkony }}>
        <Icon name={app.ikona} size={Math.round(size / 2)} />
      </span>
    );
  }

  // Karta na desktope/tablete.
  function AppKarta({ app }) {
    const pripravujeme = app.stav === "pripravujeme";
    return (
      <article className={"app-karta" + (pripravujeme ? " app-karta--neaktivna" : "")}>
        <div className="app-karta__hlava">
          <AppIkona app={app} />
          <div className="app-karta__text">
            {pripravujeme && <span className="stitok app-karta__stitok">Pripravujeme</span>}
            <h3>{app.nazov}</h3>
            <p>{app.popis}</p>
          </div>
        </div>
        <div className="app-karta__akcie">
          {app.url && !pripravujeme ? (
            <a className="btn btn--primarne" href={app.url}>
              Otvoriť <Icon name="sipka" size={18} strokeWidth={2.2} />
            </a>
          ) : !pripravujeme ? (
            <span className="app-karta__info">Adresa aplikácie zatiaľ nie je nastavená</span>
          ) : (
            <span className="app-karta__info">Aplikácia je vo vývoji</span>
          )}
        </div>
      </article>
    );
  }

  // Ikona na mobile — ako aplikácia na ploche telefónu.
  function AppDlazdica({ app }) {
    const aktivna = app.url && app.stav !== "pripravujeme";
    const obsah = (
      <>
        <AppIkona app={app} size={64} />
        <span className="dlazdica__nazov">{app.kratky || app.nazov}</span>
        {!aktivna && <span className="dlazdica__info">{app.stav === "pripravujeme" ? "čoskoro" : "bez adresy"}</span>}
      </>
    );
    return aktivna
      ? <a className="dlazdica" href={app.url}>{obsah}</a>
      : <span className="dlazdica dlazdica--neaktivna" aria-disabled="true">{obsah}</span>;
  }

  function HladatPole({ onClick, className }) {
    return (
      <button type="button" className={"hladat-pole " + (className || "")} onClick={onClick}>
        <Icon name="hladat" size={20} />
        <span className="hladat-pole__text">Hľadať aplikácie a akcie…</span>
        <span className="kbd hladat-pole__kbd">Ctrl K</span>
      </button>
    );
  }

  function SpodnaLista({ onHladat, onProfil, profilOtvoreny }) {
    return (
      <nav className="lista" aria-label="Hlavná navigácia">
        <a href="./" className="lista__polozka je-aktualna" aria-current="page">
          <Icon name="domov" size={22} strokeWidth={2.2} />Domov
        </a>
        <button type="button" className="lista__polozka" onClick={onHladat}>
          <Icon name="hladat" size={22} />Hľadať
        </button>
        <button type="button" className="lista__polozka" onClick={onProfil} aria-expanded={profilOtvoreny} data-profil-prepinac="">
          <Icon name="osoba" size={22} />Profil
        </button>
      </nav>
    );
  }

  // Ktoré aplikácie človek vôbec vidí (PLAN.md 2.1): super admin a admin všetky, ostatní len tie
  // s preVsetkych. Platí pre dlaždice, úpravu rozloženia aj vyhľadávanie.
  function dostupneAplikacie(apps, rola) {
    if (rola === "superadmin" || rola === "admin") return apps;
    return apps.filter((a) => a.preVsetkych === true);
  }

  function HomeScreen({ pouzivatel, apps, onLogout }) {
    const teraz = new Date();
    const cfg = window.HUB_CONFIG;
    const dostupne = useMemo(() => dostupneAplikacie(apps, pouzivatel.rola), [apps, pouzivatel.rola]);
    const rozlozenie = useRozlozenie(dostupne, pouzivatel.email);
    const [upravujem, setUpravujem] = useState(false);
    const [hladam, setHladam] = useState(false);
    const [profilOtvoreny, setProfilOtvoreny] = useState(false);

    const otvorHladanie = useCallback(() => { setProfilOtvoreny(false); setHladam(true); }, []);
    useSkratkaHladania(otvorHladanie);

    return (
      <div className="home">
        <header className="topbar">
          <div className="topbar__in">
            <a className="znacka" href="./" aria-label="PLUS Hub – domov">
              <PlusMark size={28} />
              <span>PLUS Hub</span>
            </a>
            <HladatPole onClick={otvorHladanie} className="hladat-pole--hlavicka" />
            <ProfilMenu pouzivatel={pouzivatel} otvorene={profilOtvoreny} setOtvorene={setProfilOtvoreny} onLogout={onLogout} />
          </div>
        </header>

        <main className="home__main">
          <div className="uvod">
            <div>
              <p className="uvod__datum">{dnesnyDatum(teraz)}</p>
              <h1>{pozdrav(teraz)}, {pouzivatel.krstne}</h1>
            </div>
            {cfg.NAHLASIT_PROBLEM_URL && (
              <a className="btn btn--primarne btn--tien uvod__akcia" href={cfg.NAHLASIT_PROBLEM_URL}>
                <Icon name="plus" size={18} strokeWidth={2.4} />
                Nahlásiť IT problém
              </a>
            )}
          </div>
          <HladatPole onClick={otvorHladanie} className="hladat-pole--mobil" />

          <div className="home__mriezka">
            <section className="home__apps" aria-labelledby="apps-h">
              <div className="home__apps-hlava">
                <h2 id="apps-h">{upravujem ? "Upraviť rozloženie" : "Moje aplikácie"}</h2>
                {!upravujem && (
                  <button type="button" className="odkaz-btn" onClick={() => setUpravujem(true)}>
                    <Icon name="upravit" size={16} />
                    Upraviť rozloženie
                  </button>
                )}
              </div>

              {upravujem ? (
                <RozlozenieEditor
                  polozky={rozlozenie.vsetky}
                  upravene={rozlozenie.upravene}
                  onPosun={rozlozenie.posun}
                  onPrepni={rozlozenie.prepniSkrytie}
                  onObnov={rozlozenie.obnov}
                  onHotovo={() => setUpravujem(false)}
                />
              ) : rozlozenie.viditelne.length === 0 ? (
                <div className="home__prazdne">
                  <p>Všetky aplikácie máte skryté.</p>
                  <button type="button" className="btn btn--sekundarne" onClick={() => setUpravujem(true)}>Upraviť rozloženie</button>
                </div>
              ) : (
                <>
                  <div className="karty">
                    {rozlozenie.viditelne.map((app) => <AppKarta key={app.id} app={app} />)}
                  </div>
                  <div className="dlazdice">
                    {rozlozenie.viditelne.map((app) => <AppDlazdica key={app.id} app={app} />)}
                  </div>
                </>
              )}
            </section>

            <aside className="home__bok">
              <section className="pomoc" aria-labelledby="pomoc-h">
                <PlusMark className="pomoc__plus" size={72} color="#17ace6" />
                <h2 id="pomoc-h">Potrebujete pomoc?</h2>
                <p>Nefunguje vám niečo v počítači, telefóne alebo v niektorej aplikácii? Nahláste to IT cez Helpdesk.</p>
                {cfg.NAHLASIT_PROBLEM_URL && <a href={cfg.NAHLASIT_PROBLEM_URL}>Otvoriť Helpdesk</a>}
              </section>
            </aside>
          </div>

          <footer className="home__pata">
            <span>Prístup len pre zamestnancov PROPLUSCO a PLUSIM · prihlásenie cez Microsoft 365</span>
          </footer>
        </main>

        <SpodnaLista
          onHladat={otvorHladanie}
          onProfil={() => setProfilOtvoreny((o) => !o)}
          profilOtvoreny={profilOtvoreny}
        />

        {hladam && (
          <SearchDialog
            apps={rozlozenie.vsetky}
            akcie={cfg.AKCIE || []}
            onZavriet={() => setHladam(false)}
            onOdhlasit={onLogout}
          />
        )}
      </div>
    );
  }

  window.HomeScreen = HomeScreen;
})();