// diag-growth.jsx — Curva de crecimiento proyectada en el tiempo (estilo proyección).

function GrowthChart({ growth, program, light }) {
  const W = 680, H = 360;
  const padL = 54, padR = 74, padT = 92, padB = 46;
  const { pts, start, goal, milestoneT, milestoneV, milestoneLabel,
          startLabel, midLabel, endLabel } = growth;
  const uid = light ? 'pdf' : 'web';
  const lineId = 'growthLine_' + uid;
  const areaId = 'growthArea_' + uid;

  const lo = Math.max(1, Math.min(start, goal) - 0.5);
  const hi = Math.min(5, Math.max(start, goal) + 0.45);
  const span = Math.max(0.5, hi - lo);

  const xAt = t => padL + t * (W - padL - padR);
  const yAt = v => padT + (1 - (v - lo) / span) * (H - padT - padB);

  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAt(p.t).toFixed(1)} ${yAt(p.v).toFixed(1)}`).join(' ');
  const areaPath = `${linePath} L ${xAt(1).toFixed(1)} ${(H - padB).toFixed(1)} L ${xAt(0).toFixed(1)} ${(H - padB).toFixed(1)} Z`;

  const mx = xAt(milestoneT), my = yAt(milestoneV);
  const ex = xAt(1), ey = yAt(goal);
  const sx = xAt(0), sy = yAt(start);

  // y gridlines (start, goal)
  const yTicks = [start, goal].map(v => ({ v, y: yAt(v) }));

  return (
    <svg className={'growth-svg' + (light ? ' light' : '')} viewBox={`0 0 ${W} ${H}`} role="img"
         aria-label="Proyección de tu crecimiento en el tiempo">
      <defs>
        <linearGradient id={lineId} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%"  stopColor="#E4042C" />
          <stop offset="35%" stopColor="#FF6A3D" />
          <stop offset="62%" stopColor="#FFC24B" />
          <stop offset="100%" stopColor="#2BD4A8" />
        </linearGradient>
        <linearGradient id={areaId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(43,212,168,0.20)" />
          <stop offset="100%" stopColor="rgba(43,212,168,0)" />
        </linearGradient>
      </defs>

      {/* gridlines + y labels */}
      {yTicks.map((t, i) => (
        <g key={i}>
          <line className="growth-grid" x1={padL} y1={t.y} x2={W - padR} y2={t.y} />
          <text x={padL - 10} y={t.y + 4} textAnchor="end" className="growth-ylabel">{t.v.toFixed(1)}</text>
        </g>
      ))}

      {/* area + line */}
      <path d={areaPath} fill={`url(#${areaId})`} />
      <path d={linePath} fill="none" stroke={`url(#${lineId})`} strokeWidth="5"
            strokeLinecap="round" strokeLinejoin="round" />

      {/* milestone */}
      <line className="growth-mileline" x1={mx} y1={my} x2={mx} y2={H - padB} strokeDasharray="5 5" />
      <circle cx={mx} cy={my} r="7" fill="#0E0D0C" stroke="#fff" strokeWidth="3" />
      {(() => {
        const txt = `${milestoneLabel} · ${milestoneV.toFixed(1)}`;
        const w = Math.max(150, txt.length * 7.2);
        return (
          <g transform={`translate(${mx}, ${my - 16})`}>
            <rect className="growth-pill-bg" x={-w / 2} y={-26} width={w} height={26} rx={7} />
            <text className="growth-pill-tx" y={-8} textAnchor="middle">{txt}</text>
          </g>
        );
      })()}

      {/* start dot */}
      <circle cx={sx} cy={sy} r="6" fill="#E4042C" stroke="#0E0D0C" strokeWidth="2" />

      {/* goal callout */}
      <circle cx={ex} cy={ey} r="9" fill="#2BD4A8" stroke="#0E0D0C" strokeWidth="3" />
      <g transform={`translate(${ex.toFixed(1)}, ${(ey - 64).toFixed(1)})`}>
        <rect className="growth-goal-bg" x="-63" y="0" width="126" height="50" rx="10" />
        <text className="growth-goal-k" x="0" y="19" textAnchor="middle">TU SIGUIENTE NIVEL</text>
        <text className="growth-goal-v" x="0" y="39" textAnchor="middle">{goal.toFixed(1)} / 5</text>
        <path className="growth-goal-tip" d="M -8 50 L 8 50 L 0 58 Z" />
      </g>

      {/* x labels */}
      <text x={sx} y={H - 16} textAnchor="start" className="growth-xlabel">{startLabel}</text>
      <text x={mx} y={H - 16} textAnchor="middle" className="growth-xlabel">{midLabel}</text>
      <text x={ex} y={H - 16} textAnchor="end" className="growth-xlabel">{endLabel}</text>
    </svg>
  );
}

function GrowthSection({ growth, program, nombre }) {
  const first = nombre ? nombre.split(' ')[0] : '';
  return (
    <div className="res-panel growth">
      <div className="growth-head">
        <div className="growth-kicker">● Tu proyección de crecimiento</div>
        <h3 className="growth-statement">
          {first ? first + ', según' : 'Según'} tus respuestas, puedes pasar de
          <em> {growth.start.toFixed(1)}</em> a un nivel de <em>{growth.goal.toFixed(1)} / 5</em> para <em>{growth.endLabel}</em>
        </h3>
        <div className="growth-divider" />
        <p className="growth-subline">
          Sube <b>+{growth.gain.toFixed(1)} niveles</b> en <b>{growth.weeks} semanas</b> con el <b>{program.title}</b>
        </p>
      </div>
      <GrowthChart growth={growth} program={program} />
      <p className="growth-foot">*Proyección estimada con avance constante siguiendo la metodología de los 8 ejes.</p>
    </div>
  );
}

Object.assign(window, { GrowthChart, GrowthSection });