/* ── Codul Valorilor Personale - sectiune noua, aparte de credinte/anamneza ──
   Zoomul Petre 24.07 14:00: 7 categorii de valori; participantul alege 3-4 per categorie;
   toate valorile alese, amestecate, dau CODUL VALORIC PERSONAL ("doar ce am selectat eu").
   Datele: valori_data.js (window.PRP_VALORI), generat de valori/parse_valori.py din
   matricea + modelul + dictionarul lui Petre. Tehnicile/terapiile NU intra (decizia lui).
   Navigare: #valori/<categorie> · #valori/<categorie>/<idValoare> · #valori/cod
   (acelasi model history/deep-link ca anamneza). */

const IcValori = (p) => (
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.9-5.2-2.7-5.2 2.7 1-5.9L3.5 9.2l5.9-.9z" />
  </svg>
);
window.IcValori = IcValori;

const VAL_DATE = () => window.PRP_VALORI || { categorii: [], concepte: [] };

/* store.valori = { sel: [id...], plan: { [id]: {campuri} }, codMod: "lista"|"matrice" }
   codMod = matricea CODULUI meu (planul personal) - SINGURA matrice din secțiunea Valori
   (decizia Marian 25.07). Fallback aici, nu migrare in app.jsx: store-urile vechi cad pe "lista". */
function valStarea(store) {
  const v = store.valori || {};
  return { sel: v.sel || [], plan: v.plan || {}, adaugat: v.adaugat || {},
           codMod: v.codMod === "matrice" ? "matrice" : "lista" };
}

/* Scrie un camp din planul unei valori SI retine ziua in care a fost completat prima data.
   Rutinele si angajamentele devin itemi urmariti (window.valItemiPlan), iar fara o data a
   asumarii: conformarea pe 7 zile ii judeca si pe zilele in care nu existau, iar in Planul
   strategic o valoare asumata si nebifata nu devine niciodata rosie (audit 25.07).
   Cheia e "<idValoare>|<camp>", aceeasi forma stabila ca a itemilor din store.log. */
function valScrieCamp(set, id, camp, text) {
  set((s) => {
    const st = valStarea(s);
    const cheie = id + "|" + camp;
    const adaugat = { ...st.adaugat };
    const aveaText = String((st.plan[id] || {})[camp] || "").trim() !== "";
    const areText = String(text || "").trim() !== "";
    if (areText && !aveaText && !adaugat[cheie]) {
      const d = new Date();
      adaugat[cheie] = window.PRP_UTIL ? window.PRP_UTIL.fmtISO(d)
        : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
    }
    return { ...s, valori: { ...s.valori, sel: st.sel, adaugat,
      plan: { ...st.plan, [id]: { ...(st.plan[id] || {}), [camp]: text } } } };
  });
}
function valToateValorile() {
  const rez = [];
  VAL_DATE().categorii.forEach((c) => c.valori.forEach((v) => rez.push({ ...v, cat: c.slug, catNume: c.nume })));
  return rez;
}
function valDupaId(id) { return valToateValorile().find((v) => v.id === id) || null; }

/* campurile planului de implementare per valoare aleasa - limbajul lui Petre
   (PSA Cod Valori: Rutinele/Obiceiurile/Pasiunile cu subtitlurile lui; zoomul: rutine,
   obiceiuri, pasiuni, traditii personale, gestionarea tentatiilor; studiul de caz: recompense) */
const VAL_PLAN_CAMPURI = [
  ["angajament", "Angajamentul meu personal", "Comanda personală: ce îmi asum ferm pentru această valoare"],
  ["rutinaZ", "Rutine zilnice", "Creează structura de implementare - pasul de fiecare zi"],
  ["rutinaS", "Rutine săptămânale", "Verificarea și consolidarea săptămânală"],
  ["rutinaL", "Rutine lunare", "Autoevaluarea profundă, o dată pe lună"],
  ["obiceiuri", "Obiceiurile mele", "Creează automatismele necesare în fixare"],
  ["pasiuni", "Pasiunile mele", "Fixează valorile prin activarea plăcerii"],
  ["traditii", "Tradițiile mele personale", "Tradiții proprii în activarea valorilor"],
  ["tentatii", "Gestionarea tentațiilor", "Mecanismele mele când apare tentația de a mă abate"],
  ["recompense", "Recompensele mele", "Cu ce mă răsplătesc când respect angajamentul"],
];

function valoriExport(store) {
  const { sel, plan } = valStarea(store);
  return {
    valori: {
      selectie: sel.map((id) => {
        const v = valDupaId(id);
        return v ? { id, nume: v.nume, categorie: v.catNume, definitie: v.definitie } : { id };
      }),
      planImplementare: Object.fromEntries(
        sel.filter((id) => plan[id] && Object.values(plan[id]).some((x) => String(x || "").trim()))
           .map((id) => [id, plan[id]])),
    },
  };
}
window.valoriExport = valoriExport;

/* ── navigare ──
   nav.nivel = "categorii" | "valori" (drill-down, cerinta Marian 24.07: click pe o categorie
   INLOCUIESTE bara orizontala cu valorile categoriei; "← Categoriile" revine).
   Nivelul nu intra in hash - la deep-link se deduce: fisa deschisa -> "valori", altfel "categorii". */
function valNavDinHash() {
  const m = (location.hash || "").match(/^#valori\/([a-z-]+)(?:\/([a-z0-9-]+))?$/);
  if (!m) return null;
  if (m[1] === "cod") return { cat: "cod", fisa: null, nivel: "categorii" };
  if (!VAL_DATE().categorii.some((c) => c.slug === m[1])) return null;
  const fisa = m[2] && valDupaId(m[2]) ? m[2] : null;
  return { cat: m[1], fisa, nivel: fisa ? "valori" : "categorii" };
}

/* bara orizontala pe doua niveluri (aceleasi clase .cred-tabs/.cred-tab ca restul aplicatiei):
   nivelul "categorii" = categoriile + Codul meu; nivelul "valori" = valorile categoriei active
   (★ pe cele alese in cod) + intoarcerea la categorii */
function ValTabs({ nav, setNav, store }) {
  const { sel } = valStarea(store);
  const cats = VAL_DATE().categorii;
  if (nav.nivel === "valori" && nav.cat !== "cod") {
    const c = cats.find((x) => x.slug === nav.cat);
    if (c) return (
      <div className="cred-tabs val-tabs-wrap" role="tablist" aria-label={"Valorile din " + c.nume}>
        <button className="cred-tab val-tab-inapoi" title="Înapoi la categoriile de valori"
          onClick={() => setNav({ cat: c.slug, fisa: null, nivel: "categorii" })}>
          {"←"} Categoriile
        </button>
        {c.valori.map((v) => (
          <button key={v.id} role="tab" aria-selected={nav.fisa === v.id}
            className={"cred-tab" + (nav.fisa === v.id ? " activ" : "")}
            title={v.nume + (sel.includes(v.id) ? " - în codul meu" : "")}
            onClick={() => setNav({ cat: c.slug, fisa: v.id, nivel: "valori" })}>
            {sel.includes(v.id) ? "★ " : ""}{v.nume}
          </button>
        ))}
      </div>
    );
  }
  return (
    <div className="cred-tabs" role="tablist" aria-label="Categoriile de valori">
      {cats.map((c) => {
        const scurt = c.nume.replace(/^Valorile\s+/, "");
        const nAles = c.valori.filter((v) => sel.includes(v.id)).length;
        return (
          <button key={c.slug} role="tab" aria-selected={nav.cat === c.slug}
            className={"cred-tab" + (nav.cat === c.slug && nav.nivel !== "valori" ? " activ" : "")}
            title={c.nume + (nAles ? " - " + nAles + " alese" : "") + " - deschide valorile categoriei"}
            onClick={() => setNav({ cat: c.slug, fisa: null, nivel: "valori" })}>
            {scurt}{nAles ? " · " + nAles : ""}
          </button>
        );
      })}
      <button role="tab" aria-selected={nav.cat === "cod"}
        className={"cred-tab" + (nav.cat === "cod" ? " activ" : "")}
        title="Codul Valorilor Personale - doar ce am selectat eu"
        onClick={() => setNav({ cat: "cod", fisa: null, nivel: "categorii" })}>
        Codul meu{sel.length ? " · " + sel.length : ""}
      </button>
    </div>
  );
}

/* butonul de selectie a unei valori in cod */
function ValAlege({ v, store, set, mare }) {
  const { sel } = valStarea(store);
  const aleasa = sel.includes(v.id);
  const toggle = (e) => {
    e.stopPropagation();
    set((s) => {
      const st = valStarea(s);
      const selNou = aleasa ? st.sel.filter((x) => x !== v.id) : [...st.sel, v.id];
      return { ...s, valori: { ...s.valori, sel: selNou, plan: st.plan } };
    });
  };
  return (
    <button className={"val-alege" + (aleasa ? " aleasa" : "")} onClick={toggle}
      title={aleasa ? "Scoate din codul meu valoric" : "Alege în codul meu valoric"}
      style={mare ? { fontSize: "var(--m-fs-3)", padding: "7px 16px" } : null}>
      {aleasa ? "★ În codul meu" : "☆ Aleg valoarea"}
    </button>
  );
}

/* ── ecranul unei categorii: intro + contor + valorile ── */
function ValCategorie({ cat, store, set, setNav }) {
  const c = VAL_DATE().categorii.find((x) => x.slug === cat);
  if (!c) return null;
  const { sel } = valStarea(store);
  const nAles = c.valori.filter((v) => sel.includes(v.id)).length;
  return (
    <div className="stack-14">
      <div className="panel">
        <div className="val-card-top">
          <div>
            <h2 style={{ margin: "0 0 4px", fontSize: "var(--m-fs-6)", color: "var(--m-navy)" }}>{c.nume}</h2>
            <p className="small" style={{ margin: 0, maxWidth: 640 }}>
              Parcurge valorile de mai jos și alege-le pe cele care te definesc cu adevărat -
              recomandat <b>3-4 valori</b> din această categorie. Toate valorile alese, din toate
              categoriile, formează împreună Codul Valorilor Personale.
            </p>
          </div>
          <span className="val-contor">
            Alese: <b>{nAles}</b>
            {nAles > 4 ? <span className="peste">peste recomandarea de 3-4</span> : <span>din 3-4 recomandate</span>}
          </span>
        </div>
      </div>
      <div className="val-grid">
        {c.valori.map((v) => {
          const aleasa = sel.includes(v.id);
          return (
            <div key={v.id} className={"val-card" + (aleasa ? " aleasa" : "")} role="button" tabIndex={0}
              onClick={() => setNav({ cat, fisa: v.id, nivel: "valori" })}
              onKeyDown={(e) => { if (e.key === "Enter") setNav({ cat, fisa: v.id, nivel: "valori" }); }}>
              <div className="val-card-top">
                <h3 className="val-card-nume">{v.nume}</h3>
                <ValAlege v={{ ...v, id: v.id }} store={store} set={set} />
              </div>
              <p className="val-card-def">{v.definitie}</p>
              {!v.completa && <span className="val-badge-lucru" title="Fișa de instrument este în lucru la Dr. Petre; conținutul aprofundat este disponibil">Fișă în completare la Dr. Petre</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* o sectiune-lista din fisa */
function ValSect({ titlu, itemi, intro, mantre }) {
  if ((!itemi || !itemi.length) && !intro) return null;
  return (
    <div className="val-sect">
      <h3 className="val-sect-titlu">{titlu}</h3>
      {intro ? <p className="val-intro">{intro}</p> : null}
      {mantre
        ? (itemi || []).map((m, i) => <div key={i} className="val-mantra">{m}</div>)
        : <ul className="val-lista">{(itemi || []).map((x, i) => <li key={i}>{x}</li>)}</ul>}
    </div>
  );
}
function ValDaNu({ titlu, da, nu, etDa, etNu }) {
  if ((!da || !da.length) && (!nu || !nu.length)) return null;
  return (
    <div className="val-sect">
      <h3 className="val-sect-titlu">{titlu}</h3>
      <div className="val-danu">
        <div className="val-col da">
          <h4>{etDa}</h4>
          <ul className="val-lista">{(da || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
        </div>
        <div className="val-col nu">
          <h4>{etNu}</h4>
          <ul className="val-lista">{(nu || []).map((x, i) => <li key={i}>{x}</li>)}</ul>
        </div>
      </div>
    </div>
  );
}

/* ── fisa completa a unei valori (sectiunile in ordinea dictata de Petre in zoom) ── */
function ValFisa({ id, store, set, setNav }) {
  const v = valDupaId(id);
  if (!v) return null;
  const f = v.fisa || {};
  const a = v.aprofundare || {};
  return (
    <div className="stack-14">
      <div className="panel">
        {/* fara definitie aici (Marian 24.07 dupa zoom 5): notiunea traieste DOAR pe prima
            pagina, pe cardurile categoriei; fisa incepe direct cu lista lui Petre */}
        <div className="val-card-top">
          <div>
            <div className="small" style={{ color: "var(--m-muted)", marginBottom: 2 }}>{v.catNume}</div>
            <h2 style={{ margin: 0, fontSize: "var(--m-fs-7)", color: "var(--m-navy)" }}>{v.nume}</h2>
          </div>
          <ValAlege v={v} store={store} set={set} mare />
        </div>
        {!v.completa &&
          <p className="small" style={{ margin: "10px 0 0", color: "var(--m-muted)" }}>
            Fișa de instrument a acestei valori este în completare la Dr. Petre - mai jos este conținutul aprofundat deja disponibil.
          </p>}
      </div>

      {/* Sectiunile fisei, in ordinea coloanelor din Matricea de Activare: trasaturile,
          comportamentele, pozitive/negative, reperele DA/NU (din Modelul complet), actiunile,
          mantrele, instrumentele de control, concluzia.
          SCOASE din afisare (datele rămân in valori_data.js): **modul de impactare** si
          **tehnicile/terapiile** - Marian 25.07, dupa ce fusesera aduse in aceeasi sesiune pe
          „totul din acest excel trebuie sa ajunga in platforma". Nici definitia nu e aici:
          notiunea traieste DOAR pe cardurile primei pagini.
          Rămân afara si campurile din Modelul complet care nu-s in acest Excel: scopul,
          avantajele, beneficiile, exemplele, parghiile. */}
      {v.trasaturiDetalii && v.trasaturiDetalii.length ? (
        <div className="val-sect">
          <h3 className="val-sect-titlu">Trăsăturile de caracter ale valorii</h3>
          {v.trasaturiDetalii.map((t, i) => (
            <details key={i} className="val-tras">
              <summary>{t.nume}</summary>
              <div className="val-tras-corp">
                {t.definitie ? <p style={{ margin: "0 0 4px" }}>{t.definitie}</p> : null}
                {(t.forme || []).map((fo, j) => (
                  <p key={j} className="forma"><b>{fo.nume}</b>{fo.descriere ? " - " + fo.descriere : ""}</p>
                ))}
              </div>
            </details>
          ))}
        </div>
      ) : <ValSect titlu="Trăsăturile de caracter ale valorii" itemi={f.trasaturi || a.trasaturi} />}
      <ValSect titlu="Comportamentele și formele de manifestare" itemi={f.comportamente || a.comportamente} />
      <ValDaNu titlu="Comportamentele pozitive și negative" etDa="Ce trebuie să fac" etNu="Ce nu trebuie să fac"
        da={f.pozitive} nu={f.negative} />
      <ValDaNu titlu="Repere" etDa="Așa DA" etNu="Așa NU" da={a.repereDa} nu={a.repereNu} />
      <ValSect titlu="Acțiunile necesare în activarea valorii" itemi={f.actiuni || a.actiuni} />
      <ValSect titlu="Mantrele" itemi={(f.mantre && f.mantre.length ? f.mantre : a.mantre)} mantre />
      <ValSect titlu="Instrumentele de control" itemi={f.control} />
      {f.concluzie ? (
        <div className="val-sect">
          <h3 className="val-sect-titlu">Concluzia</h3>
          <p className="val-concluzie">{f.concluzie}</p>
        </div>
      ) : null}
    </div>
  );
}

/* ── Codul meu valoric: valorile alese + planul de implementare personal ── */
function ValPlanCamp({ id, camp, eticheta, hint, store, set }) {
  const { plan } = valStarea(store);
  const val = (plan[id] && plan[id][camp]) || "";
  const onChange = (e) => valScrieCamp(set, id, camp, e.target.value);
  return (
    <div className="val-plan-camp">
      <label>{eticheta}</label>
      <span className="hint">{hint}</span>
      <textarea value={val} onChange={onChange} placeholder="Scrie aici…" />
    </div>
  );
}

/* Matricea codului valoric - proiectia tabelara a ACELUIASI plan (spec 24.07, cerinta
   Marian "nu toti lucreaza in linie"): valorile pe randuri (benzi pe categorii), cele
   9 campuri pe coloane cu antetul pe 2 randuri ca in PSA-ul lui Petre (grupul Rutinele
   mele = Z/S/L), editare direct in celule. Pattern si clase din MatriceCredinta (mat-*
   din index.html, refolosite); latimile proprii = val-mat-* in valori.css. */
function ValCodMatrice({ cate, store, set, setNav }) {
  const { plan } = valStarea(store);
  const setCamp = (id, camp) => (ev) => valScrieCamp(set, id, camp, ev.target.value);
  const camp = Object.fromEntries(VAL_PLAN_CAMPURI.map(([c, et, hint]) => [c, { et, hint }]));
  const subRutine = [["rutinaZ", "Zilnice"], ["rutinaS", "Săptămânale"], ["rutinaL", "Lunare"]];
  const simple2 = ["obiceiuri", "pasiuni", "traditii", "tentatii", "recompense"];
  return (
    <div className="panel">
      <p className="sect-label">Matricea codului valoric</p>
      <div className="mat-scroll">
        <table className="tbl mat-tbl val-mat-tbl">
          <thead>
            <tr>
              <th rowSpan="2" className="mat-sticky val-mat-c1 mat-edge">Valoarea</th>
              <th rowSpan="2" title={camp.angajament.hint}>{camp.angajament.et}</th>
              <th colSpan="3" className="mat-group" title="Rutinele zilnice, săptămânale și lunare">Rutinele mele</th>
              {simple2.map((c) => <th key={c} rowSpan="2" title={camp[c].hint}>{camp[c].et}</th>)}
            </tr>
            <tr>
              {subRutine.map(([c, et]) => <th key={c} title={camp[c].hint}>{et}</th>)}
            </tr>
          </thead>
          <tbody>
            {cate.map((c) => (
              <React.Fragment key={c.slug}>
                <tr className="mat-aria-band">
                  <td colSpan="10"><span className="mat-aria-inner">{c.nume} · {c.alese.length} {c.alese.length === 1 ? "valoare" : "valori"}</span></td>
                </tr>
                {c.alese.map((v, idx) => (
                  <tr key={v.id} className={idx % 2 === 1 ? "mat-alt" : undefined}>
                    <td className="mat-sticky val-mat-c1 mat-edge">
                      {/* c.slug, nu v.cat: obiectele din c.alese nu poarta campul cat (doar valToateValorile il adauga) */}
                      <button className="val-mat-nume" title={String(v.definitie).split("\n")[0] + " - deschide fișa"}
                        onClick={() => setNav({ cat: c.slug, fisa: v.id, nivel: "valori" })}>{v.nume}</button>
                    </td>
                    {VAL_PLAN_CAMPURI.map(([cKey]) => (
                      <td key={cKey} className="mat-in">
                        <textarea className="input" rows="2" placeholder="Scrie aici…"
                          value={(plan[v.id] && plan[v.id][cKey]) || ""} onChange={setCamp(v.id, cKey)} />
                      </td>
                    ))}
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ValCodul({ store, set, setNav }) {
  const { sel, codMod } = valStarea(store);
  const cate = VAL_DATE().categorii
    .map((c) => ({ ...c, alese: c.valori.filter((v) => sel.includes(v.id)) }))
    .filter((c) => c.alese.length);
  if (!sel.length) {
    return (
      <div className="panel empty">
        <div className="empty-title">Codul tău valoric nu are încă nicio valoare</div>
        <div className="small" style={{ maxWidth: 480 }}>
          Parcurge categoriile din bara de sus și alege 3-4 valori din fiecare - cele care te
          definesc cu adevărat. Toate valorile selectate se adună aici, în Codul Valorilor
          Personale: doar ce ai selectat tu, împreună cu planul tău de implementare.
        </div>
      </div>
    );
  }
  return (
    <div className="stack-14">
      <div className="panel">
        <h2 style={{ margin: "0 0 4px", fontSize: "var(--m-fs-6)", color: "var(--m-navy)" }}>
          Codul Valorilor Personale{store.consola.nume.trim() ? " - " + store.consola.nume.trim() : ""}
        </h2>
        <p className="small" style={{ margin: 0, maxWidth: 680 }}>
          {sel.length} {sel.length === 1 ? "valoare aleasă" : "valori alese"} din {cate.length} {cate.length === 1 ? "categorie" : "categorii"} -
          doar ce ai selectat tu. Pentru fiecare valoare, definește-ți planul de implementare:
          angajamentul, rutinele, obiceiurile, pasiunile, tradițiile personale, gestionarea
          tentațiilor și recompensele.
        </p>
      </div>
      {/* toggle Lista/Matrice - acelasi pattern mod-bar/mod-tabs ca la matricea credintei */}
      <div className="mod-bar">
        <div className="mod-tabs" role="tablist" aria-label="Mod de afișare">
          {[["lista", "Listă"], ["matrice", "Matrice"]].map(([m, eticheta]) => (
            <button key={m} role="tab" aria-selected={codMod === m}
              className={"mod-tab" + (codMod === m ? " activ" : "")}
              onClick={() => set((s) => ({ ...s, valori: { ...s.valori, codMod: m } }))}>
              {eticheta}
            </button>
          ))}
        </div>
      </div>
      {codMod === "matrice" ? (
        <ValCodMatrice cate={cate} store={store} set={set} setNav={setNav} />
      ) : cate.map((c) => (
        <React.Fragment key={c.slug}>
          <div className="val-sect" style={{ padding: "10px 16px", background: "var(--m-navy)", color: "#fff", border: 0 }}>
            <b style={{ fontSize: "var(--m-fs-4)" }}>{c.nume}</b>
            <span style={{ opacity: .85, marginLeft: 8, fontSize: "var(--m-fs-2)" }}>{c.alese.length} {c.alese.length === 1 ? "valoare" : "valori"}</span>
          </div>
          {c.alese.map((v) => (
            <div key={v.id} className="val-sect">
              <div className="val-card-top" style={{ marginBottom: 10 }}>
                <div>
                  {/* fara rezumatul definitiei (notiunea = doar prima pagina, Marian 24.07) */}
                  <h3 style={{ margin: 0, fontSize: "var(--m-fs-5)", color: "var(--m-navy)" }}>{v.nume}</h3>
                </div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
                  <button className="btn btn-ghost btn-sm" onClick={() => setNav({ cat: v.cat || (valDupaId(v.id) || {}).cat, fisa: v.id, nivel: "valori" })}>Deschide fișa</button>
                  <ValAlege v={v} store={store} set={set} />
                </div>
              </div>
              <div className="val-plan-grid">
                {VAL_PLAN_CAMPURI.map(([camp, et, hint]) => (
                  <ValPlanCamp key={camp} id={v.id} camp={camp} eticheta={et} hint={hint} store={store} set={set} />
                ))}
              </div>
            </div>
          ))}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ── view-ul principal ── */
function ValoriView({ store, set }) {
  const [nav, setNavRaw] = React.useState(() => valNavDinHash() || { cat: (VAL_DATE().categorii[0] || {}).slug || "morale", fisa: null, nivel: "categorii" });
  const setNav = (n) => {
    setNavRaw(n);
    try {
      const hash = "#valori/" + (n.cat === "cod" ? "cod" : n.cat + (n.fisa ? "/" + n.fisa : ""));
      history.pushState({ view: "valori", valNav: n }, "", hash);
    } catch (e) { /* file:// restrictiv - navigarea ramane in state local */ }
  };
  React.useEffect(() => {
    const onPop = (e) => {
      if (e.state && e.state.valNav) { const n = e.state.valNav; setNavRaw(n.nivel ? n : { ...n, nivel: n.fisa ? "valori" : "categorii" }); }
      else if (e.state && e.state.view === "valori") setNavRaw({ cat: (VAL_DATE().categorii[0] || {}).slug, fisa: null, nivel: "categorii" });
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  let continut;
  if (nav.cat === "cod") continut = <ValCodul store={store} set={set} setNav={setNav} />;
  else if (nav.fisa) continut = <ValFisa id={nav.fisa} store={store} set={set} setNav={setNav} />;
  else continut = <ValCategorie cat={nav.cat} store={store} set={set} setNav={setNav} />;

  return (
    <div className="page">
      <ValTabs nav={nav} setNav={setNav} store={store} />
      {nav.fisa ? (
        <div style={{ margin: "0 0 10px" }}>
          <button className="btn btn-ghost btn-sm" onClick={() => setNav({ cat: nav.cat, fisa: null, nivel: "valori" })}>
            {"←"} Înapoi la {(VAL_DATE().categorii.find((c) => c.slug === nav.cat) || {}).nume || "categorie"}
          </button>
        </div>
      ) : null}
      {continut}
    </div>
  );
}
window.ValoriView = ValoriView;

/* ── Dictionarul valorilor (cerinta Marian 24.07 seara, dupa zoom 5) ──
   Pagina Dictionar e impartita in taburi Credinte / Valori (split-ul in app.jsx);
   partea de valori = proiectie a datelor DEJA parse-uite (PRP_VALORI): conceptele-umbrela
   ("Valorile Omului", "Trasaturile de Caracter ale Valorilor") + definitiile tuturor
   valorilor, pe categorii. O singura sursa de adevar - fara dublarea definitiilor. */
function DictionarValori() {
  const [q, setQ] = React.useState("");
  const randuri = React.useMemo(() => {
    const d = VAL_DATE();
    const rez = [];
    let nr = 0;
    (d.concepte || []).forEach((c) =>
      rez.push({ nr: ++nr, grup: "Concepte fundamentale", termen: c.nume, definitie: c.definitie }));
    (d.categorii || []).forEach((c) =>
      c.valori.forEach((v) => rez.push({ nr: ++nr, grup: c.nume, termen: v.nume, definitie: v.definitie })));
    return rez;
  }, []);
  const t = q.trim().toLowerCase();
  const list = t
    ? randuri.filter((r) => r.termen.toLowerCase().includes(t) || String(r.definitie).toLowerCase().includes(t))
    : randuri;
  const grupuri = [];
  list.forEach((r) => {
    const g = grupuri[grupuri.length - 1];
    if (g && g.nume === r.grup) g.randuri.push(r);
    else grupuri.push({ nume: r.grup, randuri: [r] });
  });
  return (
    <React.Fragment>
      <div className="row" style={{ marginBottom: 14, maxWidth: 420 }}>
        <input className="input grow" placeholder="Caută o valoare sau un concept..."
          value={q} onChange={(e) => setQ(e.target.value)} />
      </div>
      <div className="panel" style={{ overflowX: "auto" }}>
        <p className="sect-label">Dicționarul Valorilor Personale - {list.length} {list.length === 1 ? "termen" : "termeni"}</p>
        {list.length > 0 ? (
          <table className="tbl dict-tbl" style={{ minWidth: 640 }}>
            <thead>
              <tr>
                <th style={{ width: 34 }}>#</th>
                <th style={{ width: 230 }}>Termenul</th>
                <th>Definiția</th>
              </tr>
            </thead>
            <tbody>
              {grupuri.map((g) => (
                <React.Fragment key={g.nume}>
                  <tr className="mat-aria-band"><td colSpan="3"><span className="mat-aria-inner">{g.nume}</span></td></tr>
                  {g.randuri.map((r) => (
                    <tr key={r.nr}>
                      <td className="dict-nr">{r.nr}</td>
                      <td className="dict-termen">{r.termen}</td>
                      <td className="dict-def-cell" style={{ whiteSpace: "pre-line" }}>{r.definitie}</td>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="empty">
            <div className="empty-title">Termenul nu există în dicționarul valorilor</div>
          </div>
        )}
      </div>
    </React.Fragment>
  );
}
window.DictionarValori = DictionarValori;

/* ── Itemii urmaribili ai valorilor (contractul pt view-urile hibride, spec 24.07) ──
   Proiectia campurilor cu frecventa naturala din Codul meu: rutinaZ/S/L + angajamentul.
   UN item per camp per valoare aleasa - cheia "val|<id>|<camp>" ramane STABILA cand
   participantul isi editeaza textul (bifele din store.log supravietuiesc editarii). */
window.valItemiPlan = function valItemiPlan(store) {
  const { sel, plan, adaugat } = valStarea(store);
  /* itemii scrisi INAINTE de a exista evidenta zilei (store-uri vechi) nu au data proprie:
     ii ducem la data de start a procesului, adica se judeca de la inceput, nu de azi */
  const dinStart = (store.consola && store.consola.dataStart) || "";
  const CAMPURI = [
    ["rutinaZ", "Zilnic", "Rutina zilnică"],
    ["rutinaS", "Săptămânal", "Rutina săptămânală"],
    ["rutinaL", "Lunar", "Rutina lunară"],
    ["angajament", "Angajament (la nevoie)", "Angajamentul"],
  ];
  const rez = [];
  sel.forEach((id) => {
    const v = valDupaId(id);
    if (!v) return;
    CAMPURI.forEach(([camp, frecventa, eticheta]) => {
      const text = String((plan[id] || {})[camp] || "").trim();
      if (!text) return;
      rez.push({ key: "val|" + id + "|" + camp, frecventa, eticheta, text,
                 adaugat: adaugat[id + "|" + camp] || dinStart,
                 valoare: { id, nume: v.nume, cat: v.cat } });
    });
  });
  return rez;
};