// Valdebebas Life — Barómetro de bienestar (Receta Social), seguimiento trimestral y baja de cuenta
const VB_BARO_EVERY = 90 * 86400000;
const VB_BARO_Q = [
  { k: "frecuencia", n: "Frecuencia", q: "En el último mes, ¿has hablado de verdad con alguien cercano?", h: "Una conversación que no sea solo para organizaros, en persona o por teléfono.", o: ["Nunca", "A veces", "A menudo", "Casi siempre"], tip: ["event", "Apúntate a una quedada de tu círculo", "comunidad"] },
  { k: "variedad", n: "Variedad", q: "¿Con cuántos grupos distintos de personas te relacionas?", h: "Familia, amigos, vecinos, compañeros, aficiones…", o: ["Uno o ninguno", "Dos", "Tres", "Cuatro o más"], tip: ["groups", "Únete a un círculo distinto a los tuyos", "comunidad"] },
  { k: "profundidad", n: "Profundidad", q: "¿Tienes a alguien con quien hablar de lo que de verdad te importa?", h: "Alguien que te escuche y te entienda.", o: ["Nadie", "Alguien, pero me cuesta", "Una persona", "Varias personas"], tip: ["handshake", "Apúntate a un moai, tu grupo de confianza", "comunidad"] },
  { k: "sentido", n: "Sentido compartido", q: "¿Formas parte de algún grupo o actividad que se repita?", h: "Un equipo, un club, un voluntariado, una quedada fija…", o: ["No", "Lo intento a veces", "Sí, de vez en cuando", "Sí, con regularidad"], tip: ["repeat", "Busca una quedada fija en tu círculo", "comunidad"] },
  { k: "contribucion", n: "Contribución", q: "En el último mes, ¿has ayudado a alguien de tu entorno?", h: "Un favor, un recado, escuchar a alguien…", o: ["Nunca", "Una vez", "Varias veces", "A menudo"], tip: ["volunteer_activism", "Responde a un vecino que pide ayuda en el tablón", "tablon"] },
  { k: "compania", n: "Compañía", q: "¿Con qué frecuencia echas en falta compañía?", h: "Sin juzgarte: es solo para saber de dónde partimos.", o: ["Casi siempre", "A menudo", "A veces", "Casi nunca"], tip: ["diversity_1", "Un moai puede ayudarte a no sentirte solo", "comunidad"] },
];
const VB_BARO_CHANGE = { q: "Desde que usas Valdebebas Life, tu vida social está…", o: ["Mucho peor", "Algo peor", "Igual", "Algo mejor", "Mucho mejor"] };
const VB_EXIT = ["No tengo tiempo ahora", "No encontré planes que me interesen", "No he notado que me ayude", "Ya tengo la vida social que quiero", "Otro motivo"];
const baroLevel = s => s >= 13 ? ["Receta cumplida", "green"] : s >= 7 ? ["Receta incompleta", "lime"] : ["Receta por empezar", "sky"];
const nutLabel = v => ["Por empezar", "A medias", "Bien", "Muy bien"][v];
const baroDue = b => !b || !b.entries.length || Date.now() - b.entries[b.entries.length - 1].ts > VB_BARO_EVERY;
const baroNext = b => b && b.entries.length ? b.entries[b.entries.length - 1].ts + VB_BARO_EVERY : Date.now();

function BaroResult({ e, prev, go, onClose }) {
  const [lvl, tone] = baroLevel(e.score);
  const weak = VB_BARO_Q.map((q, i) => ({ q, v: e.answers[i] })).filter(x => x.v <= 1).sort((a, b) => a.v - b.v).slice(0, 2);
  return (
    <div className="baro-res">
      <div className={"baro-score " + tone}>
        <small>Tu Receta Social</small>
        <b>{e.score}<span> de 18</span></b>
        <span className="baro-lvl">{lvl}</span>
        {prev && <span className="baro-diff">{e.score > prev.score ? "+" + (e.score - prev.score) + " desde el último barómetro" : e.score === prev.score ? "Igual que el último barómetro" : (e.score - prev.score) + " desde el último barómetro"}</span>}
      </div>
      <div className="nuts">{VB_BARO_Q.slice(0, 5).map((q, i) => <div key={q.k} className="nut"><span>{q.n}</span><i className={"lv" + e.answers[i]}><em style={{ width: ((e.answers[i] + 1) / 4 * 100) + "%" }}></em></i><b>{nutLabel(e.answers[i])}</b></div>)}</div>
      {weak.length > 0 && <div className="baro-tips"><h4>Te proponemos</h4>{weak.map(({ q }) => <button key={q.k} className="news-mini" onClick={() => { onClose(); go(q.tip[2]); }}><span className="ico green"><Ic n={q.tip[0]} /></span><span><b>{q.tip[1]}</b><small>Nutre: {q.n}</small></span></button>)}</div>}
      <p className="baro-note">Herramienta de bienestar, no es un diagnóstico. Si lo estás pasando mal, llama al <b>024</b> (gratuito, 24 h). Emergencias: <b>112</b>.</p>
    </div>
  );
}

function Barometer({ state, onClose, baro, setBaro, go }) {
  const kind = state && state.kind;
  const followUp = kind === "seguimiento";
  const total = VB_BARO_Q.length + (followUp ? 1 : 0);
  const [step, setStep] = useState(0);
  const [ans, setAns] = useState([]);
  const [phase, setPhase] = useState("intro");
  const [entry, setEntry] = useState(null);
  useEffect(() => { if (state) { setStep(0); setAns([]); setEntry(null); setPhase(followUp ? "q" : "intro"); } }, [state]);
  if (!state) return null;
  const me = state.email;
  const b = baro[me] || { consent: null, entries: [] };
  const prev = b.entries[b.entries.length - 1];
  const finish = a => {
    const e = { ts: Date.now(), kind, answers: a.slice(0, 6), score: a.slice(0, 6).reduce((s, v) => s + v, 0), change: followUp ? a[6] : null };
    setEntry(e);
    setBaro(x => { const cur = x[me] || { consent: null, entries: [] }; return { ...x, [me]: { ...cur, entries: [...cur.entries, e] } }; });
    setPhase(b.consent === null ? "consent" : "res");
  };
  const pick = v => { const a = [...ans]; a[step] = v; setAns(a); if (step + 1 < total) setTimeout(() => setStep(step + 1), 160); else finish(a); };
  const setConsent = v => { setBaro(x => ({ ...x, [me]: { ...(x[me] || { entries: [] }), consent: v } })); setPhase("res"); };
  const isChange = followUp && step === 6;
  const Q = isChange ? null : VB_BARO_Q[step];
  const opts = isChange ? VB_BARO_CHANGE.o : Q.o;
  return (
    <Modal open onClose={onClose} title={phase === "res" ? "Tu resultado" : phase === "consent" ? "Tu barrio mejora con tus respuestas" : followUp ? "Tu barómetro trimestral" : "Barómetro de inicio"}
      sub={phase === "intro" ? "6 preguntas, menos de 1 minuto. Así sabremos de dónde partes y podrás ver cómo cambia." : phase === "q" ? "Pregunta " + (step + 1) + " de " + total : null}
      footer={phase === "intro" ? <><button className="btn ghost" onClick={onClose}>Ahora no</button><button className="btn" onClick={() => setPhase("q")}>Empezar<Ic n="arrow_forward" /></button></>
        : phase === "q" ? <><button className="btn ghost" disabled={step === 0} onClick={() => setStep(step - 1)}><Ic n="arrow_back" />Atrás</button><span className="baro-hint">Un toque y pasa sola</span></>
        : phase === "consent" ? <><button className="btn ghost" onClick={() => setConsent(false)}>Ahora no</button><button className="btn" onClick={() => setConsent(true)}><Ic n="check" />Sí, sumo mis respuestas</button></>
        : <><button className="btn ghost" onClick={() => { onClose(); go("comunidad"); }}>Ver planes del barrio</button><button className="btn" onClick={onClose}>Listo</button></>}>
      {phase === "intro" && <div className="baro-intro">
        <div className="baro-nuts">{VB_BARO_Q.slice(0, 5).map(q => <span key={q.k}>{q.n}</span>)}</div>
        <p>Medimos tu <b>Receta Social</b>: los cinco ingredientes de una vida social sana. Cada 3 meses te haremos las mismas preguntas para ver tu evolución.</p>
        <p className="baro-note">Tus respuestas solo las ves tú. Herramienta de bienestar, no es un diagnóstico.</p>
      </div>}
      {phase === "q" && <div className="baro-q">
        <div className="baro-prog"><i style={{ width: ((step + 1) / total * 100) + "%" }}></i></div>
        <div className="eyebrow">{isChange ? "Cómo has cambiado" : Q.n === "Compañía" ? "Cómo te sientes" : "Ingrediente: " + Q.n}</div>
        <h3>{isChange ? VB_BARO_CHANGE.q : Q.q}</h3>
        {!isChange && <p>{Q.h}</p>}
        <div className="baro-opts">{opts.map((o, i) => <button key={o} className={ans[step] === i ? "on" : ""} onClick={() => pick(i)}>{o}</button>)}</div>
      </div>}
      {phase === "consent" && <div className="baro-consent">
        <p>Valdebebas Life es gratis y forma parte de un estudio de la Asociación Española TWC sobre bienestar en comunidad. Si sumas tus respuestas, sabremos qué ayuda de verdad al barrio.</p>
        <ul><li><Ic n="lock" />Nadie ve tus respuestas: solo cifras anónimas de todo el barrio.</li><li><Ic n="insights" />Se usan para estudios sobre bienestar y la memoria de actividades.</li><li><Ic n="toggle_off" />Puedes dejar de sumar cuando quieras desde «Mi barómetro».</li></ul>
        <p className="baro-note">Es voluntario y no cambia nada de lo que puedes hacer en la web.</p>
      </div>}
      {phase === "res" && entry && <BaroResult e={entry} prev={followUp ? prev : null} go={go} onClose={onClose} />}
    </Modal>
  );
}

function MyBarometer({ open, onClose, email, baro, setBaro, onStart }) {
  if (!open) return null;
  const b = baro[email] || { consent: null, entries: [] };
  const last = b.entries[b.entries.length - 1];
  const first = b.entries[0];
  const due = baroDue(b);
  const toggle = () => setBaro(x => ({ ...x, [email]: { ...b, consent: !b.consent } }));
  return (
    <Modal open onClose={onClose} wide title="Mi barómetro" sub="Tu evolución de la Receta Social. Solo la ves tú."
      footer={<><button className="btn ghost" onClick={onClose}>Cerrar</button>{due && <button className="btn" onClick={onStart}><Ic n="play_arrow" />{b.entries.length ? "Hacer el barómetro trimestral" : "Hacer el barómetro"}</button>}</>}>
      {!b.entries.length ? <div className="empty" style={{ padding: 24 }}><Ic n="monitoring" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>Aún no has hecho el barómetro</b><p>6 preguntas, menos de 1 minuto.</p></div> : <>
        <div className="evo">{b.entries.map((e, i) => <div key={e.ts} className="evo-c"><span className="evo-v">{e.score}</span><i style={{ height: (e.score / 18 * 100) + "%" }} className={baroLevel(e.score)[1]}></i><small>{i === 0 ? "Inicio" : new Date(e.ts).toLocaleDateString("es-ES", { month: "short", year: "2-digit" })}</small></div>)}</div>
        <div className="evo-sum">
          <div><small>Ahora</small><b>{last.score} de 18 · {baroLevel(last.score)[0]}</b></div>
          {b.entries.length > 1 && <div><small>Desde el inicio</small><b>{last.score - first.score >= 0 ? "+" : ""}{last.score - first.score} puntos</b></div>}
          {last.change !== null && last.change !== undefined && <div><small>Tu vida social</small><b>{VB_BARO_CHANGE.o[last.change]}</b></div>}
          <div><small>Próximo barómetro</small><b>{due ? "Disponible ahora" : fdate(baroNext(b))}</b></div>
        </div>
        <div className="nuts">{VB_BARO_Q.slice(0, 5).map((q, i) => <div key={q.k} className="nut"><span>{q.n}</span><i className={"lv" + last.answers[i]}><em style={{ width: ((last.answers[i] + 1) / 4 * 100) + "%" }}></em></i><b>{nutLabel(last.answers[i])}</b></div>)}</div>
      </>}
      <label className="check" style={{ marginTop: 8 }}><input type="checkbox" checked={!!b.consent} onChange={toggle} />Sumar mis respuestas, de forma anónima, a los estudios sobre bienestar del barrio.</label>
      <p className="baro-note">Herramienta de bienestar, no es un diagnóstico. Si lo estás pasando mal, llama al <b>024</b> (gratuito, 24 h).</p>
    </Modal>
  );
}

function BaroBanner({ onStart, first }) {
  return (
    <div className="wrap"><div className="baro-banner">
      <span className="ico green"><Ic n="monitoring" /></span>
      <span><b>{first ? "Haz tu barómetro de inicio" : "Tu barómetro trimestral está listo"}</b><small>{first ? "6 preguntas para saber de dónde partes." : "Menos de 1 minuto para ver cómo has cambiado."}</small></span>
      <button className="btn sm" onClick={onStart}>Empezar</button>
    </div></div>
  );
}

function DeleteAccount({ open, onClose, onConfirm }) {
  const [r, setR] = useState(null);
  useEffect(() => { if (open) setR(null); }, [open]);
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title="Antes de irte, una sola pregunta" sub="Nos ayuda a mejorar para los vecinos que vengan después. Es opcional y anónima."
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button className="btn danger" onClick={() => onConfirm(r)}><Ic n="delete" />Borrar mi cuenta y mis datos</button></>}>
      <div className="baro-opts">{VB_EXIT.map((o, i) => <button key={o} className={r === i ? "on" : ""} onClick={() => setR(r === i ? null : i)}>{o}</button>)}</div>
      <p className="baro-note">Se borrarán tu cuenta, tus anuncios, propuestas, quedadas, votos y respuestas al barómetro. Esta acción no se puede deshacer.</p>
    </Modal>
  );
}

Object.assign(window, { Barometer, MyBarometer, BaroBanner, DeleteAccount, baroDue, VB_EXIT });