import { useMemo, useState } from "react";
import { Pack, hierarchy } from "@visx/hierarchy";
import { Group } from "@visx/group";
import type { DonutSlice } from "./DonutChart";

interface Props {
  data: DonutSlice[];
  size: number;
  formatValue: (n: number) => string;
}

/** Synthetic root d3-hierarchy packs against; never rendered itself. */
interface Root {
  children: DonutSlice[];
}

/**
 * The same DonutSlice[] a DonutChart takes, laid out as proportional
 * circles instead of a ring. A caller toggling between the two swaps one
 * component for the other with no data reshaping.
 */
export function BubbleChart({ data, size, formatValue }: Props) {
  const [active, setActive] = useState<string | null>(null);
  const total = data.reduce((s, d) => s + d.value, 0);

  const root = useMemo(() => {
    const shown = data.filter((d) => d.value > 0);
    return hierarchy<Root>({ children: shown })
      .sum((d) => ("value" in d ? (d as unknown as DonutSlice).value : 0))
      .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
  }, [data]);

  if (data.every((d) => d.value <= 0)) return null;

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <svg width={size} height={size} role="group" aria-label={`${data.length} categories`}>
        <Pack root={root} size={[size, size]} padding={3}>
          {(packed) => (
            <Group>
              {packed
                .descendants()
                .filter((d) => d.depth > 0)
                .map((c) => {
                  const d = c.data as unknown as DonutSlice;
                  const isActive = active === d.name;
                  const pct = total > 0 ? (d.value / total) * 100 : 0;
                  const r = c.r;
                  const showLabel = r > 22;
                  return (
                    <g
                      key={d.name}
                      transform={`translate(${c.x}, ${c.y})`}
                      tabIndex={0}
                      role="img"
                      aria-label={`${d.name}: ${formatValue(d.value)}, ${pct.toFixed(1)}%`}
                      className="outline-none cursor-pointer"
                      onPointerEnter={() => setActive(d.name)}
                      onPointerLeave={() => setActive(null)}
                      onFocus={() => setActive(d.name)}
                      onBlur={() => setActive(null)}
                    >
                      <circle
                        r={r}
                        fill={d.color}
                        opacity={active && !isActive ? 0.5 : 0.92}
                        stroke="hsl(var(--card))"
                        strokeWidth={2}
                        style={{ transition: "opacity 150ms ease" }}
                      />
                      {showLabel && (
                        <text textAnchor="middle" dy="-0.15em" fontSize={Math.min(15, r / 2.6)} fontWeight={700} fill="hsl(var(--card))">
                          {pct.toFixed(0)}%
                        </text>
                      )}
                      {showLabel && (
                        <text textAnchor="middle" dy="1.2em" fontSize={Math.min(11, r / 3.6)} fill="hsl(var(--card))" opacity={0.9}>
                          {d.name}
                        </text>
                      )}
                    </g>
                  );
                })}
            </Group>
          )}
        </Pack>
      </svg>
    </div>
  );
}