import { cn } from "@/lib/cn";

const CHANNELS = ["Google", "Meta", "LinkedIn", "SEO", "AI Search"];

const STAGES = [
  { index: "02", name: "Acquisition" },
  { index: "03", name: "Landing experience" },
  { index: "04", name: "Conversion" },
  { index: "05", name: "Revenue" },
  { index: "06", name: "Retention" },
];

const DESCRIPTION =
  "Schematic, not live data: demand from Google, Meta, LinkedIn, SEO, and AI Search flows through acquisition, landing experience, conversion, revenue, and retention. Email returns customers to revenue, and analytics measures every stage.";

function Particle({ pathId, dur, begin, radius = 3.2 }: { pathId: string; dur: number; begin: number; radius?: number }) {
  return (
    <circle r={radius} className="signal-particle fill-signal" opacity="0">
      <animateMotion dur={`${dur}s`} begin={`${begin}s`} repeatCount="indefinite" calcMode="linear">
        <mpath href={`#${pathId}`} />
      </animateMotion>
      <animate
        attributeName="opacity"
        values="0;1;1;0"
        keyTimes="0;0.05;0.86;1"
        dur={`${dur}s`}
        begin={`${begin}s`}
        repeatCount="indefinite"
      />
    </circle>
  );
}

/** Wide layout for ≥ 1280px: channels on the left, stages along one indigo revenue path. */
export function SignalMapHorizontal({ idPrefix, className }: { idPrefix: string; className?: string }) {
  const lineY = 106;
  const xs = [300, 470, 630, 790, 950];
  const chipTop = [24, 58, 92, 126, 160];
  const titleId = `${idPrefix}-title`;
  const descId = `${idPrefix}-desc`;

  return (
    <svg viewBox="0 0 1200 216" className={cn("h-auto w-full", className)} role="img" aria-labelledby={`${titleId} ${descId}`}>
      <title id={titleId}>Signal map</title>
      <desc id={descId}>{DESCRIPTION}</desc>
      <defs>
        <linearGradient id={`${idPrefix}-fade`} x1="950" x2="1190" y1="0" y2="0" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="var(--color-signal)" stopOpacity="1" />
          <stop offset="1" stopColor="var(--color-signal)" stopOpacity="0" />
        </linearGradient>
        {chipTop.map((top, i) => (
          <path key={i} id={`${idPrefix}-ch-${i}`} d={`M140 ${top + 14} C220 ${top + 14} 220 ${lineY} 300 ${lineY} L1180 ${lineY}`} />
        ))}
        <path id={`${idPrefix}-email`} d={`M950 ${lineY} C950 40 790 40 790 ${lineY}`} />
        <path id={`${idPrefix}-rail`} d="M262 195 L944 195" />
      </defs>

      <text x="0" y="12" className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
        01
      </text>
      <text x="22" y="12.5" className="fill-ink" fontSize="13.5" fontWeight="500">
        Demand
      </text>

      {chipTop.map((top, i) => (
        <path
          key={`curve-${i}`}
          d={`M140 ${top + 14} C220 ${top + 14} 220 ${lineY} 300 ${lineY}`}
          className="fill-none stroke-ink/25"
          strokeWidth="1"
        />
      ))}
      {CHANNELS.map((channel, i) => (
        <g key={channel}>
          <rect x="0.5" y={chipTop[i] + 0.5} width="139" height="27" rx="4" className="fill-surface stroke-line" />
          <circle cx="14" cy={chipTop[i] + 14} r="2.5" className="fill-signal" />
          <text x="26" y={chipTop[i] + 18.5} className="fill-ink-soft" fontSize="13">
            {channel}
          </text>
        </g>
      ))}

      <path d={`M300 ${lineY} L950 ${lineY}`} className="stroke-signal" strokeWidth="1.5" />
      <path d={`M950 ${lineY} L1190 ${lineY}`} stroke={`url(#${idPrefix}-fade)`} strokeWidth="1.5" strokeDasharray="2 5" />
      <text x="1190" y="136" textAnchor="end" className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
        COMPOUNDS →
      </text>

      <path d="M470 60 L470 97" className="stroke-ink/35" strokeDasharray="2 3" />
      <rect x="411.5" y="32.5" width="117" height="27" rx="4" className="fill-surface stroke-line" />
      <text x="470" y="50.5" textAnchor="middle" className="fill-ink-soft" fontSize="12.5">
        Landing Pages
      </text>

      <path d={`M950 ${lineY} C950 40 790 40 790 ${lineY}`} className="fill-none stroke-signal/60" strokeDasharray="3 4" />
      <rect x="838.5" y="44.5" width="63" height="23" rx="4" className="fill-surface stroke-line" />
      <text x="870" y="60.5" textAnchor="middle" className="fill-ink-soft" fontSize="12.5">
        Email
      </text>

      {STAGES.map((stage, i) => {
        const isRevenue = stage.name === "Revenue";
        return (
          <g key={stage.name}>
            <circle
              cx={xs[i]}
              cy={lineY}
              r="7"
              className={isRevenue ? "fill-signal stroke-signal" : "fill-surface stroke-ink"}
              strokeWidth="1.25"
            />
            {isRevenue ? null : <circle cx={xs[i]} cy={lineY} r="2.2" className="fill-ink" />}
            <text x={xs[i]} y="136" textAnchor="middle" className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
              {stage.index}
            </text>
            <text x={xs[i]} y="154" textAnchor="middle" className="fill-ink" fontSize="13.5" fontWeight="500">
              {stage.name}
            </text>
            <path d={`M${xs[i]} 189 L${xs[i]} 195`} className="stroke-ink/40" />
          </g>
        );
      })}

      <rect x="160.5" y="182.5" width="95" height="25" rx="4" className="fill-surface stroke-line" />
      <text x="208" y="199.5" textAnchor="middle" className="fill-ink-soft" fontSize="12.5">
        Analytics
      </text>
      <path d="M256 195 L950 195" className="stroke-ink/30" strokeDasharray="1 4" />

      {CHANNELS.map((channel, i) => (
        <Particle key={channel} pathId={`${idPrefix}-ch-${i}`} dur={11} begin={0.6 + i * 2.2} />
      ))}
      <Particle pathId={`${idPrefix}-email`} dur={4.2} begin={3.4} radius={2.6} />
      <Particle pathId={`${idPrefix}-rail`} dur={7.5} begin={1.2} radius={2} />
    </svg>
  );
}

/** Compact vertical layout for small and medium screens. */
export function SignalMapVertical({ idPrefix, className }: { idPrefix: string; className?: string }) {
  const lineX = 76;
  const ys = [170, 260, 350, 440, 530];
  const chips = [
    { label: "Google", x: 20, y: 30, w: 86 },
    { label: "Meta", x: 114, y: 30, w: 70 },
    { label: "LinkedIn", x: 192, y: 30, w: 96 },
    { label: "SEO", x: 20, y: 64, w: 62 },
    { label: "AI Search", x: 90, y: 64, w: 96 },
  ];
  const titleId = `${idPrefix}-title`;
  const descId = `${idPrefix}-desc`;

  return (
    <svg viewBox="0 0 360 600" className={cn("h-auto w-full", className)} role="img" aria-labelledby={`${titleId} ${descId}`}>
      <title id={titleId}>Signal map</title>
      <desc id={descId}>{DESCRIPTION}</desc>
      <defs>
        {chips.map((chip, i) => {
          const cx = chip.x + chip.w / 2;
          return <path key={i} id={`${idPrefix}-ch-${i}`} d={`M${cx} ${chip.y + 26} C${cx} 130 ${lineX} 130 ${lineX} 170 L${lineX} 590`} />;
        })}
        <path id={`${idPrefix}-email`} d={`M${lineX} 530 C30 530 30 440 ${lineX} 440`} />
        <path id={`${idPrefix}-rail`} d="M330 170 L330 530" />
      </defs>

      <text x="20" y="18" className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
        01
      </text>
      <text x="42" y="18.5" className="fill-ink" fontSize="13.5" fontWeight="500">
        Demand
      </text>

      {chips.map((chip, i) => {
        const cx = chip.x + chip.w / 2;
        return (
          <path
            key={`curve-${i}`}
            d={`M${cx} ${chip.y + 26} C${cx} 130 ${lineX} 130 ${lineX} 170`}
            className="fill-none stroke-ink/25"
          />
        );
      })}
      {chips.map((chip) => (
        <g key={chip.label}>
          <rect x={chip.x + 0.5} y={chip.y + 0.5} width={chip.w - 1} height="25" rx="4" className="fill-surface stroke-line" />
          <text x={chip.x + chip.w / 2} y={chip.y + 17.5} textAnchor="middle" className="fill-ink-soft" fontSize="12.5">
            {chip.label}
          </text>
        </g>
      ))}

      <path d={`M${lineX} 170 L${lineX} 580`} className="stroke-signal" strokeWidth="1.5" />
      <path d={`M${lineX} 530 C30 530 30 440 ${lineX} 440`} className="fill-none stroke-signal/60" strokeDasharray="3 4" />

      <rect x="270.5" y="128.5" width="79" height="23" rx="4" className="fill-surface stroke-line" />
      <text x="310" y="144.5" textAnchor="middle" className="fill-ink-soft" fontSize="12">
        Analytics
      </text>
      <path d="M330 152 L330 530" className="stroke-ink/30" strokeDasharray="1 4" />

      {STAGES.map((stage, i) => {
        const isRevenue = stage.name === "Revenue";
        return (
          <g key={stage.name}>
            <circle
              cx={lineX}
              cy={ys[i]}
              r="7"
              className={isRevenue ? "fill-signal stroke-signal" : "fill-surface stroke-ink"}
              strokeWidth="1.25"
            />
            {isRevenue ? null : <circle cx={lineX} cy={ys[i]} r="2.2" className="fill-ink" />}
            <text x="100" y={ys[i] + 4} className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
              {stage.index}
            </text>
            <text x="124" y={ys[i] + 5} className="fill-ink" fontSize="14" fontWeight="500">
              {stage.name}
            </text>
            <path d={`M322 ${ys[i]} L330 ${ys[i]}`} className="stroke-ink/40" />
          </g>
        );
      })}

      <rect x="124.5" y="276.5" width="111" height="23" rx="4" className="fill-surface stroke-line" />
      <text x="180" y="292.5" textAnchor="middle" className="fill-ink-soft" fontSize="12">
        Landing Pages
      </text>
      <rect x="208.5" y="518.5" width="57" height="23" rx="4" className="fill-surface stroke-line" />
      <text x="237" y="534.5" textAnchor="middle" className="fill-ink-soft" fontSize="12">
        Email
      </text>
      <text x="100" y="594" className="fill-muted font-mono" fontSize="10.5" letterSpacing="0.08em">
        COMPOUNDS ↓
      </text>

      {chips.map((chip, i) => (
        <Particle key={chip.label} pathId={`${idPrefix}-ch-${i}`} dur={9} begin={0.6 + i * 1.8} />
      ))}
      <Particle pathId={`${idPrefix}-email`} dur={3.8} begin={3} radius={2.6} />
      <Particle pathId={`${idPrefix}-rail`} dur={6.5} begin={1.5} radius={2} />
    </svg>
  );
}