"use client";

import { motion, useReducedMotion } from "framer-motion";
import clsx from "clsx";

type Props = {
  className?: string;
  accent?: string; // cyan
  bg?: string;     // solid dark background
  gridStroke?: string;
};

const W = 720; // 4:3
const H = 540; // 4:3

export default function NoSinglePoint({
  className,
  accent = "#00b8db",
  bg = "#0b0b0b",
  gridStroke = "#2b2a2a",
}: Props) {
  const prefers = useReducedMotion();

  // Nodes (left source, right dest, top hub, bottom hub, plus two relays)
  const nodes = {
    left:  { x: 120, y: H / 2 },
    right: { x: W - 120, y: H / 2 },
    top:   { x: W / 2, y: 160 },
    bot:   { x: W / 2, y: H - 160 },
    tl:    { x: 240, y: 200 },
    br:    { x: W - 240, y: H - 200 },
  };

  // Redundant paths from left → right
  const upperPath = `M ${nodes.left.x} ${nodes.left.y}
                     L ${nodes.tl.x} ${nodes.tl.y}
                     L ${nodes.top.x} ${nodes.top.y}
                     L ${nodes.right.x} ${nodes.right.y}`;

  const lowerPath = `M ${nodes.left.x} ${nodes.left.y}
                     L ${nodes.bot.x} ${nodes.bot.y}
                     L ${nodes.br.x} ${nodes.br.y}
                     L ${nodes.right.x} ${nodes.right.y}`;

  return (
    <div
      className={clsx("relative overflow-hidden", className)}
      aria-hidden="true"
      role="img"
      style={{ background: bg }}
    >
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
        {/* Subtle dark grid */}
        <defs>
          <pattern id="grid-dark-4x3" width="28" height="28" patternUnits="userSpaceOnUse">
            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={gridStroke} strokeWidth="1" opacity="0.35" />
          </pattern>
          <filter id="glow">
            <feGaussianBlur stdDeviation="3" result="b" />
            <feMerge>
              <feMergeNode in="b" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
        <rect width={W} height={H} fill="url(#grid-dark-4x3)" />

        {/* Base links (all potential connectivity) */}
        {[
          `M ${nodes.left.x} ${nodes.left.y} L ${nodes.tl.x} ${nodes.tl.y}`,
          `M ${nodes.tl.x} ${nodes.tl.y} L ${nodes.top.x} ${nodes.top.y}`,
          `M ${nodes.top.x} ${nodes.top.y} L ${nodes.right.x} ${nodes.right.y}`,
          `M ${nodes.left.x} ${nodes.left.y} L ${nodes.bot.x} ${nodes.bot.y}`,
          `M ${nodes.bot.x} ${nodes.bot.y} L ${nodes.br.x} ${nodes.br.y}`,
          `M ${nodes.br.x} ${nodes.br.y} L ${nodes.right.x} ${nodes.right.y}`,
          // cross edges (mesh redundancy)
          `M ${nodes.tl.x} ${nodes.tl.y} L ${nodes.bot.x} ${nodes.bot.y}`,
          `M ${nodes.top.x} ${nodes.top.y} L ${nodes.br.x} ${nodes.br.y}`,
        ].map((d, i) => (
          <motion.path
            key={`base-${i}`}
            d={d}
            stroke="#1e1e1e"
            strokeWidth={3}
            strokeLinecap="round"
            fill="none"
            initial={{ pathLength: 0, opacity: 0.2 }}
            animate={{ pathLength: 1, opacity: 0.5 }}
            transition={{ duration: 0.8, delay: i * 0.05, ease: [0.22, 1, 0.36, 1] }}
          />
        ))}

        {/* Highlight the two redundant main routes */}
        <motion.path
          d={upperPath}
          fill="none"
          stroke="#3a3a3a"
          strokeWidth={4}
          strokeLinecap="round"
          initial={{ pathLength: 0, opacity: 0.6 }}
          animate={{ pathLength: 1, opacity: 0.6 }}
          transition={{ duration: 0.9 }}
        />
        <motion.path
          d={lowerPath}
          fill="none"
          stroke="#3a3a3a"
          strokeWidth={4}
          strokeLinecap="round"
          initial={{ pathLength: 0, opacity: 0.6 }}
          animate={{ pathLength: 1, opacity: 0.6 }}
          transition={{ duration: 0.9, delay: 0.1 }}
        />

        {/* Cyan accent dash showing “preferred/active” path(s) */}
        <motion.path
          d={upperPath}
          fill="none"
          stroke={accent}
          strokeWidth={2}
          strokeDasharray="10 8"
          initial={{ pathLength: 0, opacity: 0.8 }}
          animate={{ pathLength: 1, opacity: [0.8, 0.2, 0.8] }} // will fade as "blocked"
          transition={{ duration: 1.1, repeat: Infinity, repeatType: "reverse" }}
          filter="url(#glow)"
        />
        <motion.path
          d={lowerPath}
          fill="none"
          stroke={accent}
          strokeWidth={2}
          strokeDasharray="10 8"
          initial={{ pathLength: 0, opacity: 1 }}
          animate={{ pathLength: 1, opacity: 1 }}
          transition={{ duration: 1 }}
          filter="url(#glow)"
        />

        {/* Moving packets: one tries upper (gets dimmed at top hub), one uses lower and continues */}
        {!prefers && (
          <>
            {/* Upper path packet (dims near top hub to suggest block/censor but NOT stopping overall flow) */}
            <motion.circle
              r={5}
              fill={accent}
              style={{ offsetPath: `path('${upperPath}')` }}
              initial={{ offsetDistance: "0%", opacity: 0.9 }}
              animate={{
                offsetDistance: ["0%", "100%"],
                opacity: [0.9, 0.4, 0.9], // subtle dimming cycle
              }}
              transition={{ duration: 3.0, repeat: Infinity, ease: "linear" }}
              filter="url(#glow)"
            />

            {/* Lower path packet (stable flow) */}
            <motion.circle
              r={6}
              fill={accent}
              style={{ offsetPath: `path('${lowerPath}')` }}
              initial={{ offsetDistance: "0%", opacity: 1 }}
              animate={{ offsetDistance: ["0%", "100%"] }}
              transition={{ duration: 2.4, repeat: Infinity, ease: "linear" }}
              filter="url(#glow)"
            />
          </>
        )}

        {/* Nodes */}
        {Object.values(nodes).map((n, i) => (
          <g key={`node-${i}`}>
            <circle cx={n.x} cy={n.y} r={20} fill="#0f0f0f" stroke="#1f1f1f" strokeWidth={2} />
            <motion.circle
              cx={n.x}
              cy={n.y}
              r={8}
              fill={i === 2 ? "#0f0f0f" : accent} // top hub inner is dark (to hint “blocked” moment)
              stroke="#222"
              strokeWidth={2}
              animate={
                !prefers
                  ? i === 2 // top node (potential choke/attack point) pulses differently
                    ? { opacity: [0.5, 0.25, 0.5], scale: [1, 0.95, 1] }
                    : { opacity: [0.9, 1, 0.9], scale: [1, 1.06, 1] }
                  : { opacity: 1 }
              }
              transition={{
                duration: 2.2,
                repeat: prefers ? 0 : Infinity,
                ease: [0.22, 1, 0.36, 1],
                delay: i * 0.05,
              }}
              filter="url(#glow)"
            />
          </g>
        ))}

        {/* A subtle “block” overlay on the top hub (appears/disappears) */}
        {!prefers && (
          <motion.g
            initial={{ opacity: 0 }}
            animate={{ opacity: [0, 0.7, 0] }}
            transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut", delay: 0.8 }}
          >
            <circle
              cx={nodes.top.x}
              cy={nodes.top.y}
              r={18}
              fill="none"
              stroke="#8b8b8b"
              strokeWidth={2}
            />
            <path
              d={`M ${nodes.top.x - 10} ${nodes.top.y - 10} L ${nodes.top.x + 10} ${nodes.top.y + 10}
                  M ${nodes.top.x + 10} ${nodes.top.y - 10} L ${nodes.top.x - 10} ${nodes.top.y + 10}`}
              stroke="#8b8b8b"
              strokeWidth={2}
              strokeLinecap="round"
            />
          </motion.g>
        )}
      </svg>
    </div>
  );
}