/* Caballo Natural – Quiz modal + Result */
const { useState: useStateQ, useEffect: useEffectQ, useMemo: useMemoQ } = React;

// QUIZ MODAL
const QuizModal = ({ initialCategorySlug, initialSymptom, onClose, onNav }) => {
  const cats = window.__CN.CATEGORIES;
  const data = window.__CN.data;
  const [step, setStep] = useStateQ(initialCategorySlug ? 2 : 1);
  const [categorySlug, setCategorySlug] = useStateQ(initialCategorySlug || null);
  const [level, setLevel] = useStateQ("Basis");
  const [extraLevels, setExtraLevels] = useStateQ([]); // extra Nebenebenen
  const [selectedSymptoms, setSelectedSymptoms] = useStateQ(initialSymptom ? new Set([initialSymptom]) : new Set());
  const [showResult, setShowResult] = useStateQ(false);

  const cat = useMemoQ(() => cats.find(c => c.slug === categorySlug), [categorySlug]);
  const programs = useMemoQ(() => cat ? (data.byCategory[cat.name] || []) : [], [cat]);
  const program = useMemoQ(() => programs.find(p => p["Nebenebene"] === level), [programs, level]);

  // Symptom pool for current category + selected levels
  const symptomsByLevel = useMemoQ(() => {
    const map = {};
    for (const p of programs) {
      map[p["Nebenebene"]] = p._symptoms;
    }
    return map;
  }, [programs]);

  const toggleSymptom = (s) => {
    setSelectedSymptoms(prev => {
      const n = new Set(prev);
      if (n.has(s)) n.delete(s); else n.add(s);
      return n;
    });
  };

  // Auto-detect which Nebenebenen the selected symptoms come from
  const detectedLevels = useMemoQ(() => {
    const levels = new Set();
    for (const s of selectedSymptoms) {
      for (const [l, syms] of Object.entries(symptomsByLevel)) {
        if (syms.includes(s)) levels.add(l);
      }
    }
    return [...levels];
  }, [selectedSymptoms, symptomsByLevel]);

  const tooComplex = selectedSymptoms.size > 2 || detectedLevels.length > 2;

  const handleNext = () => {
    if (step === 1 && categorySlug) setStep(2);
    else if (step === 2) setStep(3);
    else if (step === 3) {
      // pick the level from detected, fallback to chosen
      if (detectedLevels.length === 1) setLevel(detectedLevels[0]);
      else if (detectedLevels.length > 0) setLevel(detectedLevels[0]); // first detected
      setShowResult(true);
    }
  };

  const handleBack = () => {
    if (showResult) setShowResult(false);
    else if (step > 1) setStep(step - 1);
  };

  const restart = () => {
    setShowResult(false);
    setStep(1);
    setCategorySlug(null);
    setLevel("Basis");
    setSelectedSymptoms(new Set());
  };

  // Step 3: which symptom groups are expanded (selected level open first, rest collapsed)
  const [openGroups, setOpenGroups] = useStateQ(null);
  const toggleGroup = (id) => setOpenGroups(prev => {
    const base = prev || new Set([level]);
    const n = new Set(base);
    if (n.has(id)) n.delete(id); else n.add(id);
    return n;
  });
  // When entering step 3 (or changing level), default to only the chosen level open
  useEffectQ(() => {
    if (step === 3) setOpenGroups(new Set([level]));
  }, [step, level]);
  // Order levels so the chosen Stufe comes first
  const orderedLevels = useMemoQ(() => {
    const all = window.__CN.LEVELS;
    return [...all].sort((a, b) => (a.id === level ? -1 : 0) - (b.id === level ? -1 : 0));
  }, [level]);

  const stepNames = ["Bereich", "Stufe", "Symptome", "Ergebnis"];
  const progress = showResult ? 100 : (step / 3) * 100;

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <div>
            <div className="step-info">{showResult ? "Ergebnis" : `Schritt ${step} von 3`} · {stepNames[showResult ? 3 : step - 1]}</div>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 24, marginTop: 4 }}>
              {showResult ? "Dein Programm" : "Programm-Finder"}
            </div>
          </div>
          <button className="close" onClick={onClose} aria-label="Schließen"><Icon name="close" size={16}/></button>
        </div>
        <div className="modal-progress"><div className="bar" style={{ width: `${progress}%` }}/></div>

        {/* === STEP 1: Category === */}
        {!showResult && step === 1 && (
          <div className="modal-body">
            <h2>Welcher Bereich passt zu deinem Pferd?</h2>
            <p className="modal-sub">Wir arbeiten in 11 Gesundheits-Achsen. Wähle die, die am ehesten zutrifft – du kannst es jederzeit ändern.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
              {cats.map(c => (
                <button
                  key={c.slug}
                  className="level-card"
                  onClick={() => setCategorySlug(c.slug)}
                  style={{
                    background: categorySlug === c.slug ? "var(--green-tint)" : "#fff",
                    borderColor: categorySlug === c.slug ? "var(--green-deep)" : undefined,
                    padding: 12,
                    flexDirection: "row",
                    gap: 12,
                    alignItems: "center",
                  }}
                >
                  <img src={c.img} alt="" style={{ width: 44, height: 44, borderRadius: 6, objectFit: "cover" }}/>
                  <div>
                    <div style={{ fontFamily: "var(--ff-display)", fontSize: 16, lineHeight: 1.1 }}>{c.name.split(",")[0].split(" / ")[0]}</div>
                    <div className="lc-desc">{c.short}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* === STEP 2: Level === */}
        {!showResult && step === 2 && cat && (
          <div className="modal-body">
            <h2>In welcher Stufe steht dein Pferd?</h2>
            <p className="modal-sub">
              <strong>{cat.name}</strong> – wähle die Programmstufe, die zur aktuellen Lage passt.
            </p>
            <div className="level-cards">
              {window.__CN.LEVELS.map(l => (
                <button
                  key={l.id}
                  className={`level-card ${level === l.id ? "selected" : ""}`}
                  onClick={() => setLevel(l.id)}
                >
                  <div className="lc-name">{l.id}</div>
                  <div className="lc-desc">{l.desc}</div>
                </button>
              ))}
            </div>
            <div style={{ marginTop: 24, padding: 16, background: "var(--bg)", borderRadius: 8, fontSize: 13, color: "var(--ink-soft)" }}>
              <strong style={{ color: "var(--green-deep)" }}>Tipp:</strong>{" "}
              Nicht sicher? Bleib im nächsten Schritt offen für mehrere Symptom-Bereiche – wir erkennen die passende Stufe dann automatisch.
            </div>
          </div>
        )}

        {/* === STEP 3: Symptoms === */}
        {!showResult && step === 3 && cat && (
          <div className="modal-body">
            <h2>Welche 1–2 Hauptsymptome zeigt dein Pferd?</h2>
            <p className="modal-sub">
              Wähle bis zu 2 Hauptsymptome. Symptome aus mehreren Stufen sind ok – aber wenn mehr als 2 Bereiche aktiv sind, empfehlen wir eine individuelle Beratung.
            </p>

            {orderedLevels.map(l => {
              const syms = symptomsByLevel[l.id] || [];
              if (!syms.length) return null;
              const isOpen = (openGroups || new Set([level])).has(l.id);
              const isChosen = l.id === level;
              const pickedHere = syms.filter(s => selectedSymptoms.has(s)).length;
              return (
                <div key={l.id} className={`quiz-symptom-group ${isChosen ? "is-chosen" : ""}`} style={{ marginBottom: 14 }}>
                  <button
                    type="button"
                    className="quiz-group-head"
                    onClick={() => toggleGroup(l.id)}
                    aria-expanded={isOpen}
                  >
                    <span className={`pill ${isChosen ? "selected" : ""}`} style={{ fontSize: 11 }}>{l.id}</span>
                    {isChosen && <span className="quiz-group-flag">deine Stufe</span>}
                    <span className="quiz-group-desc">{l.desc}</span>
                    {pickedHere > 0 && <span className="quiz-group-count">{pickedHere}</span>}
                    <span className={`quiz-group-chev ${isOpen ? "open" : ""}`}><Icon name="arrow" size={13}/></span>
                  </button>
                  {isOpen && (
                    <div className="symptom-grid" style={{ marginTop: 10 }}>
                      {syms.map(s => (
                        <button
                          key={s}
                          className={`symptom-opt ${selectedSymptoms.has(s) ? "selected" : ""}`}
                          onClick={() => toggleSymptom(s)}
                        >
                          <span className="check">{selectedSymptoms.has(s) && <Icon name="check" size={11}/>}</span>
                          <span>{s}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}

            {tooComplex && (
              <div className="consultation-banner in-result" style={{ margin: "24px 0 0", padding: "20px 24px" }}>
                <div className="icon-circle"><Icon name="spark" size={26}/></div>
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontSize: 22 }}>Klingt nach einem individuellen Fall.</h3>
                  <p>Du hast {selectedSymptoms.size} Symptome aus {detectedLevels.length} Stufen ausgewählt. Wir empfehlen unsere kostenlose TCVM-Online-Beratung statt eines Standard-Sets.</p>
                </div>
                <button className="btn btn-primary" onClick={() => { onClose(); onNav("consultation"); }}>Zur Beratung</button>
              </div>
            )}
          </div>
        )}

        {/* === RESULT === */}
        {showResult && program && (
          <div>
            <ResultView program={program} cat={cat} selectedSymptoms={selectedSymptoms} tooComplex={tooComplex} onConsult={() => { onClose(); onNav("consultation"); }} onRestart={restart} />
          </div>
        )}

        {/* === FOOTER === */}
        {!showResult && (
          <div className="modal-foot">
            <div>
              {step > 1 && <button className="btn btn-secondary btn-sm" onClick={handleBack}>← Zurück</button>}
            </div>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <span style={{ fontSize: 12, color: "var(--ink-mute)" }}>
                {step === 3 && `${selectedSymptoms.size} ausgewählt`}
              </span>
              <button
                className="btn btn-primary"
                onClick={handleNext}
                disabled={
                  (step === 1 && !categorySlug) ||
                  (step === 3 && selectedSymptoms.size === 0)
                }
                style={{
                  opacity:
                    (step === 1 && !categorySlug) ||
                    (step === 3 && selectedSymptoms.size === 0) ? 0.4 : 1,
                  pointerEvents:
                    (step === 1 && !categorySlug) ||
                    (step === 3 && selectedSymptoms.size === 0) ? "none" : "auto",
                }}
              >
                {step === 3 ? "Set anzeigen" : "Weiter"} <Icon name="arrow"/>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// RESULT VIEW (inside modal)
const ResultView = ({ program, cat, selectedSymptoms, tooComplex, onConsult, onRestart }) => {
  const data = window.__CN.data;
  const prices = data.prices;
  const baseFeeds = (program["Cobs-Basisfutter"] || "")
    .split(/\boder\b/i).map(s => s.trim()).filter(Boolean);

  // Editable selection - all retail products selected by default
  const retailDefaultSet = useMemoQ(() => {
    const s = new Set();
    for (const p of program._products) {
      const main = p.split(/\s*\/\s*alternativ\s*/i)[0].trim();
      // skip basisfutter (already covered)
      if (baseFeeds.some(b => p.includes(b))) continue;
      const retail = window.__CN.toRetailVariant(main);
      if (retail) s.add(retail);
    }
    return s;
  }, [program]);
  const [selected, setSelected] = useStateQ(() => retailDefaultSet);
  const toggle = (p) => setSelected(prev => {
    const n = new Set(prev); if (n.has(p)) n.delete(p); else n.add(p); return n;
  });

  // Compute total price (using base + selected products)
  const total = useMemoQ(() => {
    let sum = 0; let any = false;
    for (const bf of baseFeeds) {
      const pr = prices.products[bf]?.price;
      if (pr) { sum += pr; any = true; }
    }
    for (const p of selected) {
      const pr = prices.products[p]?.price;
      if (pr) { sum += pr; any = true; }
    }
    return any ? sum : null;
  }, [selected]);

  return (
    <>
      <div className="result-head">
        <div className="eyebrow">Empfohlenes Programm · {cat.tag}</div>
        <h2>{program["Setname Webseite"]}</h2>
        <div className="meta">
          <span>{program["Nebenebene"]}</span><span className="dot"/>
          <span>{program["Laufzeit-Badge"]}</span><span className="dot"/>
          <span>Hauptkräuter: {program["Hauptphase Kräuter"]}</span>
        </div>
        {selectedSymptoms.size > 0 && (
          <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 6 }}>
            {[...selectedSymptoms].map(s => (
              <span key={s} style={{ fontSize: 11, padding: "4px 10px", background: "rgba(229,201,140,0.18)", color: "var(--gold-soft)", borderRadius: 999, border: "1px solid rgba(229,201,140,0.3)" }}>{s}</span>
            ))}
          </div>
        )}
      </div>

      <div className="result-body">
        {tooComplex && (
          <div className="consultation-banner in-result" style={{ marginBottom: 28, marginTop: 0 }}>
            <div className="icon-circle"><Icon name="spark" size={26}/></div>
            <div style={{ flex: 1 }}>
              <h3 style={{ fontSize: 20 }}>Dein Pferd zeigt mehr als 2 Symptom-Bereiche</h3>
              <p>Wir zeigen dir das passende Set, empfehlen aber zusätzlich eine kostenlose Beratung, damit wir alle Achsen gleichzeitig stimmig zusammen führen.</p>
            </div>
            <button className="btn btn-primary btn-sm" onClick={onConsult}>Beratung anfragen</button>
          </div>
        )}

        {program["Kurzbeschreibung / Wirkung"] && program["Kurzbeschreibung / Wirkung"].length > 5 && (
          <div className="result-section">
            <h3>So wirkt das Set</h3>
            <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6 }}>{program["Kurzbeschreibung / Wirkung"]}</p>
          </div>
        )}

        <div className="result-section">
          <h3>Set-Inhalte – Du kannst Produkte abwählen</h3>
          <ProductRows program={program} editable={true} selected={selected} onToggle={toggle} />
          <div style={{ marginTop: 18, padding: 14, background: "var(--bg)", borderRadius: 8, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 12, fontFamily: "var(--ff-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              {selected.size + baseFeeds.length} von {retailDefaultSet.size + baseFeeds.length} im Warenkorb
            </span>
            <span style={{ fontFamily: "var(--ff-display)", fontSize: 28 }}>
              {window.__CN.formatPrice(total) || <span style={{ fontSize: 14, color: "var(--ink-mute)", fontFamily: "var(--ff-mono)" }}>Preise werden ergänzt</span>}
            </span>
          </div>
        </div>

        <div className="result-section">
          <h3>3-Monats-Phasen</h3>
          <div className="phase-grid">
            <div className="phase-cell"><div className="month">Monat 1</div><p>{program["Phase Monat 1"]}</p></div>
            <div className="phase-cell"><div className="month">Monat 2</div><p>{program["Phase Monat 2"]}</p></div>
            <div className="phase-cell"><div className="month">Monat 3</div><p>{program["Phase Monat 3"]}</p></div>
          </div>
        </div>

        {program["Dosierung je 100 kg"] && (
          <div className="result-section">
            <h3>Dosierung je 100 kg Pferd</h3>
            <div className="dose-block">{program["Dosierung je 100 kg"]}</div>
          </div>
        )}

        {program["Wichtige Hinweise"] && (
          <div className="result-section">
            <h3>Wichtige Hinweise</h3>
            <div className="warn-block">
              <div className="warn-title">Beachten</div>
              {program["Wichtige Hinweise"].split("|").map((h, i) => <div key={i} style={{ marginTop: i > 0 ? 6 : 0 }}>· {h.trim()}</div>)}
            </div>
          </div>
        )}

        {program["Zusätzlich dazu – wann?"] && (
          <div className="result-section">
            <h3>Zusätzlich – wann sinnvoll?</h3>
            <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{program["Zusätzlich dazu – wann?"]}</p>
          </div>
        )}

        {program["Nächste Produkte ab Monat 4"] && (
          <div className="result-section">
            <h3>Anschluss ab Monat 4</h3>
            <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{program["Nächste Produkte ab Monat 4"]}</p>
          </div>
        )}
      </div>

      <div className="modal-foot">
        <button className="btn btn-secondary btn-sm" onClick={onRestart}>↺ Neu starten</button>
        <div style={{ display: "flex", gap: 12 }}>
          <button className="btn btn-secondary" onClick={onConsult}>Beratung anfragen</button>
          <button className="btn btn-primary">In den Warenkorb <Icon name="bag" size={14}/></button>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { QuizModal, ResultView });