/* guide-app.jsx - Portál FKI · Průvodce (fund-finder wizard) */
const { useState, useMemo, useEffect, useRef } = React;

/* ---------- shared chrome ---------- */
function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const link = (href, label, key) => (
    <a className={"nav-link" + (active === key ? " is-active" : "")} href={href}>{label}</a>
  );
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="brand" href="domu.html">
          <span className="brand-mark" aria-hidden="true">◆</span>
          <span className="brand-name">Fkička</span>
        </a>
        <nav className={"nav-links" + (open ? " is-open" : "")}>
          {link("domu.html", "Domů", "home")}
          {link("seznam-fondu.html", "Seznam fondů", "list")}
          {link("spravci.html", "Správci", "managers")}
          {link("srovnavac.html", "Srovnávač", "compare")}
          {link("co-je-noveho.html", "Co je nového", "changelog")}
          <a className={"nav-link" + (active === "saved" ? " is-active" : "")} href="ulozene.html">Uložené<span className="wl-pill" data-wl-count style={{display:"none"}}>0</span></a>
        </nav>
        <button className="hamburger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
  );
}
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="brand"><span className="brand-mark" aria-hidden="true">◆</span><span className="brand-name">Fkička</span></div>
        <nav className="footer-links"><a href="domu.html">Domů</a><a href="seznam-fondu.html">Seznam fondů</a><a href="pruvodce.html">Průvodce</a><a href="srovnavac.html">Srovnávač</a><a href="#">Kontakt</a><a href="privacy.html">Zásady ochrany osobních údajů</a><a href="cookies.html">Zásady používání cookies</a></nav>
        <span className="footer-fine">© Fkička 2026 · Informace nejsou investičním doporučením.</span><span className="footer-op">Provozovatel: Clientelo Czech s.r.o., IČO 221 93 456, se sídlem Platnéřská 90/13, 110 00 Praha 1, zapsaná v OR u MS v Praze, sp. zn. C 412348.</span>
      </div>
    </footer>
  );
}

/* ---------- atoms reused ---------- */
function formatAum(milCZK) {
  if (milCZK == null) return "-";
  if (milCZK >= 1000) { const mld = milCZK / 1000; return (mld >= 10 ? mld.toFixed(1) : mld.toFixed(2)) + " mld Kč"; }
  return Math.round(milCZK) + " mil Kč";
}
function Stars({ n }) {
  return (
    <span className="stars" aria-label={n + " z 5"}>
      {[1,2,3,4,5].map((i) => (
        <svg key={i} viewBox="0 0 24 24" className={"star " + (i <= n ? "on" : "off")} width="13" height="13" aria-hidden="true">
          <path d="M12 2.5l2.9 6.06 6.6.86-4.85 4.6 1.2 6.58L12 17.9l-5.85 3.16 1.2-6.58L2.5 9.42l6.6-.86z" />
        </svg>
      ))}
    </span>
  );
}
function Badge({ kind }) {
  const map = { "Aktivní": "badge badge--active", "Warm": "badge badge--warm", "Cold": "badge badge--cold" };
  return <span className={map[kind]}><span className="badge-dot">•</span>{kind}</span>;
}
const STRAT_DOT = { "Nemovitosti":"#5b7db1", "Private Equity":"#9a6fb0", "VC":"#cd8d3e", "Energie & Credit":"#4f9d7a", "Ostatní":"#9c9a93" };

/* ---------- question schema ---------- */
const QUESTIONS = [
  {
    id: "strategy", k: "Strategie", t: "Která investiční strategie vás zajímá?",
    help: "FKI fondy se liší rizikovým profilem i likviditou podle podkladových aktiv.",
    cols: 2,
    opts: [
      { v: "Nemovitosti", t: "Nemovitosti", d: "Rezidenční, retail, logistika", dot: STRAT_DOT["Nemovitosti"] },
      { v: "Private Equity", t: "Private Equity", d: "Majetkové účasti ve firmách", dot: STRAT_DOT["Private Equity"] },
      { v: "VC", t: "Venture Capital", d: "Rané a růstové investice", dot: STRAT_DOT["VC"] },
      { v: "Energie & Credit", t: "Energie & Credit", d: "Energetika a dluhové nástroje", dot: STRAT_DOT["Energie & Credit"] },
      { v: "Ostatní", t: "Ostatní", d: "Smíšené a specifické strategie", dot: STRAT_DOT["Ostatní"] },
      { v: "any", t: "Nezáleží", d: "Zobrazit všechny strategie" },
    ],
    test: (x, v) => v === "any" || x.strategy === v,
  },
  {
    id: "size", k: "Velikost", t: "Jakou velikost fondu preferujete?",
    help: "Velikost spravovaného majetku (AUM) bývá vodítkem ke zralosti a stabilitě fondu.",
    cols: 2,
    opts: [
      { v: "small", t: "Menší fondy", d: "do 500 mil Kč", tail: "AUM < 500 mil" },
      { v: "mid", t: "Střední fondy", d: "500 mil – 2 mld Kč", tail: "0,5–2 mld" },
      { v: "large", t: "Velké fondy", d: "nad 2 mld Kč", tail: "AUM 2 mld+" },
      { v: "any", t: "Nezáleží", d: "Včetně fondů bez údaje o AUM" },
    ],
    test: (x, v) => {
      if (v === "any") return true;
      if (x.aum == null) return false;
      if (v === "small") return x.aum < 500;
      if (v === "mid") return x.aum >= 500 && x.aum <= 2000;
      if (v === "large") return x.aum > 2000;
      return true;
    },
  },
  {
    id: "fundraising", k: "Fundraising", t: "Mají fondy aktivně vybírat kapitál?",
    help: "Status fundraisingu ukazuje, zda fond právě přijímá nové investory.",
    cols: 1,
    opts: [
      { v: "active", t: "Pouze aktivně vybírající", d: "Fondy se statusem Aktivní" },
      { v: "warm", t: "Aktivní i navazující (Warm)", d: "Otevřené i brzy otevírané fondy" },
      { v: "any", t: "Nezáleží na statusu", d: "Včetně uzavřených (Cold)" },
    ],
    test: (x, v) => {
      if (v === "any") return true;
      if (v === "active") return x.fundraising === "Aktivní";
      if (v === "warm") return x.fundraising === "Aktivní" || x.fundraising === "Warm";
      return true;
    },
  },
  {
    id: "quality", k: "Kvalita", t: "Jakou úroveň hodnocení očekáváte?",
    help: "Interní hodnocení Fkička (1–5) shrnuje transparentnost, dostupnost dat a IR vyspělost.",
    cols: 1,
    opts: [
      { v: "4", t: "Nadprůměrné fondy", d: "Hodnocení 4★ a výše" },
      { v: "3", t: "Solidní a lepší", d: "Hodnocení 3★ a výše" },
      { v: "any", t: "Nezáleží", d: "Všechna hodnocení" },
    ],
    test: (x, v) => (v === "any" ? true : x.rating >= parseInt(v, 10)),
  },
];

function matchAll(funds, answers) {
  return funds.filter((x) => QUESTIONS.every((q) => answers[q.id] == null || q.test(x, answers[q.id])));
}

/* ---------- main ---------- */
function GuideApp() {
  const FUNDS = window.FKI_FUNDS || [];
  const [step, setStep] = useState(0);     // 0..QUESTIONS.length (last = results)
  const [answers, setAnswers] = useState({});
  const isResults = step >= QUESTIONS.length;
  const q = QUESTIONS[step];

  const topRef = useRef(null);
  useEffect(() => { if (topRef.current) topRef.current.scrollTop = 0; window.scrollTo({ top: 0 }); }, [step]);

  // contextual count: funds matching all OTHER answered questions + this option
  const optCount = (qq, v) => {
    const others = { ...answers };
    delete others[qq.id];
    return FUNDS.filter((x) => {
      if (!qq.test(x, v)) return false;
      return QUESTIONS.every((o) => o.id === qq.id || others[o.id] == null || o.test(x, others[o.id]));
    }).length;
  };

  const liveMatches = useMemo(() => matchAll(FUNDS, answers), [FUNDS, answers]);

  const results = useMemo(() => {
    return matchAll(FUNDS, answers)
      .slice()
      .sort((a, b) => (b.rating - a.rating) || ((b.aum || -1) - (a.aum || -1)))
      .slice(0, 8);
  }, [FUNDS, answers]);

  const pick = (v) => {
    setAnswers((p) => ({ ...p, [q.id]: v }));
    setTimeout(() => setStep((s) => s + 1), 230);
  };

  const recap = QUESTIONS.filter((qq) => answers[qq.id] != null).map((qq) => {
    const o = qq.opts.find((o) => o.v === answers[qq.id]);
    return { k: qq.k, label: o ? o.t : "" };
  });

  const restart = () => { setAnswers({}); setStep(0); };

  return (
    <div className="page" ref={topRef}>
      <Nav active="guide" />
      <div className="container">
        <div className="screen-head">
          <div className="eyebrow">Průvodce</div>
          <h1>{isResults ? "Vaše fondy na míru" : "Najděte fond, který sedí vašemu záměru"}</h1>
          <p className="sub">{isResults
            ? "Výběr z registru ČNB seřazený podle shody s vašimi preferencemi. Data jsou v této ukázce ilustrativní."
            : "Čtyři otázky vás dovedou k fondům kvalifikovaných investorů odpovídajícím vaší strategii, velikosti a stylu."}</p>
        </div>

        <div className="screen-body">
          {!isResults ? (
            <div className="wizard">
              <div className="qcard">
                <div className="qcard-prog">Otázka {step + 1} ze {QUESTIONS.length}</div>
                <h2>{q.t}</h2>
                <p className="q-help">{q.help}</p>
                <div className={"opts opts--" + q.cols}>
                  {q.opts.map((o) => {
                    const on = answers[q.id] === o.v;
                    const c = optCount(q, o.v);
                    return (
                      <button key={o.v} className={"opt" + (on ? " is-on" : "")} onClick={() => pick(o.v)}>
                        <span className="opt-mark"></span>
                        {o.dot ? <span className="opt-dot" style={{ background: o.dot }}></span> : null}
                        <span className="opt-body">
                          <span className="opt-t">{o.t}</span>
                          <span className="opt-d">{o.d}</span>
                        </span>
                        <span className="opt-tail">{o.tail ? o.tail + " · " : ""}{c} {c === 1 ? "fond" : c >= 2 && c <= 4 ? "fondy" : "fondů"}</span>
                      </button>
                    );
                  })}
                </div>
                <div className="qcard-foot">
                  <span className="match-live">Aktuálně odpovídá <b>{liveMatches.length}</b> {liveMatches.length === 1 ? "fond" : liveMatches.length >= 2 && liveMatches.length <= 4 ? "fondy" : "fondů"}</span>
                  <div className="wiz-btns">
                    <button className="btn btn--ghost btn--sm" disabled={step === 0} onClick={() => setStep((s) => Math.max(0, s - 1))}>← Zpět</button>
                    <button className="btn btn--ghost btn--sm" onClick={() => setStep(QUESTIONS.length)}>Přeskočit na výsledky</button>
                  </div>
                </div>
              </div>

              <aside>
                <div className="steps">
                  {QUESTIONS.map((qq, i) => {
                    const done = answers[qq.id] != null;
                    const cur = i === step;
                    const o = qq.opts.find((o) => o.v === answers[qq.id]);
                    return (
                      <button key={qq.id} className={"step-item" + (cur ? " is-current" : "") + (done && !cur ? " is-done" : "")}
                        disabled={i > step && !done} onClick={() => setStep(i)}>
                        <span className="step-num">{done && !cur ? "✓" : i + 1}</span>
                        <span className="step-meta">
                          <span className="step-k">{qq.k}</span>
                          <span className="step-t">{qq.t.replace(/\?$/, "")}</span>
                          {done ? <span className="step-ans">{o ? o.t : ""}</span> : null}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </aside>
            </div>
          ) : (
            <Results results={results} total={liveMatches.length} recap={recap} restart={restart} />
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}

function Results({ results, total, recap, restart }) {
  if (results.length === 0) {
    return (
      <div className="results-empty">
        <h3>Žádný fond neodpovídá všem kritériím</h3>
        <p>Zkuste rozvolnit jedno z kritérií - například velikost fondu nebo status fundraisingu.</p>
        <button className="btn btn--primary" onClick={restart}>Začít znovu</button>
      </div>
    );
  }
  return (
    <React.Fragment>
      <div className="results-head">
        <div>
          <h2>{total} {total === 1 ? "fond odpovídá" : total >= 2 && total <= 4 ? "fondy odpovídají" : "fondů odpovídá"} vašemu zadání</h2>
          <div className="rh-sub">Zobrazujeme {Math.min(8, results.length)} nejlépe hodnocených. Seřazeno podle shody.</div>
        </div>
        <button className="btn btn--ghost btn--sm" onClick={restart}>↺ Upravit zadání</button>
      </div>
      <div className="chips-recap">
        {recap.map((r, i) => <span key={i} className="recap-chip">{r.k}: <b>{r.label}</b></span>)}
      </div>
      <div className="rec-grid">
        {results.map((x, i) => (
          <div key={x.id} className="rec-card">
            <div className="rec-top">
              <div>
                <div className="rec-name">{x.name}</div>
                <div className="rec-meta">{x.strategy} · {x.manager} · reg. {x.year}</div>
              </div>
              <Badge kind={x.fundraising} />
            </div>
            <div className="rec-mid">
              <div className="rec-aum">
                <span className="v">{formatAum(x.aum)}</span>
                <span className="l">Spravovaný majetek</span>
              </div>
              <Stars n={x.rating} />
            </div>
            <div className="rec-bot">
              {i === 0 || (x.rating >= 4 && x.fundraising === "Aktivní")
                ? <span className="match-pill"><span className="dot"></span>Vysoká shoda</span>
                : <span className="faint" style={{ fontSize: "12.5px" }}>Odpovídá zadání</span>}
              <a className="row-cta" style={{ opacity: 1 }} href={"srovnavac.html?ids=" + x.id}>Porovnat →</a>
            </div>
          </div>
        ))}
      </div>
      <div className="results-cta">
        <a className="btn btn--primary btn--lg" href={"srovnavac.html?ids=" + results.slice(0, 3).map((x) => x.id).join(",")}>Porovnat top 3 ve Srovnávači</a>
        <a className="btn btn--ghost btn--lg" href="seznam-fondu.html">Zobrazit v plném seznamu</a>
      </div>
    </React.Fragment>
  );
}

window.GuideApp = GuideApp;