/* domov.jsx — domovská obrazovka zamestnanca (návrh M03/P01): pozdrav, rozpracované hlásenie,
   moje hlásenia a veľké tlačidlo Nahlásiť škodu. Vystavuje window.Domov.
*/
(function () {
  "use strict";

  const { useState } = React;

  const krstneMeno = (meno) => String(meno || "").trim().split(/\s+/)[0] || "";
  const casUlozenia = (iso) => {
    const d = new Date(iso);
    if (isNaN(d)) return "";
    const dnes = new Date().toDateString() === d.toDateString();
    const hm = d.getHours() + ":" + String(d.getMinutes()).padStart(2, "0");
    return dnes ? "dnes o " + hm : d.getDate() + ". " + (d.getMonth() + 1) + ". o " + hm;
  };

  function Domov({ ja, onNahlasit, onOdhlasit }) {
    const [rozpracovane, setRozpracovane] = useState(() => window.rozpracovaneHlasenie(ja.email));
    const zahod = () => { window.zahodRozpracovane(ja.email); setRozpracovane(null); };

    return (
      <div className="obrazovka">
        <window.Hlavicka ja={ja} onOdhlasit={onOdhlasit} />
        <main className="obsah">
          <div className="stlpec medzera-xs">
            <h1 className="nadpis">Dobrý deň{krstneMeno(ja.meno) ? ", " + krstneMeno(ja.meno) : ""}</h1>
            <p className="tlmene">Stala sa škoda na aute? Nahláste ju tlačidlom dole.</p>
          </div>

          {rozpracovane && rozpracovane.vozidlo && (
            <section className="rozpracovane" aria-label="Rozpracované hlásenie">
              <div className="riadok zarovnaj-hore">
                <window.Icon name="hodiny" />
                <div className="stlpec">
                  <strong className="rozpracovane-nadpis">Máte rozpracované hlásenie</strong>
                  <span className="male">{rozpracovane.vozidlo.spz}, krok {rozpracovane.krok || 1} z 6, uložené {casUlozenia(rozpracovane.ulozene)}</span>
                </div>
              </div>
              <div className="riadok medzera-s">
                <button type="button" className="btn btn-primarna rast" onClick={onNahlasit}>Pokračovať</button>
                <button type="button" className="btn btn-obrys" onClick={zahod}>Zahodiť</button>
              </div>
            </section>
          )}

          <section className="stlpec medzera-m" aria-labelledby="moje">
            <h2 id="moje" className="nadpis-2">Moje hlásenia</h2>
            <div className="hlaska">
              <window.Icon name="info" />
              <span>Prehľad vašich hlásení a ich stavu pribudne spolu s odosielaním hlásení.</span>
            </div>
          </section>
        </main>

        <div className="hlavna-akcia">
          <button type="button" className="btn btn-cta" onClick={onNahlasit}>
            <window.Icon name="fotak" size={26} />Nahlásiť škodu
          </button>
        </div>
      </div>
    );
  }

  window.Domov = Domov;
})();