/* ── Chestionarele de valori (A/B/C) - sectiune separata in sidebar (decizia Marian 24.07) ──
   Date: window.PRP_CHV (chv_data.js) · scoring: window.chvScoring (pur, testat golden) ·
   store.chv[slug] = { activ: {raspunsuri, inceput, finalizat}, anterior: {...}|null }.
   Anti-bias: etichetele de stadiu NU apar la completare - doar in rezultat.
   Navigare: #chestionare[/<slug>/<ecran>], ecrane: completare | rezultat (modelul anamnezei). */

const IcChv = (p) => (
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <rect x="5" y="3" width="14" height="18" rx="2" />
    <path d="M9 3.5V6h6V3.5" /><path d="m9 13 2 2 4-4" />
  </svg>
);
window.IcChv = IcChv;

const CHV = () => (window.PRP_CHV || { chestionare: [] }).chestionare;
const chvDeSlug = (slug) => CHV().find((c) => c.slug === slug) || null;

function chvStarea(store, slug) {
  const tot = store.chv || {};
  const st = tot[slug] || { activ: { raspunsuri: {}, inceput: null, finalizat: null }, istoric: [] };
  if (!Array.isArray(st.istoric)) st.istoric = [];
  return st;
}
function chvScrie(set, slug, transform) {
  set((s) => {
    const tot = s.chv || {};
    const cur = tot[slug] || { activ: { raspunsuri: {}, inceput: null, finalizat: null }, istoric: [] };
    if (!Array.isArray(cur.istoric)) cur.istoric = [];
    return { ...s, chv: { ...tot, [slug]: transform(cur) } };
  });
}
/* data calendaristica a completarii (prototip local - patternul consolei/planului) */
const chvISO = () => new Date().toISOString().slice(0, 10);

function chvExport(store) {
  const rez = {};
  CHV().forEach((ch) => {
    const st = chvStarea(store, ch.slug);
    if (!st.activ.finalizat) return;
    const g = window.chvScoring.scorGlobal(ch, st.activ.raspunsuri);
    rez[ch.slug] = {
      nume: ch.nume, finalizat: st.activ.finalizat,
      stadiu: g.stadiu, eticheta: ch.mecanism.stadii[g.stadiu].eticheta,
      total: g.total,
      arii: g.arii.map((a) => ({ nr: a.nr, nume: a.nume, nA: a.nA, nB: a.nB, nC: a.nC, stadiu: a.stadiu })),
      decodificare: ch.mecanism.stadii[g.stadiu].sectiuni,
      raspunsuri: Object.fromEntries(Object.entries(st.activ.raspunsuri).map(([k, v]) => {
        const parti = k.split("|");
        const aria = ch.arii.find((x) => x.nr === +parti[0]);
        const af = aria && aria.afirmatii.find((x) => x.nr === +parti[1]);
        return [k, { alegere: v, text: af ? af[v] : "" }];
      })),
      /* istoricul completarilor anterioare - compact (verdictele; raspunsurile raman in store) */
      istoric: st.istoric.filter((i) => i.finalizat).map((i) => {
        const gi = window.chvScoring.scorGlobal(ch, i.raspunsuri);
        return { finalizat: i.finalizat, stadiu: gi.stadiu,
                 eticheta: ch.mecanism.stadii[gi.stadiu].eticheta, total: gi.total };
      }),
    };
  });
  return Object.keys(rez).length ? { chestionareValori: rez } : {};
}
window.chvExport = chvExport;

function chvNavDinHash() {
  const m = (location.hash || "").match(/^#chestionare(?:\/([a-z-]+)\/(completare|rezultat|istoric)(?:\/(\d+))?)?$/);
  if (!m) return null;
  if (m[1] && !chvDeSlug(m[1])) return { slug: null, ecran: null, arhiva: null };
  return { slug: m[1] || null, ecran: m[2] || null, arhiva: m[2] === "istoric" && m[3] ? +m[3] - 1 : null };
}

/* ── hub: cardurile chestionarelor ── */
function ChvHub({ store, setNav }) {
  return (
    <div className="stack-14">
      <div className="panel">
        <h2 style={{ margin: "0 0 4px", fontSize: "var(--m-fs-6)", color: "var(--m-navy)" }}>Chestionarele valorilor</h2>
        <p className="small" style={{ margin: 0, maxWidth: 660 }}>
          Chestionare de autoevaluare pe domeniile valorilor - la fiecare afirmație alegi varianta
          care te descrie cel mai bine ACUM, nu cea care ți-ar plăcea să fie adevărată. Rezultatul:
          profilul pe arii, stadiul curent de dezvoltare și decodificarea lui completă. Restul
          chestionarelor sunt în pregătire la Dr. Petre și apar aici imediat ce sosesc.
        </p>
      </div>
      <div className="val-grid">
        {CHV().map((ch) => {
          const st = chvStarea(store, ch.slug);
          const g = window.chvScoring.scorGlobal(ch, st.activ.raspunsuri);
          const pct = g.nTotal ? Math.round((g.nRaspunse / g.nTotal) * 100) : 0;
          return (
            <div key={ch.slug} className="chv-card">
              <div className="chv-card-top">
                <h3>{ch.nume}</h3>
                <span className="small" style={{ whiteSpace: "nowrap" }}>{ch.arii.length} arii · {g.nTotal} afirmații</span>
              </div>
              <div className="chv-bar"><i style={{ width: pct + "%" }} /></div>
              <div className="small">{st.activ.finalizat
                ? "Finalizat: " + st.activ.finalizat
                : g.nRaspunse ? "În lucru: " + g.nRaspunse + " / " + g.nTotal : "Necompletat"}</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-sm" onClick={() => setNav({ slug: ch.slug, ecran: "completare" })}>
                  {g.nRaspunse ? (g.complet ? "Revizuiește răspunsurile" : "Continuă") : "Completează"}
                </button>
                {/* UN singur buton de rezultate (cerinta Marian): activul complet -> rezultatul
                    curent (istoricul e in aceeasi pagina); altfel -> ultimul rezultat arhivat */}
                <button className="btn btn-ghost btn-sm" disabled={!g.complet && !st.istoric.length}
                  title={g.complet ? "Rezultatul chestionarului"
                    : st.istoric.length ? "Rezultatul completării anterioare (" + st.istoric[0].finalizat + ")"
                    : "Se activează la chestionar complet (" + g.nRaspunse + " / " + g.nTotal + ")"}
                  onClick={() => g.complet
                    ? setNav({ slug: ch.slug, ecran: "rezultat", arhiva: null })
                    : setNav({ slug: ch.slug, ecran: "istoric", arhiva: 0 })}>Rezultat</button>
              </div>
              {st.istoric.length > 0 &&
                <div className="chv-anterior">
                  {st.istoric.length === 1 ? "O completare anterioară" : st.istoric.length + " completări anterioare"} ·
                  {" "}ultima: {st.istoric[0].finalizat}
                </div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ── completare: arie cu arie, variante FARA etichete de stadiu (anti-bias) ── */
function ChvCompletare({ ch, store, set, setNav }) {
  const [ariaIdx, setAriaIdx] = React.useState(0);
  const st = chvStarea(store, ch.slug);
  const g = window.chvScoring.scorGlobal(ch, st.activ.raspunsuri);
  const idx = Math.min(ariaIdx, ch.arii.length - 1);
  const aria = ch.arii[idx];
  /* inaintarea e conditionata de aria curenta COMPLETA (cerinta Marian 24.07, cu captura) */
  const ariaCompleta = g.arii[idx] ? g.arii[idx].complet : false;
  const alege = (afNr, v) => chvScrie(set, ch.slug, (cur) => ({
    ...cur,
    activ: {
      raspunsuri: { ...cur.activ.raspunsuri, [aria.nr + "|" + afNr]: v },
      inceput: cur.activ.inceput || chvISO(),
      finalizat: cur.activ.finalizat,
    },
  }));
  const finalizeaza = () => {
    chvScrie(set, ch.slug, (cur) => ({ ...cur, activ: { ...cur.activ, finalizat: chvISO() } }));
    setNav({ slug: ch.slug, ecran: "rezultat" });
  };
  return (
    <div className="stack-14">
      <div className="panel" style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <div>
          <b>{ch.nume}</b>
          <div className="small">Aria {aria.nr} din {ch.arii.length}: <b>{aria.nume}</b></div>
        </div>
        <div className="small">Progres total: {g.nRaspunse} / {g.nTotal}</div>
      </div>
      {aria.afirmatii.map((af) => {
        const cheie = aria.nr + "|" + af.nr;
        const ales = st.activ.raspunsuri[cheie];
        return (
          <div key={af.nr} className="chv-item">
            <p className="chv-item-nr">Afirmația {af.nr} din {aria.afirmatii.length}</p>
            {["A", "B", "C"].map((v) => (
              <label key={v} className={"chv-varianta" + (ales === v ? " aleasa" : "")}>
                <input type="radio" name={"chv-" + ch.slug + "-" + cheie} checked={ales === v}
                  onChange={() => alege(af.nr, v)} />
                <span>{af[v]}</span>
              </label>
            ))}
          </div>
        );
      })}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <button className="btn btn-ghost btn-sm" disabled={ariaIdx === 0}
          onClick={() => { setAriaIdx(ariaIdx - 1); window.scrollTo(0, 0); }}>{"←"} Aria anterioară</button>
        {idx < ch.arii.length - 1
          ? <button className="btn btn-primary btn-sm" disabled={!ariaCompleta}
              title={ariaCompleta ? "Treci la aria următoare"
                : "Alege un răspuns la fiecare afirmație a acestei arii (" + (g.arii[idx] ? g.arii[idx].nA + g.arii[idx].nB + g.arii[idx].nC : 0) + " / " + aria.afirmatii.length + ")"}
              onClick={() => { setAriaIdx(idx + 1); window.scrollTo(0, 0); }}>Aria următoare {"→"}</button>
          : <button className="btn btn-primary btn-sm" disabled={!g.complet}
              title={g.complet ? "Finalizează și vezi rezultatul" : "Mai sunt " + (g.nTotal - g.nRaspunse) + " afirmații fără răspuns"}
              onClick={finalizeaza}>Vezi rezultatul</button>}
      </div>
    </div>
  );
}

/* ── blocul de rezultat (verdict + harta + decodificare) - refolosit de rezultatul ACTIV
   si de completarile ARHIVATE din istoric ── */
function ChvRezultatCorp({ ch, g, finalizat, banner }) {
  const stadiu = ch.mecanism.stadii[g.stadiu];
  const SECTIUNI = [
    ["caracteristici", "Caracteristicile stadiului de dezvoltare personală"],
    ["impactare", "Modul de impactare personală"],
    ["predictii", "Predicțiile viitoare la nivel personal"],
    ["pericole", "Pericolele și vulnerabilitățile etapei"],
    ["actiuni", "Acțiuni concrete viitoare"],
  ];
  return (
    <React.Fragment>
      <div className={"chv-verdict st" + g.stadiu}>
        <div className="small">{ch.nume} · {banner || ("finalizat " + finalizat)}</div>
        <b className="mare">{stadiu.eticheta}</b> - {stadiu.nivel}
        <div className="small" style={{ marginTop: 4 }}>
          Total: {g.total.nA} A · {g.total.nB} B · {g.total.nC} C din {g.nTotal} afirmații
        </div>
      </div>
      <div className="chv-sect">
        <h3 className="chv-sect-titlu">Harta ariilor</h3>
        <div className="chv-scroll">
          <table className="chv-tabel">
            <thead><tr><th>Aria</th><th>A</th><th>B</th><th>C</th><th>Stadiu</th></tr></thead>
            <tbody>
              {g.arii.map((a) => (
                <tr key={a.nr}>
                  <td>{a.nr}. {a.nume}</td>
                  <td>{a.nA}</td><td>{a.nB}</td><td>{a.nC}</td>
                  <td><span className={"chv-stadiu st" + a.stadiu}>
                    {ch.mecanism.stadii[a.stadiu].eticheta}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      {SECTIUNI.map(([cheie, titlu]) => (
        <div key={cheie} className="chv-sect">
          <h3 className="chv-sect-titlu">{titlu}</h3>
          <ul className="chv-lista">{(stadiu.sectiuni[cheie] || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
        </div>
      ))}
    </React.Fragment>
  );
}

/* ── rezultatul ACTIV: corpul + istoricul completarilor + reia ── */
function ChvRezultat({ ch, store, set, setNav }) {
  const [confirmaReia, setConfirmaReia] = React.useState(false);
  const st = chvStarea(store, ch.slug);
  const g = window.chvScoring.scorGlobal(ch, st.activ.raspunsuri);
  /* rezultatul se poate deschide si direct din hub la 100% raspunsuri - data
     finalizarii se consemneaza atunci la prima deschidere */
  React.useEffect(() => {
    if (g.complet && !st.activ.finalizat) {
      chvScrie(set, ch.slug, (cur) => ({ ...cur, activ: { ...cur.activ, finalizat: chvISO() } }));
    }
  }, [g.complet, st.activ.finalizat]);
  if (!g.complet) {
    return (
      <div className="stack-14">
        <div className="panel empty">
          <div className="empty-title">Rezultatul se activează la chestionar complet</div>
          <div className="small">Progres: {g.nRaspunse} / {g.nTotal}. Continuă completarea.</div>
          <button className="btn btn-primary btn-sm" style={{ marginTop: 10 }}
            onClick={() => setNav({ slug: ch.slug, ecran: "completare" })}>Continuă chestionarul</button>
        </div>
        <ChvIstoricLista ch={ch} st={st} setNav={setNav} />
      </div>
    );
  }
  const reia = () => {
    chvScrie(set, ch.slug, (cur) => ({
      activ: { raspunsuri: {}, inceput: null, finalizat: null },
      istoric: [cur.activ, ...cur.istoric],
    }));
    setNav({ slug: ch.slug, ecran: "completare", arhiva: null });
  };
  return (
    <div className="stack-14">
      <ChvRezultatCorp ch={ch} g={g} finalizat={st.activ.finalizat} />
      <ChvIstoricLista ch={ch} st={st} setNav={setNav} />
      <div className="chv-sect">
        {confirmaReia
          ? <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <span className="small"><b>Sigur reiei chestionarul?</b> Rezultatul curent se arhivează
                în istoricul completărilor și rămâne oricând vizibil acolo.</span>
              <button className="btn btn-primary btn-sm" onClick={reia}>Da, reia</button>
              <button className="btn btn-ghost btn-sm" onClick={() => setConfirmaReia(false)}>Renunță</button>
            </div>
          : <button className="btn btn-ghost btn-sm" onClick={() => setConfirmaReia(true)}>Reia chestionarul</button>}
      </div>
    </div>
  );
}

/* ── istoricul completarilor: lista compacta cu drill-down la rezultatul complet ── */
function ChvIstoricLista({ ch, st, setNav }) {
  const intrari = st.istoric.filter((i) => i.finalizat);
  if (!intrari.length) return null;
  return (
    <div className="chv-sect">
      <h3 className="chv-sect-titlu">Istoricul completărilor</h3>
      <div className="chv-scroll">
        <table className="chv-tabel">
          <thead><tr><th>Finalizat</th><th>Stadiu</th><th>A</th><th>B</th><th>C</th><th></th></tr></thead>
          <tbody>
            {intrari.map((i, idx) => {
              const gi = window.chvScoring.scorGlobal(ch, i.raspunsuri);
              return (
                <tr key={idx}>
                  <td>{i.finalizat}</td>
                  <td><span className={"chv-stadiu st" + gi.stadiu}>{ch.mecanism.stadii[gi.stadiu].eticheta}</span></td>
                  <td>{gi.total.nA}</td><td>{gi.total.nB}</td><td>{gi.total.nC}</td>
                  <td><button className="btn btn-ghost btn-sm"
                    onClick={() => setNav({ slug: ch.slug, ecran: "istoric", arhiva: idx })}>Vezi rezultatul</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ── rezultatul unei completari ARHIVATE (read-only, fara reia) ── */
function ChvArhiva({ ch, store, setNav, arhiva }) {
  const st = chvStarea(store, ch.slug);
  const intrari = st.istoric.filter((i) => i.finalizat);
  const intrare = intrari[arhiva];
  if (!intrare) {
    return (
      <div className="panel empty">
        <div className="empty-title">Completarea căutată nu există în istoric</div>
        <button className="btn btn-ghost btn-sm" style={{ marginTop: 10 }}
          onClick={() => setNav({ slug: ch.slug, ecran: "rezultat", arhiva: null })}>Înapoi la rezultatul curent</button>
      </div>
    );
  }
  const g = window.chvScoring.scorGlobal(ch, intrare.raspunsuri);
  return (
    <div className="stack-14">
      <ChvRezultatCorp ch={ch} g={g} finalizat={intrare.finalizat}
        banner={"din istoric - completarea finalizată " + intrare.finalizat} />
      <ChvIstoricLista ch={ch} st={st} setNav={setNav} />
    </div>
  );
}

/* ── view-ul principal + navigarea in history ── */
function ChvView({ store, set }) {
  const [nav, setNavRaw] = React.useState(() => chvNavDinHash() || { slug: null, ecran: null, arhiva: null });
  const setNav = (n) => {
    setNavRaw(n);
    try {
      const hash = "#chestionare" + (n.slug
        ? "/" + n.slug + "/" + n.ecran + (n.ecran === "istoric" && n.arhiva != null ? "/" + (n.arhiva + 1) : "")
        : "");
      history.pushState({ view: "chestionare", chvNav: n }, "", hash);
    } catch (e) { /* file:// restrictiv - navigarea ramane in state local */ }
  };
  React.useEffect(() => {
    const onPop = (e) => {
      if (e.state && e.state.chvNav) setNavRaw(e.state.chvNav);
      else if (e.state && e.state.view === "chestionare") setNavRaw({ slug: null, ecran: null, arhiva: null });
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  const ch = nav.slug ? chvDeSlug(nav.slug) : null;
  let continut;
  if (ch && nav.ecran === "completare") continut = <ChvCompletare ch={ch} store={store} set={set} setNav={setNav} />;
  else if (ch && nav.ecran === "istoric") continut = <ChvArhiva ch={ch} store={store} setNav={setNav} arhiva={nav.arhiva || 0} />;
  else if (ch && nav.ecran === "rezultat") continut = <ChvRezultat ch={ch} store={store} set={set} setNav={setNav} />;
  else continut = <ChvHub store={store} setNav={setNav} />;
  return (
    <div className="page">
      {ch ? (
        <div style={{ margin: "0 0 10px", display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="btn btn-ghost btn-sm" onClick={() => setNav({ slug: null, ecran: null, arhiva: null })}>
            {"←"} Toate chestionarele
          </button>
          {nav.ecran === "istoric" &&
            <button className="btn btn-ghost btn-sm"
              onClick={() => setNav({ slug: ch.slug, ecran: "rezultat", arhiva: null })}>
              Rezultatul curent
            </button>}
        </div>
      ) : null}
      {continut}
    </div>
  );
}
window.ChvView = ChvView;