/* nahlasenie.jsx — sprievodca nahlásením škody (docs/PROMPT-CLAUDE-DESIGN.md 3.3, návrh M10/P02).
   Zatiaľ hotový krok 1 (výber auta). Kroky 2 až 6 pribudnú; rozpracované hlásenie sa priebežne
   ukladá v prehliadači (rozhodnutie 17), aby sa pri strate signálu nestratilo.
   Vystavuje window.Nahlasenie a window.rozpracovaneHlasenie(email).
*/
(function () {
  "use strict";

  const { useState, useEffect, useMemo } = React;
  const POCET_KROKOV = 6;
  const kluceRozpracovane = (email) => "fa_rozpracovane_" + email;
  const kluceNaposledy = (email) => "fa_naposledy_" + email;

  window.rozpracovaneHlasenie = (email) => window.bezpecneNacitaj(kluceRozpracovane(email), null);
  window.zahodRozpracovane = (email) => window.bezpecneUloz(kluceRozpracovane(email), null);

  // Farba ako krúžok vedľa textu. Text je vždy uvedený, krúžok je len pomôcka (nie jediný nositeľ informácie).
  const FARBY = [
    ["biel", "#f4f4f4"], ["cier", "#1d1d1f"], ["siv", "#8a8f94"], ["strie", "#c0c4c8"], ["modr", "#2f5ca0"],
    ["cerv", "#c0392b"], ["zelen", "#2e7d32"], ["hned", "#6d4c41"], ["bez", "#d8c8a8"], ["zlt", "#e6c229"], ["oranz", "#ef7c30"],
  ];
  function farbaHex(nazov) {
    const n = String(nazov || "").toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
    const hit = FARBY.find(([p]) => n.startsWith(p));
    return hit ? hit[1] : null;
  }

  function KartaAuta({ v, vybrane, zvyraznit, onVyber }) {
    const hex = farbaHex(v.farba);
    const nazov = [v.znacka, v.model].filter(Boolean).join(" ");
    return (
      <button type="button" className={"karta-auta" + (vybrane ? " vybrana" : "")} aria-pressed={vybrane} onClick={() => onVyber(v)}>
        <span className="stlpec rast">
          <span className="riadok">
            <window.Spz spz={v.spz} velka zvyraznit={zvyraznit} />
            {v.firma && <span className="firma">{v.firma}</span>}
          </span>
          {nazov && <span className="karta-auta-nazov">{nazov}</span>}
          {v.farba && <span className="farba">{hex && <span className="farba-bodka" style={{ background: hex }} aria-hidden="true" />}{v.farba}</span>}
        </span>
        <span className={"vyber-znacka" + (vybrane ? " zapnuta" : "")} aria-hidden="true">{vybrane && <window.Icon name="fajka" size={16} />}</span>
      </button>
    );
  }

  function Asistencia({ a }) {
    return (
      <section className="asistencia" aria-label="Asistencia poisťovne">
        <window.Icon name="stit" size={24} />
        <span className="stlpec rast">
          <span className="male">Asistencia poisťovne pre toto auto</span>
          <strong className="asistencia-cislo">{a.cislo}</strong>
          {a.poistovna && <span className="male tlmene">{a.poistovna}</span>}
        </span>
        <a className="btn btn-primarna btn-mala" href={"tel:" + a.cislo.replace(/[^\d+]/g, "")}>
          <window.Icon name="telefon" size={18} />Zavolať
        </a>
      </section>
    );
  }

  function Krok1({ ja, vozidla, chyba, onZnova, vybrane, onVyber }) {
    const [hladanie, setHladanie] = useState("");
    const naposledy = useMemo(() => window.bezpecneNacitaj(kluceNaposledy(ja.email), []), [ja.email]);
    const q = window.normalizujSpz(hladanie);
    const vysledky = useMemo(() => (q && vozidla ? vozidla.filter((v) => v.spz.includes(q)).slice(0, 20) : []), [q, vozidla]);
    const naposledyAuta = vozidla ? naposledy.map((s) => vozidla.find((v) => v.spz === s)).filter(Boolean) : [];

    return (
      <>
        <h1 className="nadpis">Ktoré auto?</h1>
        <div className="pole">
          <label htmlFor="spz">Zadajte ŠPZ</label>
          <div className="hladanie">
            <window.Icon name="hladat" size={22} />
            <input id="spz" type="search" inputMode="text" autoComplete="off" autoCapitalize="characters" spellCheck={false}
              value={hladanie} onChange={(e) => setHladanie(e.target.value)} aria-describedby="spz-napoveda" />
            {hladanie && (
              <button type="button" className="hladanie-vymazat" aria-label="Vymazať" onClick={() => setHladanie("")}>
                <window.Icon name="zavriet" />
              </button>
            )}
          </div>
          <span id="spz-napoveda" className="napoveda">Stačí časť ŠPZ. Medzery, pomlčky ani veľké písmená nevadia.</span>
        </div>

        {chyba && (
          <div className="hlaska hlaska-chyba" role="alert">
            <window.Icon name="vykricnik" />
            <span className="rast">Autá sa nepodarilo načítať. {chyba}</span>
            <button type="button" className="btn btn-obrys btn-mala" onClick={onZnova}><window.Icon name="znova" size={18} />Skúsiť znova</button>
          </div>
        )}
        {!chyba && !vozidla && <p className="tlmene" role="status">Načítavam autá.</p>}
        {vozidla && vozidla.length === 0 && (
          <div className="hlaska"><window.Icon name="info" /><span>V zozname zatiaľ nie sú žiadne autá. Kontaktujte správcu vozového parku.</span></div>
        )}

        {naposledyAuta.length > 0 && !q && (
          <div className="stlpec medzera-s">
            <span className="nadpis-sekcie">Naposledy vybrané</span>
            <div className="cipy">
              {naposledyAuta.map((v) => (
                <button key={v.id} type="button" className={"cip" + (vybrane && vybrane.id === v.id ? " vybrany" : "")} onClick={() => onVyber(v)}>{v.spz}</button>
              ))}
            </div>
          </div>
        )}

        {q && vozidla && (
          <div className="stlpec medzera-s">
            <span className="nadpis-sekcie" role="status">Výsledky ({vysledky.length})</span>
            {vysledky.length === 0 && (
              <p className="tlmene">Auto sme nenašli. Skontrolujte ŠPZ alebo kontaktujte správcu vozového parku.</p>
            )}
            {vysledky.map((v) => (
              <KartaAuta key={v.id} v={v} zvyraznit={q} vybrane={!!vybrane && vybrane.id === v.id} onVyber={onVyber} />
            ))}
          </div>
        )}

        {vybrane && !q && <KartaAuta v={vybrane} vybrane onVyber={onVyber} />}
        {vybrane && vybrane.asistencia && <Asistencia a={vybrane.asistencia} />}
      </>
    );
  }

  function Nahlasenie({ ja, onKoniec }) {
    const ulozene = window.rozpracovaneHlasenie(ja.email);
    const [krok, setKrok] = useState(1);
    const [vozidla, setVozidla] = useState(null);
    const [chyba, setChyba] = useState(null);
    const [vybrane, setVybrane] = useState(ulozene && ulozene.vozidlo ? ulozene.vozidlo : null);

    const nacitaj = () => {
      setChyba(null);
      window.AUTA_API.vozidla()
        .then((v) => {
          setVozidla(v);
          // Uložené auto mohlo medzičasom zmiznúť (vyradené) alebo sa zmeniť: berie sa aktuálny stav.
          setVybrane((sel) => (sel ? v.find((x) => x.id === sel.id) || null : sel));
        })
        .catch((e) => setChyba(e.message));
    };
    useEffect(nacitaj, []);

    // Priebežné uloženie rozpracovaného hlásenia (zatiaľ len vybrané auto a krok).
    useEffect(() => {
      if (vybrane) window.bezpecneUloz(kluceRozpracovane(ja.email), { krok, vozidlo: vybrane, ulozene: new Date().toISOString() });
    }, [vybrane, krok]);

    const vyber = (v) => setVybrane(v);
    const dalej = () => {
      const posledne = window.bezpecneNacitaj(kluceNaposledy(ja.email), []);
      window.bezpecneUloz(kluceNaposledy(ja.email), [vybrane.spz, ...posledne.filter((s) => s !== vybrane.spz)].slice(0, 3));
      setKrok(2);
    };

    return (
      <div className="sprievodca">
        <header className="sprievodca-hlava">
          <div className="riadok">
            <button type="button" className="btn-ikona" aria-label="Zavrieť, hlásenie zostane uložené" onClick={onKoniec}>
              <window.Icon name="zavriet" size={24} />
            </button>
            <span className="hlavicka-nazov">Nahlásenie škody</span>
          </div>
          <div className="postup-info">
            <span className="postup-krok">Krok {krok} z {POCET_KROKOV}</span>
            {vybrane && <span className="male tlmene riadok medzera-xs"><window.Icon name="fajka" size={14} />Uložené v tomto zariadení</span>}
          </div>
          <div className="postup" role="progressbar" aria-valuemin={1} aria-valuemax={POCET_KROKOV} aria-valuenow={krok} aria-label="Postup hlásenia">
            {Array.from({ length: POCET_KROKOV }, (_, i) => <span key={i} className={i < krok ? "hotovy" : ""} />)}
          </div>
        </header>

        <main className="sprievodca-telo">
          {krok === 1 && <Krok1 ja={ja} vozidla={vozidla} chyba={chyba} onZnova={nacitaj} vybrane={vybrane} onVyber={vyber} />}
          {krok > 1 && (
            <>
              <h1 className="nadpis">Čo sa stalo?</h1>
              <div className="hlaska">
                <window.Icon name="info" />
                <span>Ďalšie kroky hlásenia (popis, fotky, poškodenie a odoslanie) pripravujeme. Vybrané auto {vybrane && <strong>{vybrane.spz}</strong>} ostáva uložené.</span>
              </div>
            </>
          )}
        </main>

        <nav className="sprievodca-pata" aria-label="Navigácia sprievodcu">
          <button type="button" className="btn btn-obrys btn-velka" onClick={() => (krok === 1 ? onKoniec() : setKrok(krok - 1))}>
            <window.Icon name="spat" />Späť
          </button>
          {krok === 1 && (
            <button type="button" className="btn btn-primarna btn-velka rast" disabled={!vybrane} onClick={dalej}>
              Ďalej<window.Icon name="dalej" />
            </button>
          )}
        </nav>
      </div>
    );
  }

  window.Nahlasenie = Nahlasenie;
})();