/* upozornenia.jsx — zvonček s upozorneniami v hlavičke (PLAN.md 5.2, artboard „6 · Panel upozornení“).
   Udalosti počíta backend (/api/suhrn → udalosti) z tých istých dát ako panel „Vyžaduje pozornosť“:
   len tikety daného človeka, za posledných 7 dní, bez textu správ. „Prečítané“ si pamätá prehliadač
   (localStorage pre účet) — na inom zariadení budú upozornenia znova neprečítané (v1, vedome).
   Vystavuje window.Zvoncek.
*/
(function () {
  "use strict";

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

  const FILTRE = [{ id: "vsetko", nazov: "Všetko" }, { id: "helpdesk", nazov: "Helpdesk" }, { id: "system", nazov: "Systém" }];
  const DEN = 24 * 3600 * 1000;

  // Prečítané: { do: ISO — všetko staršie je prečítané (Označiť ako prečítané), ids: [prečítané po jednom] }.
  function usePrecitane(email) {
    const kluc = "hub_upozornenia:" + String(email || "").toLowerCase();
    const [stav, setStav] = useState(() => {
      try { const s = JSON.parse(localStorage.getItem(kluc) || "null"); if (s && Array.isArray(s.ids)) return s; } catch (e) { /* nič */ }
      return { do: null, ids: [] };
    });
    const uloz = useCallback((novy) => {
      setStav(novy);
      try { localStorage.setItem(kluc, JSON.stringify(novy)); } catch (e) { /* len na túto reláciu */ }
    }, [kluc]);
    const jeNeprecitane = useCallback((u) => !stav.ids.includes(u.id) && (!stav.do || String(u.cas || "") > stav.do), [stav]);
    const precitaj = useCallback((id) => { if (!stav.ids.includes(id)) uloz({ ...stav, ids: [id, ...stav.ids].slice(0, 300) }); }, [stav, uloz]);
    const vsetkoPrecitane = useCallback(() => uloz({ do: new Date().toISOString(), ids: [] }), [uloz]);
    return { jeNeprecitane, precitaj, vsetkoPrecitane };
  }

  // Text a vzhľad položky podľa druhu udalosti.
  function popis(u) {
    const t = u.cislo ? " " + u.cislo : "";
    switch (u.druh) {
      case "sprava":
        return u.od === "ziadatel"
          ? { nadpis: "Nová odpoveď v tikete" + t, pod: "Žiadateľ odpísal" + (u.predmet ? " · " + u.predmet : ""), ikona: "sprava" }
          : { nadpis: (u.interna ? "Interná poznámka v tikete" : "Nová správa v tikete") + t,
              pod: (u.meno || "Kolega") + (u.predmet ? " · " + u.predmet : ""), ikona: "sprava" };
      case "novy_tiket": return { nadpis: "Nový tiket" + t, pod: u.predmet, ikona: "tiket" };
      case "termin": return { nadpis: "Blíži sa termín tiketu" + t, pod: "Termín " + casText(u.termin, true) + (u.predmet ? " · " + u.predmet : ""), ikona: "hodiny" };
      case "po_termine": return { nadpis: "Tiket" + t + " je po termíne", pod: u.predmet, ikona: "pozor", vyrazne: true };
      case "odpoved_it": return { nadpis: "IT vám odpovedalo v" + t, pod: u.predmet, ikona: "sprava" };
      case "vypadok": return { nadpis: "Výpadok: " + u.predmet, pod: "Oznam IT", ikona: "pozor", vyrazne: true, system: true };
      case "oznam": return { nadpis: u.predmet, pod: "Oznam IT", ikona: "stit", system: true };
      default: return { nadpis: u.predmet || "Upozornenie", pod: "", ikona: "zvoncek" };
    }
  }

  // Dnes „15:12“, tento týždeň „Pi“, staršie „1. 10.“; s dátumom aj čas (termín).
  function casText(iso, sDatumom) {
    if (!iso) return "";
    const d = new Date(iso);
    const cas = d.toLocaleTimeString("sk-SK", { hour: "2-digit", minute: "2-digit" });
    if (sDatumom) return d.toLocaleDateString("sk-SK", { day: "numeric", month: "numeric" }) + " " + cas;
    const dnes = new Date(); dnes.setHours(0, 0, 0, 0);
    if (d >= dnes) return cas;
    if (d >= dnes.getTime() - 6 * DEN) { const w = d.toLocaleDateString("sk-SK", { weekday: "short" }); return w.charAt(0).toUpperCase() + w.slice(1); }
    return d.toLocaleDateString("sk-SK", { day: "numeric", month: "numeric" });
  }

  function skupina(iso) {
    const dnes = new Date(); dnes.setHours(0, 0, 0, 0);
    const t = Date.parse(iso || "");
    if (Number.isFinite(t) && t >= dnes.getTime()) return "Dnes";
    if (Number.isFinite(t) && t >= dnes.getTime() - 6 * DEN) return "Tento týždeň";
    return "Staršie";
  }

  function Zvoncek({ suhrn, email, helpdeskUrl }) {
    const [otvorene, setOtvorene] = useState(false);
    const [filter, setFilter] = useState("vsetko");
    const obal = useRef(null);
    const tlacidlo = useRef(null);
    const precitane = usePrecitane(email);

    const nacitane = suhrn.stav === "ok" && suhrn.data;
    const udalosti = nacitane && Array.isArray(suhrn.data.udalosti) ? suhrn.data.udalosti : null;
    const neprecitanych = udalosti ? udalosti.filter(precitane.jeNeprecitane).length : 0;

    const zavriet = useCallback((vratitFokus) => {
      setOtvorene(false);
      if (vratitFokus && tlacidlo.current) tlacidlo.current.focus();
    }, []);
    useEffect(() => {
      if (!otvorene) return;
      function klik(e) { if (obal.current && !obal.current.contains(e.target)) zavriet(false); }
      function klaves(e) { if (e.key === "Escape") zavriet(true); }
      document.addEventListener("mousedown", klik);
      document.addEventListener("keydown", klaves);
      return () => { document.removeEventListener("mousedown", klik); document.removeEventListener("keydown", klaves); };
    }, [otvorene, zavriet]);

    const zobrazene = useMemo(() => (udalosti || []).filter((u) => filter === "vsetko" || u.app === filter), [udalosti, filter]);
    const skupiny = useMemo(() => {
      const s = [];
      for (const u of zobrazene) {
        const n = skupina(u.cas);
        if (!s.length || s[s.length - 1].nazov !== n) s.push({ nazov: n, polozky: [] });
        s[s.length - 1].polozky.push(u);
      }
      return s;
    }, [zobrazene]);

    // API vypnuté alebo ešte nič neprišlo — zvonček by nemal čo ukázať.
    if (suhrn.stav === "vypnute") return null;

    return (
      <div className="zvoncek" ref={obal}>
        <button type="button" ref={tlacidlo} className="zvoncek__btn" aria-haspopup="dialog" aria-expanded={otvorene}
          aria-label={"Upozornenia" + (neprecitanych ? " (" + neprecitanych + " neprečítaných)" : "")}
          onClick={() => setOtvorene((o) => !o)}>
          <Icon name="zvoncek" size={22} />
          {neprecitanych > 0 && <span className="zvoncek__pocet" aria-hidden="true">{neprecitanych > 9 ? "9+" : neprecitanych}</span>}
        </button>
        {otvorene && (
          <>
            <div className="zvoncek__zaclona" aria-hidden="true" onClick={() => zavriet(true)} />
            <div className="zvoncek__panel" role="dialog" aria-label="Upozornenia">
              <div className="zvoncek__hlava">
                <h2>Upozornenia</h2>
                <div className="zvoncek__hlava-akcie">
                  {neprecitanych > 0 && (
                    <button type="button" className="odkaz-btn zvoncek__precitane" onClick={precitane.vsetkoPrecitane}>Označiť ako prečítané</button>
                  )}
                  <button type="button" className="ikona-btn zvoncek__x" onClick={() => zavriet(true)} aria-label="Zavrieť upozornenia"><Icon name="zavriet" size={20} /></button>
                </div>
              </div>
              <div className="zvoncek__filtre" role="group" aria-label="Filter podľa aplikácie">
                {FILTRE.map((f) => (
                  <button key={f.id} type="button" className="zvoncek__filter" aria-pressed={filter === f.id} onClick={() => setFilter(f.id)}>{f.nazov}</button>
                ))}
              </div>
              <div className="zvoncek__telo">
                {!nacitane ? <p className="zvoncek__info">Načítavam…</p>
                  : udalosti === null ? <p className="zvoncek__info">Upozornenia z Helpdesku sa teraz nepodarilo načítať. Skúste obnoviť stránku.</p>
                  : zobrazene.length === 0 ? <p className="zvoncek__info">Za posledných 7 dní tu nič nie je.</p>
                  : skupiny.map((sk) => (
                    <div key={sk.nazov}>
                      <p className="zvoncek__skupina">{sk.nazov}</p>
                      <ul className="zvoncek__zoznam">
                        {sk.polozky.map((u) => {
                          const p = popis(u);
                          const nove = precitane.jeNeprecitane(u);
                          const href = u.cislo && helpdeskUrl ? helpdeskUrl + "/?tiket=" + encodeURIComponent(u.cislo) : null;
                          const obsah = (
                            <>
                              <span className={"zvoncek__ikona" + (p.vyrazne ? " zvoncek__ikona--vyrazne" : p.system ? " zvoncek__ikona--system" : "")}>
                                <Icon name={p.ikona} size={18} />
                              </span>
                              <span className="zvoncek__text">
                                <span className={"zvoncek__nadpis" + (nove ? " je-nove" : "")}>{p.nadpis}</span>
                                {p.pod && <span className="zvoncek__pod">{p.pod}</span>}
                              </span>
                              <span className="zvoncek__meta">
                                <span>{casText(u.cas)}</span>
                                {nove && <span className="zvoncek__bodka"><span className="sr-only">neprečítané</span></span>}
                              </span>
                            </>
                          );
                          const trieda = "zvoncek__polozka" + (p.vyrazne ? " zvoncek__polozka--vyrazne" : "");
                          return (
                            <li key={u.id}>
                              {href
                                ? <a className={trieda} href={href} onClick={() => precitane.precitaj(u.id)}>{obsah}</a>
                                : <button type="button" className={trieda} onClick={() => precitane.precitaj(u.id)}>{obsah}</button>}
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                  ))}
              </div>
              <p className="zvoncek__pata">Zobrazujú sa len upozornenia z aplikácií, ku ktorým máte prístup.</p>
            </div>
          </>
        )}
      </div>
    );
  }

  window.Zvoncek = Zvoncek;
})();