// CardioFit — Interactive risk curve dataviz (lifetime cardiovascular risk)
// Two scenarios: "Conventional" path vs "Stratified prevention" path.
// Slider controls current age; tooltip on hover.

function RiskDataviz() {
  const [age, setAge] = React.useState(48);
  const [hoverIdx, setHoverIdx] = React.useState(null);
  const [scenario, setScenario] = React.useState("compare"); // compare | conventional | stratified

  // Build curves: x = age (30..85), y = 10-yr ASCVD-like risk %
  const minAge = 30;
  const maxAge = 85;
  const points = [];
  for (let a = minAge; a <= maxAge; a++) {
    // conventional: gentle then steep growth
    const conv = Math.max(0, 0.5 + 0.18 * (a - 30) + 0.022 * Math.pow(Math.max(0, a - 45), 1.85));
    // stratified: pulled back (acts earlier on ApoB, BP, metabolic)
    const strat = Math.max(0, 0.4 + 0.10 * (a - 30) + 0.010 * Math.pow(Math.max(0, a - 50), 1.78));
    points.push({ age: a, conv: Math.min(conv, 60), strat: Math.min(strat, 60) });
  }

  const W = 720;
  const H = 360;
  const padL = 56, padR = 24, padT = 28, padB = 44;
  const xScale = (a) => padL + ((a - minAge) / (maxAge - minAge)) * (W - padL - padR);
  const yMax = 60;
  const yScale = (v) => padT + (1 - v / yMax) * (H - padT - padB);

  const lineConv = points.map(p => `${xScale(p.age)},${yScale(p.conv)}`).join(" ");
  const areaConv = `M ${xScale(minAge)} ${yScale(0)} L ` + lineConv + ` L ${xScale(maxAge)} ${yScale(0)} Z`;
  const lineStrat = points.map(p => `${xScale(p.age)},${yScale(p.strat)}`).join(" ");
  const areaStrat = `M ${xScale(minAge)} ${yScale(0)} L ` + lineStrat + ` L ${xScale(maxAge)} ${yScale(0)} Z`;

  const showConv = scenario !== "stratified";
  const showStrat = scenario !== "conventional";

  const ageData = points[Math.max(0, age - minAge)];
  const ageX = xScale(age);
  const delta = ageData.conv - ageData.strat;

  const onSvgMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * W;
    if (x < padL || x > W - padR) { setHoverIdx(null); return; }
    const a = Math.round(minAge + ((x - padL) / (W - padL - padR)) * (maxAge - minAge));
    setHoverIdx(a);
  };

  const xTicks = [30, 40, 50, 60, 70, 80];
  const yTicks = [0, 15, 30, 45, 60];

  const sliderPct = ((age - minAge) / (maxAge - minAge)) * 100;

  return (
    <div className="dataviz" id="dataviz">
      <div className="container">
        <div className="dataviz-shell reveal">
          <div className="dataviz-top">
            <span className="eyebrow">Visualização · Risco cardiovascular</span>
            <h2 className="section-title section-title-light">Onde a curva de risco é construída — e onde ela ainda pode ser dobrada.</h2>
            <p className="section-copy">Risco cardiovascular não cresce linear no tempo. Há janelas em que conduta mudada cedo separa duas trajetórias. A leitura aqui é direcional, não diagnóstica.</p>
          </div>

          <div className="dataviz-controls" role="tablist" aria-label="Cenários">
            <button className="dataviz-pill" aria-pressed={scenario === "compare"} onClick={() => setScenario("compare")}>Comparativo</button>
            <button className="dataviz-pill" aria-pressed={scenario === "conventional"} onClick={() => setScenario("conventional")}>Trajetória convencional</button>
            <button className="dataviz-pill" aria-pressed={scenario === "stratified"} onClick={() => setScenario("stratified")}>Prevenção estratificada</button>
          </div>

          <div className="dataviz-stage">
            <div className="dataviz-canvas">
              <svg viewBox={`0 0 ${W} ${H}`} onMouseMove={onSvgMove} onMouseLeave={() => setHoverIdx(null)}>
                <defs>
                  <linearGradient id="convFill" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#C8102E" stopOpacity="0.34" />
                    <stop offset="100%" stopColor="#C8102E" stopOpacity="0.02" />
                  </linearGradient>
                  <linearGradient id="stratFill" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#30608B" stopOpacity="0.32" />
                    <stop offset="100%" stopColor="#30608B" stopOpacity="0.02" />
                  </linearGradient>
                </defs>

                {/* gridlines */}
                {yTicks.map(y => (
                  <g key={y}>
                    <line x1={padL} x2={W - padR} y1={yScale(y)} y2={yScale(y)} stroke="rgba(159,179,186,0.10)" />
                    <text x={padL - 12} y={yScale(y) + 4} fill="rgba(236,241,245,0.56)" fontSize="11" fontFamily="Instrument Sans" textAnchor="end">{y}%</text>
                  </g>
                ))}
                {xTicks.map(x => (
                  <text key={x} x={xScale(x)} y={H - padB + 22} fill="rgba(236,241,245,0.56)" fontSize="11" fontFamily="Instrument Sans" textAnchor="middle">{x}</text>
                ))}
                <text x={W / 2} y={H - 8} fill="rgba(236,241,245,0.4)" fontSize="10" fontFamily="Instrument Sans" letterSpacing="0.12em" textAnchor="middle">Idade (anos)</text>
                <text x={14} y={padT - 8} fill="rgba(236,241,245,0.4)" fontSize="10" fontFamily="Instrument Sans" letterSpacing="0.12em">Risco 10a (%)</text>

                {/* areas */}
                {showConv && <path d={areaConv} fill="url(#convFill)" />}
                {showStrat && <path d={areaStrat} fill="url(#stratFill)" />}

                {/* lines */}
                {showConv && <polyline points={lineConv} fill="none" stroke="#C8102E" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />}
                {showStrat && <polyline points={lineStrat} fill="none" stroke="#5a86ad" strokeWidth="2" strokeDasharray={scenario === "stratified" ? "0" : "0"} strokeLinejoin="round" strokeLinecap="round" />}

                {/* age marker */}
                <line x1={ageX} x2={ageX} y1={padT} y2={H - padB} stroke="rgba(216,199,180,0.4)" strokeDasharray="3 3" />
                {showConv && <circle cx={ageX} cy={yScale(ageData.conv)} r="6" fill="#C8102E" stroke="#fff" strokeWidth="2" />}
                {showStrat && <circle cx={ageX} cy={yScale(ageData.strat)} r="6" fill="#5a86ad" stroke="#fff" strokeWidth="2" />}

                {/* tooltip */}
                {hoverIdx !== null && (() => {
                  const hp = points[hoverIdx - minAge];
                  const hx = xScale(hoverIdx);
                  return (
                    <g pointerEvents="none">
                      <line x1={hx} x2={hx} y1={padT} y2={H - padB} stroke="rgba(255,255,255,0.16)" />
                      {showConv && <circle cx={hx} cy={yScale(hp.conv)} r="4" fill="#C8102E" />}
                      {showStrat && <circle cx={hx} cy={yScale(hp.strat)} r="4" fill="#5a86ad" />}
                      <g transform={`translate(${Math.min(hx + 12, W - 168)}, ${padT + 8})`}>
                        <rect width="156" height="74" rx="10" fill="rgba(5,10,15,0.92)" stroke="rgba(216,199,180,0.24)" />
                        <text x="14" y="22" fill="#fff" fontFamily="Fraunces" fontSize="14" fontWeight="500">{hoverIdx} anos</text>
                        {showConv && <>
                          <circle cx="16" cy="40" r="4" fill="#C8102E" />
                          <text x="26" y="44" fill="rgba(236,241,245,0.84)" fontFamily="Instrument Sans" fontSize="11">Convencional · {hp.conv.toFixed(1)}%</text>
                        </>}
                        {showStrat && <>
                          <circle cx="16" cy="58" r="4" fill="#5a86ad" />
                          <text x="26" y="62" fill="rgba(236,241,245,0.84)" fontFamily="Instrument Sans" fontSize="11">Estratificada · {hp.strat.toFixed(1)}%</text>
                        </>}
                      </g>
                    </g>
                  );
                })()}
              </svg>
            </div>

            <div className="dataviz-side">
              <div className="dataviz-slider">
                <div className="dataviz-slider-label">
                  <span>Idade selecionada</span>
                  <span className="dataviz-slider-value">{age} anos</span>
                </div>
                <div className="dataviz-slider-row">
                  <input
                    type="range"
                    min={minAge}
                    max={maxAge}
                    value={age}
                    style={{ "--pos": `${sliderPct}%` }}
                    onChange={(e) => setAge(parseInt(e.target.value, 10))}
                    aria-label="Idade"
                  />
                </div>
              </div>

              {showConv && (
                <div className="dataviz-stat">
                  <span className="dataviz-stat-label" style={{ color: "var(--red-soft)" }}>Trajetória convencional</span>
                  <span className="dataviz-stat-value">{ageData.conv.toFixed(1)}<sub>% / 10a</sub></span>
                  <p className="dataviz-stat-note">Curva projetada sob conduta reativa, sem leitura integrada de cardiometabolismo.</p>
                </div>
              )}
              {showStrat && (
                <div className="dataviz-stat">
                  <span className="dataviz-stat-label" style={{ color: "var(--blue-soft)" }}>Prevenção estratificada</span>
                  <span className="dataviz-stat-value">{ageData.strat.toFixed(1)}<sub>% / 10a</sub></span>
                  <p className="dataviz-stat-note">Curva projetada com leitura precoce de ApoB, sensibilidade insulínica, pressão noturna e VO₂.</p>
                </div>
              )}
              {scenario === "compare" && (
                <div className="dataviz-stat">
                  <span className="dataviz-stat-label" style={{ color: "var(--sand-soft)" }}>Diferença absoluta</span>
                  <span className="dataviz-stat-value" style={{ color: "var(--sand-soft)" }}>−{delta.toFixed(1)}<sub>pontos %</sub></span>
                  <p className="dataviz-stat-note">Tradução em conduta: priorização e timing das intervenções mudam o ângulo da curva mais do que o ponto inicial.</p>
                </div>
              )}

              <div className="dataviz-legend">
                <span className="dataviz-legend-row"><span className="dataviz-legend-dot" style={{ background: "#C8102E" }}></span>Convencional</span>
                <span className="dataviz-legend-row"><span className="dataviz-legend-dot" style={{ background: "#5a86ad" }}></span>Estratificada</span>
              </div>
            </div>
          </div>

          <p style={{ fontFamily: "var(--font-sans)", fontSize: "0.78rem", color: "var(--text-muted)", margin: 0, maxWidth: "70ch" }}>
            Curva ilustrativa, derivada de literatura de risco cardiovascular ao longo da vida. Não substitui estratificação individual em consulta.
          </p>
        </div>
      </div>
    </div>
  );
}

window.RiskDataviz = RiskDataviz;