"use client";

import React, { useEffect, useRef } from "react";
import { IconUser } from "@tabler/icons-react";

import { BrandMark } from "@/components/shared/logo";

const tools = [
  { label: "Se", top: "13.3%", bg: "#7b3ff2" },
  { label: "ah", top: "31.7%", bg: "#0a5cff" },
  { label: "Ma", top: "50%", bg: "linear-gradient(135deg,#ff5722,#fbc02d)" },
  { label: "SE", top: "68.3%", bg: "#2563eb" },
  { label: "G", top: "86.7%", bg: "#34a853" },
] as const;

const beams = [
  "M150 40 C 280 40, 300 150, 380 150",
  "M150 95 C 280 95, 320 150, 380 150",
  "M150 150 L 380 150",
  "M150 205 C 280 205, 320 150, 380 150",
  "M150 260 C 280 260, 300 150, 380 150",
  "M450 150 L 620 150",
];

export const ProblemBeam = () => {
  const wrapRef = useRef<HTMLDivElement>(null);

  // Animated dash travelling along each beam (port of the design's JS flow).
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;

    const paths = wrapRef.current?.querySelectorAll<SVGPathElement>(".flow");
    if (!paths) return;

    let raf = 0;
    const cleanups: (() => void)[] = [];
    paths.forEach((path, i) => {
      const len = path.getTotalLength();
      const seg = 40;
      path.style.strokeDasharray = `${seg} ${len - seg}`;
      let start: number | null = null;
      const delay = i * 320;
      const loop = (ts: number) => {
        if (start === null) start = ts;
        const elapsed = (ts - start - delay) % 2600;
        path.style.strokeDashoffset =
          elapsed < 0 ? String(len) : String(len * (1 - elapsed / 2600));
        raf = requestAnimationFrame(loop);
      };
      raf = requestAnimationFrame(loop);
      cleanups.push(() => cancelAnimationFrame(raf));
    });
    return () => cleanups.forEach((c) => c());
  }, []);

  const nodeBase: React.CSSProperties = {
    position: "absolute",
    display: "grid",
    placeItems: "center",
    transform: "translate(-50%,-50%)",
    zIndex: 2,
  };

  return (
    <div
      ref={wrapRef}
      style={{
        position: "relative",
        margin: "56px auto 0",
        maxWidth: 760,
        width: "100%",
        height: 300,
      }}
    >
      <svg
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
        }}
        viewBox="0 0 760 300"
        preserveAspectRatio="none"
        fill="none"
      >
        <defs>
          <linearGradient
            id="beamg"
            x1="0"
            y1="0"
            x2="760"
            y2="0"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#007BFF" />
            <stop offset="0.55" stopColor="#FF5722" />
            <stop offset="1" stopColor="#FBC02D" />
          </linearGradient>
        </defs>
        <g stroke="var(--hairline-2)" strokeWidth="1.5">
          {beams.map((d) => (
            <path key={d} d={d} />
          ))}
        </g>
        {beams.map((d) => (
          <path
            key={`flow-${d}`}
            className="flow"
            d={d}
            stroke="url(#beamg)"
            strokeWidth="2"
          />
        ))}
      </svg>

      {/* tool nodes */}
      {tools.map((t) => (
        <div
          key={t.label}
          style={{
            ...nodeBase,
            left: "19.7%",
            top: t.top,
            width: 46,
            height: 46,
            borderRadius: 14,
            border: "1px solid rgba(255,255,255,0.12)",
            background: t.bg,
            color: "#fff",
            fontFamily: "var(--font-manrope), sans-serif",
            fontWeight: 800,
            fontSize: 13,
          }}
        >
          {t.label}
        </div>
      ))}

      {/* hub */}
      <div
        style={{
          ...nodeBase,
          left: "54.5%",
          top: "50%",
          width: 76,
          height: 76,
          borderRadius: 20,
          border: "1px solid rgba(255,255,255,0.16)",
          background: "linear-gradient(180deg,#1a1f28,#0f1218)",
          boxShadow:
            "0 0 0 6px rgba(255,87,34,0.06), 0 16px 40px -12px rgba(255,87,34,0.5)",
        }}
      >
        <BrandMark className="size-9" gradientId="seo-brand-hub" />
      </div>

      {/* you */}
      <div
        style={{
          ...nodeBase,
          left: "81.5%",
          top: "50%",
          width: 50,
          height: 50,
          borderRadius: "50%",
          border: "1px solid rgba(255,255,255,0.12)",
          background: "#161a21",
        }}
      >
        <IconUser className="size-5" style={{ color: "#b4bcca" }} />
      </div>
    </div>
  );
};