import { useState } from "react";
import { industries } from "@/lib/industries";

/**
 * Interconnected ecosystem diagram: a central Vigor Group node with the seven
 * sectors orbiting it, each linked to the core and to its neighbours to show
 * that every sector supports the others.
 */
export function SectorEcosystem({ tone = "light" }: { tone?: "light" | "dark" }) {
  const [active, setActive] = useState<number | null>(null);
  const n = industries.length;
  const R = 190;
  const cx = 300;
  const cy = 300;

  const pts = industries.map((_, i) => {
    const a = (i / n) * Math.PI * 2 - Math.PI / 2;
    return { x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
  });

  const dark = tone === "dark";
  const line = dark ? "rgb(255 255 255 / 0.18)" : "rgb(20 30 60 / 0.14)";
  const lineActive = "var(--crimson)";
  const current = active === null ? null : industries[active];

  return (
    <div className="grid lg:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)] gap-10 lg:gap-16 items-center">
      <div className="relative mx-auto w-full max-w-[600px]">
        <svg
          viewBox="0 0 600 600"
          className="w-full h-auto"
          role="img"
          aria-label="Diagram of the seven interconnected Vigor Group sectors"
        >
          <circle cx={cx} cy={cy} r={R} fill="none" stroke={line} strokeDasharray="3 7" />
          <circle cx={cx} cy={cy} r={R - 62} fill="none" stroke={line} />

          {pts.map((p, i) =>
            pts.map((q, j) =>
              j > i ? (
                <line
                  key={`${i}-${j}`}
                  x1={p.x}
                  y1={p.y}
                  x2={q.x}
                  y2={q.y}
                  stroke={active === i || active === j ? lineActive : line}
                  strokeWidth={active === i || active === j ? 1.4 : 0.7}
                  opacity={active === null ? 0.55 : active === i || active === j ? 0.9 : 0.15}
                  className="transition-all duration-300"
                />
              ) : null,
            ),
          )}

          {pts.map((p, i) => (
            <line
              key={`c-${i}`}
              x1={cx}
              y1={cy}
              x2={p.x}
              y2={p.y}
              stroke={active === i ? lineActive : line}
              strokeWidth={active === i ? 2 : 1.2}
              className="transition-all duration-300"
            />
          ))}

          <circle cx={cx} cy={cy} r={68} fill="var(--navy-deep)" />
          <circle cx={cx} cy={cy} r={78} fill="none" stroke="var(--crimson)" strokeWidth={1.5} opacity={0.55} />
          <text x={cx} y={cy - 6} textAnchor="middle" className="font-logo" fill="#fff" fontSize="26" letterSpacing="2">
            VIGOR
          </text>
          <text
            x={cx}
            y={cy + 16}
            textAnchor="middle"
            fill="var(--crimson)"
            fontSize="9"
            fontWeight="800"
            letterSpacing="2.4"
          >
            GROUP
          </text>

          {pts.map((p, i) => (
            <g
              key={industries[i].slug}
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(null)}
              onFocus={() => setActive(i)}
              onBlur={() => setActive(null)}
              tabIndex={0}
              className="cursor-pointer outline-none"
            >
              <circle
                cx={p.x}
                cy={p.y}
                r={42}
                fill={active === i ? "var(--crimson)" : dark ? "rgb(255 255 255 / 0.06)" : "#fff"}
                stroke={active === i ? "var(--crimson)" : line}
                strokeWidth={1.4}
                className="transition-all duration-300"
              />
              <text
                x={p.x}
                y={p.y + (industries[i].name.split(" ").length > 1 ? -2 : 4)}
                textAnchor="middle"
                fontSize="11"
                fontWeight="700"
                fill={active === i ? "#fff" : dark ? "#fff" : "var(--navy-deep)"}
                className="pointer-events-none select-none"
              >
                {industries[i].name.split(" ").map((w, k) => (
                  <tspan key={w} x={p.x} dy={k === 0 ? 0 : 13}>
                    {w}
                  </tspan>
                ))}
              </text>
            </g>
          ))}
        </svg>
      </div>

      <div className={dark ? "text-white" : ""}>
        <div className="border-t-2 border-crimson pt-6 min-h-[200px]">
          {current ? (
            <>
              <current.icon size={30} strokeWidth={1.4} className="text-crimson" />
              <h3 className="mt-5 text-2xl md:text-3xl">{current.name}</h3>
              <p className={`mt-3 leading-relaxed ${dark ? "text-white/70" : "text-ink-soft"}`}>{current.body}</p>
            </>
          ) : (
            <>
              <p className="eyebrow">One connected group</p>
              <h3 className="mt-4 text-2xl md:text-3xl">Seven sectors that strengthen one another.</h3>
              <p className={`mt-3 leading-relaxed ${dark ? "text-white/70" : "text-ink-soft"}`}>
                Select a sector to see how it contributes to the wider group. Our hospitals,
                hotels, factories, trade, property, investment and community work share
                people, standards and infrastructure.
              </p>
            </>
          )}
        </div>
        <ul className="mt-8 flex flex-wrap gap-2">
          {industries.map((ind, i) => (
            <li key={ind.slug}>
              <button
                type="button"
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                onClick={() => setActive(i)}
                className={`px-3.5 py-2 text-xs font-bold uppercase tracking-[0.1em] border transition-colors ${
                  active === i
                    ? "bg-crimson border-crimson text-white"
                    : dark
                      ? "border-white/25 text-white/80 hover:border-crimson"
                      : "border-border text-ink-soft hover:border-crimson"
                }`}
              >
                {ind.name}
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}