import { motion } from "framer-motion";
import { EASE_EXPO, inView } from "../../../lib/motion";
import { useReducedMotion } from "../../../lib/useReducedMotion";

// Serie fija: doce meses con tendencia al alza y ruido creíble. Determinista a
// propósito, para que el audit visual capture siempre la misma gráfica.
const SERIE = [38, 44, 41, 52, 58, 54, 66, 71, 68, 79, 86, 94];
const W = 520;
const H = 200;
const PAD = 12;

const MAX = Math.max(...SERIE);
const MIN = Math.min(...SERIE);

function yDe(v: number): number {
  return H - PAD - ((v - MIN) / (MAX - MIN)) * (H - PAD * 2);
}

function pathFrom(serie: number[]): string {
  const dx = (W - PAD * 2) / (serie.length - 1);
  return serie
    .map((v, i) => `${i === 0 ? "M" : "L"}${(PAD + i * dx).toFixed(1)} ${yDe(v).toFixed(1)}`)
    .join(" ");
}

/** Línea de ingresos que se traza sola. El "antes/después" no se explica: se ve. */
export function RevenueLineVisual({ className = "" }: { className?: string }) {
  const reduced = useReducedMotion();
  const d = pathFrom(SERIE);
  const area = `${d} L${W - PAD} ${H - PAD} L${PAD} ${H - PAD} Z`;

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      className={`w-full ${className}`}
      role="img"
      aria-label="Ingresos mensuales en tendencia ascendente"
    >
      <defs>
        <linearGradient id="ld-rev-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3b66ff" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#3b66ff" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* Rejilla base: tres guías en #eef0f4, el mismo `CartesianGrid` que usa la
          gráfica de ingresos del panel. Dan escala sin competir. */}
      {[0.25, 0.5, 0.75].map((f) => (
        <line
          key={f}
          x1={PAD}
          x2={W - PAD}
          y1={PAD + f * (H - PAD * 2)}
          y2={PAD + f * (H - PAD * 2)}
          stroke="#eef0f4"
          strokeWidth="1"
        />
      ))}

      <motion.path
        d={area}
        fill="url(#ld-rev-fill)"
        initial={{ opacity: reduced ? 1 : 0 }}
        whileInView={{ opacity: 1 }}
        viewport={inView}
        transition={{ duration: 0.9, delay: reduced ? 0 : 0.5, ease: EASE_EXPO }}
      />
      <motion.path
        d={d}
        fill="none"
        stroke="#3b66ff"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: reduced ? 1 : 0 }}
        whileInView={{ pathLength: 1 }}
        viewport={inView}
        transition={{ duration: reduced ? 0 : 1.4, ease: EASE_EXPO }}
      />
      {/* Punto final: la marca del "hoy". Aterriza cuando la línea termina. */}
      <motion.circle
        cx={W - PAD}
        cy={yDe(SERIE[SERIE.length - 1])}
        r="5"
        fill="#3b66ff"
        initial={{ scale: reduced ? 1 : 0 }}
        whileInView={{ scale: 1 }}
        viewport={inView}
        transition={{ duration: 0.5, delay: reduced ? 0 : 1.3, ease: EASE_EXPO }}
      />
    </svg>
  );
}