/* rozlozenie.jsx — "Upraviť rozloženie" (PLAN.md 1.4): poradie a skrytie dlaždíc.
   Uloženie v localStorage, zvlášť pre každého používateľa (kľúč podľa e-mailu), takže na
   zdieľanom počítači si dvaja ľudia rozloženie neprepíšu. Platí len pre jedno zariadenie/prehliadač.
   Vystavuje window.useRozlozenie, window.RozlozenieEditor.
*/
(function () {
  "use strict";

  const { useState, useMemo, useCallback } = React;

  const PREDPONA = "plushub.rozlozenie.v1:";

  // localStorage môže byť nedostupný (súkromné okno, blokované úložisko) — vtedy rozloženie
  // jednoducho neprežije obnovenie stránky, nič iné sa nepokazí.
  function nacitaj(kluc) {
    try {
      const raw = window.localStorage.getItem(kluc);
      const d = raw ? JSON.parse(raw) : null;
      if (d && Array.isArray(d.poradie) && Array.isArray(d.skryte)) return d;
    } catch (_) { /* ignorovať */ }
    return null;
  }
  function uloz(kluc, d) {
    try {
      if (d) window.localStorage.setItem(kluc, JSON.stringify(d));
      else window.localStorage.removeItem(kluc);
    } catch (_) { /* ignorovať */ }
  }

  // Spojí uložené poradie s aktuálnym config.jsx: aplikácie, ktoré medzičasom pribudli, idú
  // na koniec (viditeľné); tie, čo z configu zmizli, sa ticho vynechajú.
  function zostav(apps, ulozene) {
    const podlaId = new Map(apps.map((a) => [a.id, a]));
    const poradie = ulozene ? ulozene.poradie.filter((id) => podlaId.has(id)) : [];
    for (const a of apps) if (!poradie.includes(a.id)) poradie.push(a.id);
    const skryte = new Set(ulozene ? ulozene.skryte : []);
    return poradie.map((id) => ({ ...podlaId.get(id), skryta: skryte.has(id) }));
  }

  function useRozlozenie(apps, email) {
    const kluc = PREDPONA + String(email || "anonym").toLowerCase();
    const [ulozene, setUlozene] = useState(() => nacitaj(kluc));

    const vsetky = useMemo(() => zostav(apps, ulozene), [apps, ulozene]);
    const viditelne = useMemo(() => vsetky.filter((a) => !a.skryta), [vsetky]);

    const zapis = useCallback((nove) => {
      setUlozene(nove);
      uloz(kluc, nove);
    }, [kluc]);

    const posun = useCallback((id, smer) => {
      const poradie = vsetky.map((a) => a.id);
      const i = poradie.indexOf(id);
      const j = i + smer;
      if (i === -1 || j < 0 || j >= poradie.length) return;
      [poradie[i], poradie[j]] = [poradie[j], poradie[i]];
      zapis({ poradie, skryte: vsetky.filter((a) => a.skryta).map((a) => a.id) });
    }, [vsetky, zapis]);

    const prepniSkrytie = useCallback((id) => {
      const skryte = new Set(vsetky.filter((a) => a.skryta).map((a) => a.id));
      if (skryte.has(id)) skryte.delete(id); else skryte.add(id);
      zapis({ poradie: vsetky.map((a) => a.id), skryte: [...skryte] });
    }, [vsetky, zapis]);

    const obnov = useCallback(() => zapis(null), [zapis]);

    return { vsetky, viditelne, posun, prepniSkrytie, obnov, upravene: ulozene !== null };
  }

  function RozlozenieEditor({ polozky, upravene, onPosun, onPrepni, onObnov, onHotovo }) {
    return (
      <div className="editor">
        <p className="editor__info">Zmeňte poradie šípkami a skryte aplikácie, ktoré nepoužívate. Skryté aplikácie nájdete aj naďalej cez vyhľadávanie. Rozloženie sa uloží v tomto prehliadači.</p>
        <ul className="editor__zoznam">
          {polozky.map((a, i) => (
            <li key={a.id} className={"editor__riadok" + (a.skryta ? " je-skryta" : "")}>
              <span className="app-ikona editor__ikona" style={{ background: a.farba, color: a.farbaIkony }}>
                <Icon name={a.ikona} size={20} />
              </span>
              <span className="editor__nazov">
                {a.nazov}
                {a.skryta && <span className="editor__skryta">Skrytá</span>}
              </span>
              <span className="editor__akcie">
                <button type="button" className="ikona-btn" onClick={() => onPosun(a.id, -1)} disabled={i === 0}
                  aria-label={"Posunúť " + a.nazov + " vyššie"}>
                  <Icon name="hore" size={20} />
                </button>
                <button type="button" className="ikona-btn" onClick={() => onPosun(a.id, 1)} disabled={i === polozky.length - 1}
                  aria-label={"Posunúť " + a.nazov + " nižšie"}>
                  <Icon name="dole" size={20} />
                </button>
                <button type="button" className="ikona-btn" onClick={() => onPrepni(a.id)} aria-pressed={a.skryta}
                  aria-label={(a.skryta ? "Zobraziť " : "Skryť ") + a.nazov}>
                  <Icon name={a.skryta ? "okoSkryte" : "oko"} size={20} />
                </button>
              </span>
            </li>
          ))}
        </ul>
        <div className="editor__pata">
          <button type="button" className="btn btn--primarne" onClick={onHotovo}>Hotovo</button>
          {upravene && <button type="button" className="btn btn--sekundarne" onClick={onObnov}>Obnoviť predvolené</button>}
        </div>
      </div>
    );
  }

  Object.assign(window, { useRozlozenie, RozlozenieEditor });
})();