"use client";

import { motion } from "motion/react";
import { ChartFrame } from "@/components/charts/chart-frame";
import { catColor } from "@/lib/chart-utils";

export type VennSet = { label: string };

type VennDiagramProps = {
  /** 2 or 3 sets. */
  sets: VennSet[];
  /** Optional label for the central intersection. */
  intersection?: string;
  size?: number;
  className?: string;
};

/** VennDiagram — 2–3 overlapping circles that scale in; multiply blend builds the intersections; labels fade. */
export function VennDiagram({ sets, intersection, size = 420, className }: VennDiagramProps) {
  const n = Math.min(sets.length, 3);
  const cx = size / 2;
  const cy = size / 2;
  const r = size * 0.26;
  const layout =
    n === 2
      ? [
          { x: cx - r * 0.6, y: cy, lx: cx - r * 1.15, ly: cy },
          { x: cx + r * 0.6, y: cy, lx: cx + r * 1.15, ly: cy },
        ]
      : [
          { x: cx, y: cy - r * 0.62, lx: cx, ly: cy - r * 1.5 },
          { x: cx - r * 0.62, y: cy + r * 0.42, lx: cx - r * 1.35, ly: cy + r * 1.1 },
          { x: cx + r * 0.62, y: cy + r * 0.42, lx: cx + r * 1.35, ly: cy + r * 1.1 },
        ];

  return (
    <ChartFrame width={size} height={size} label="Diagrama de Venn" className={className}>
      {({ inView, reduce }) => (
        <>
          <g style={{ mixBlendMode: "multiply" }}>
            {layout.slice(0, n).map((c, i) => (
              <motion.circle
                key={i}
                cx={c.x}
                cy={c.y}
                r={r}
                fill={catColor(i)}
                fillOpacity={0.45}
                initial={reduce ? false : { opacity: 0, scale: 0.6 }}
                animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.6 }}
                transition={{ duration: 0.55, delay: 0.1 + i * 0.15, ease: [0.22, 1, 0.36, 1] }}
                style={{ transformOrigin: `${c.x}px ${c.y}px` }}
              />
            ))}
          </g>
          {layout.slice(0, n).map((c, i) => (
            <motion.text
              key={i}
              x={c.lx}
              y={c.ly}
              textAnchor="middle"
              dominantBaseline="middle"
              fontSize={14}
              fontWeight={800}
              fill="var(--ink-900)"
              initial={{ opacity: 0 }}
              animate={inView ? { opacity: 1 } : { opacity: 0 }}
              transition={{ duration: 0.3, delay: 0.3 + i * 0.15 }}
            >
              {sets[i].label}
            </motion.text>
          ))}
          {intersection && (
            <motion.text
              x={cx}
              y={n === 2 ? cy : cy + r * 0.1}
              textAnchor="middle"
              dominantBaseline="middle"
              fontSize={12}
              fontWeight={700}
              fill="var(--ink-900)"
              initial={{ opacity: 0 }}
              animate={inView ? { opacity: 1 } : { opacity: 0 }}
              transition={{ duration: 0.3, delay: 0.7 }}
            >
              {intersection}
            </motion.text>
          )}
        </>
      )}
    </ChartFrame>
  );
}