// katalog-app.jsx — Mietkatalog: 3-Schritte-Flow (Technik → Services → Anfrage).
// Auswahl, Services und Formular werden in localStorage gehalten (nf_mietanfrage_v1).

const STORE_KEY = 'nf_mietanfrage_v1';

function loadStore() {
  try { return JSON.parse(localStorage.getItem(STORE_KEY)) || {}; } catch (e) { return {}; }
}

// Platzhalter-Zeilen aus dem Datenbestand ausblenden (Name == Typ, sonst nichts dran)
function isJunk(item) {
  return !item.artNr && !item.specs && !item.description && item.name === item.type;
}

// ---------- Topbar mit Stepper ----------
function Topbar({ step, go, total }) {
  const steps = [
    { n: 1, label: 'Technik' },
    { n: 2, label: 'Services' },
    { n: 3, label: 'Anfrage' },
  ];
  return (
    <header className="top">
      <a href="index.html" className="mono back">← Zur Website</a>
      <img src="assets/logo-nf-audio.png" alt="NF-Audio" />
      <nav className="stepper" aria-label="Schritte">
        {steps.map((s, i) => {
          const reachable = s.n === 1 || total > 0;
          const cls = 'step'
            + (step === s.n ? ' active' : '')
            + (step > s.n ? ' done' : '')
            + (reachable && s.n !== step ? ' reachable' : '');
          return (
            <React.Fragment key={s.n}>
              {i > 0 && <span className="step-sep" aria-hidden="true"></span>}
              <button type="button" className={cls} disabled={!reachable} onClick={() => reachable && go(s.n)}>
                <span className="num">{'0' + s.n}</span>
                <span>{s.label}</span>
              </button>
            </React.Fragment>
          );
        })}
      </nav>
    </header>
  );
}

// ---------- Schritt 1: Technik wählen ----------
function TechnikStep(props) {
  const {
    byCat, nTotal, query, setQuery, openCats, toggleCat,
    selGroups, total, days, setDays, getQty, add, setQty, remove, clearAll, setModal,
    panelOpen, setPanelOpen, onNext,
  } = props;

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  // Suche: flache Trefferliste über alles
  let results = null;
  if (query.trim()) {
    const q = query.trim().toLowerCase();
    results = [];
    for (const c of byCat) {
      for (const item of c.items) {
        const hay = (item.name + ' ' + (item.type || '') + ' ' + (item.specs || '') + ' ' + (item.subCategory || '') + ' ' + c.category + ' ' + (item.artNr || '')).toLowerCase();
        if (hay.includes(q)) results.push(item);
        if (results.length >= 80) break;
      }
      if (results.length >= 80) break;
    }
  }

  // Items einer Kategorie nach Sub-Kategorie gruppieren
  const subGroups = (c) => {
    const map = new Map();
    for (const item of c.items) {
      const k = item.subCategory && item.subCategory !== c.category ? item.subCategory : '';
      if (!map.has(k)) map.set(k, []);
      map.get(k).push(item);
    }
    return [...map.entries()];
  };

  return (
    <div data-screen-label="Katalog Schritt 1 — Technik">
      <div className="intro">
        <h1 className="display">Mietkatalog</h1>
        <div className="meta">
          <span className="mono eyebrow" style={{ color: 'var(--neon)' }}>// Schritt 01</span>
          <span className="line"></span>
          <span className="mono eyebrow">{nTotal} Positionen · Richtpreise pro Tag</span>
        </div>
        <p className="hint">
          Klick an, was du brauchst — links sammelt sich deine Liste.
          Danach kannst du Services dazubuchen und uns alles in einem Rutsch schicken.
        </p>
      </div>

      <div className="layout">
        <aside className={'panel' + (panelOpen ? ' open' : '')}>
          <Panel
            groups={selGroups}
            total={total}
            days={days}
            setDays={setDays}
            onQty={setQty}
            onRemove={remove}
            onClear={clearAll}
            onNext={() => { setPanelOpen(false); onNext(); }}
            onClose={() => setPanelOpen(false)}
          />
        </aside>

        <main>
          <div className="searchbar">
            <input
              type="search"
              placeholder="Suchen: Gerät, Marke, Typ, Artikelnummer …"
              value={query}
              onChange={e => setQuery(e.target.value)}
              aria-label="Katalog durchsuchen"
            />
            {results && <span className="mono found">{results.length}{results.length >= 80 ? '+' : ''} TREFFER</span>}
          </div>

          {results ? (
            results.length === 0
              ? <div className="list-empty">Nichts gefunden — versuch einen anderen Begriff, oder frag uns einfach direkt.</div>
              : <div className="cat" style={{ borderBottom: '1px solid var(--hair)' }}>
                  {results.map(item => (
                    <ItemRow key={item._key} item={item} qty={getQty(item)} onAdd={add} onQty={setQty} onInfo={setModal} showCat />
                  ))}
                </div>
          ) : (
            byCat.map((c, i) => {
              const open = openCats.includes(c.category);
              const picked = c.items.reduce((s, it) => s + getQty(it), 0);
              return (
                <section className="cat" key={c.category}>
                  <button type="button" className="cat-head" onClick={() => toggleCat(c.category)} aria-expanded={open}>
                    <span className="mono cat-num">{String(i + 1).padStart(2, '0')}</span>
                    <i data-lucide={c.icon || 'box'}></i>
                    <span className="display cat-name">{c.category}</span>
                    <span className="mono cat-count">
                      {picked > 0 && <span className="cat-picked bump" key={picked}>{picked} GEWÄHLT · </span>}
                      {c.items.length}
                    </span>
                    <span className={'chev' + (open ? ' open' : '')} aria-hidden="true">›</span>
                  </button>
                  <div className={'cat-collapsible' + (open ? ' open' : '')}>
                    <div className="cat-body">
                      {subGroups(c).map(([sub, items]) => (
                        <div key={sub || '_'}>
                          {sub && <div className="mono subhead">{sub}</div>}
                          {items.map(item => (
                            <ItemRow key={item._key} item={item} qty={getQty(item)} onAdd={add} onQty={setQty} onInfo={setModal} />
                          ))}
                        </div>
                      ))}
                    </div>
                  </div>
                </section>
              );
            })
          )}
        </main>
      </div>

      <div className="mobilebar">
        <button type="button" className="btn btn-ghost" onClick={() => setPanelOpen(true)}>
          <span>Deine Liste ({total})</span>
        </button>
        <button type="button" className="btn btn-fill" disabled={total === 0} onClick={onNext}>
          <span>Weiter</span><span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

// ---------- App ----------
function KatalogApp() {
  const stored = React.useMemo(loadStore, []);
  const [catalog, setCatalog] = React.useState([]);
  const [step, setStepRaw] = React.useState(stored.step || 1);
  const [sel, setSel] = React.useState(stored.sel || {});
  const [services, setServices] = React.useState(stored.services || []);
  const [days, setDays] = React.useState(stored.days || 1);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', date: '', location: '', message: '', ...(stored.form || {}) });
  const [query, setQuery] = React.useState('');
  const [openCats, setOpenCats] = React.useState(stored.openCats || null);
  const [modal, setModal] = React.useState(null);
  const [panelOpen, setPanelOpen] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const [showIntro, setShowIntro] = React.useState(() => {
    try { return !localStorage.getItem('nf_katalog_intro_seen'); } catch (e) { return false; }
  });

  // Katalogdaten: Admin-Stand aus localStorage, sonst catalog.json
  React.useEffect(() => {
    const ls = localStorage.getItem('nf_catalog');
    if (ls) { try { setCatalog(JSON.parse(ls)); return; } catch (e) {} }
    fetch('catalog.json').then(r => r.json()).then(setCatalog).catch(() => {});
  }, []);

  // Persistenz
  React.useEffect(() => {
    try {
      localStorage.setItem(STORE_KEY, JSON.stringify({ step, sel, services, days, form, openCats }));
    } catch (e) {}
  }, [step, sel, services, days, form, openCats]);

  // ESC schließt Modal / Overlay
  React.useEffect(() => {
    const onKey = e => { if (e.key === 'Escape') { setModal(null); setPanelOpen(false); } };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Kategorien mit Schlüsseln + ohne Platzhalter-Zeilen
  const byCat = React.useMemo(() => {
    return catalog.map((c, ci) => ({
      category: c.category,
      icon: c.icon,
      items: c.items
        .map((it, j) => ({ ...it, _key: ci + '.' + j, category: c.category, icon: c.icon }))
        .filter(it => !isJunk(it)),
    }));
  }, [catalog]);

  const nTotal = byCat.reduce((s, c) => s + c.items.length, 0);
  const getQty = item => sel[item._key] || 0;
  const total = Object.values(sel).reduce((s, q) => s + q, 0);

  const selGroups = React.useMemo(() => {
    const groups = [];
    for (const c of byCat) {
      const items = c.items.filter(it => sel[it._key] > 0).map(it => ({ item: it, qty: sel[it._key] }));
      if (items.length) groups.push({ category: c.category, items });
    }
    return groups;
  }, [byCat, sel]);

  const setQty = (item, q) => {
    setSel(prev => {
      const next = { ...prev };
      if (q <= 0) delete next[item._key]; else next[item._key] = q;
      return next;
    });
  };
  const add = item => setQty(item, 1);
  const remove = item => setQty(item, 0);
  const clearAll = () => {
    if (window.confirm('Komplette Liste leeren?')) setSel({});
  };
  const toggleService = id => setServices(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);

  const effectiveOpen = openCats !== null ? openCats : (byCat.length ? [byCat[0].category] : []);
  const toggleCat = name => {
    const cur = effectiveOpen;
    setOpenCats(cur.includes(name) ? cur.filter(c => c !== name) : [...cur, name]);
  };

  const go = n => {
    if (n > 1 && total === 0) return;
    setStepRaw(n);
    setSent(false);
    setCopied(false);
    window.scrollTo({ top: 0 });
  };

  const requestText = () => buildRequestText(selGroups, services, form, days);

  const onSend = e => {
    e.preventDefault();
    const subject = 'Mietanfrage — ' + total + ' Position' + (total === 1 ? '' : 'en') + (form.date ? ' · ' + form.date : '');
    window.location.href = 'mailto:info@nf-audio.de?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(requestText());
    setSent(true);
  };

  const onCopy = () => {
    const txt = 'An: info@nf-audio.de\n\n' + requestText();
    if (navigator.clipboard) {
      navigator.clipboard.writeText(txt).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2500); });
    }
  };

  const onReset = () => {
    setSel({}); setServices([]); setSent(false); setStepRaw(1);
    window.scrollTo({ top: 0 });
  };

  return (
    <React.Fragment>
      {showIntro && <IntroTour onDone={() => setShowIntro(false)} />}
      <Topbar step={step} go={go} total={total} />
      {step === 1 && (
        <TechnikStep
          byCat={byCat} nTotal={nTotal}
          query={query} setQuery={setQuery}
          openCats={effectiveOpen} toggleCat={toggleCat}
          selGroups={selGroups} total={total}
          days={days} setDays={setDays}
          getQty={getQty} add={add} setQty={setQty} remove={remove} clearAll={clearAll}
          setModal={setModal}
          panelOpen={panelOpen} setPanelOpen={setPanelOpen}
          onNext={() => go(2)}
        />
      )}
      {step === 2 && (
        <ServicesStep services={services} toggle={toggleService} onBack={() => go(1)} onNext={() => go(3)} />
      )}
      {step === 3 && (
        <FormStep
          groups={selGroups} services={services} total={total}
          days={days} setDays={setDays}
          form={form} setForm={setForm}
          goStep={go} onSend={onSend}
          sent={sent} copied={copied} onCopy={onCopy} onReset={onReset}
        />
      )}
      {modal && <ItemModal item={modal} qty={getQty(modal)} onClose={() => setModal(null)} onAdd={add} onQty={setQty} />}
    </React.Fragment>
  );
}

window.KatalogApp = KatalogApp;
window.TechnikStep = TechnikStep;
window.KatalogTopbar = Topbar;