"use client";
import * as React from "react";
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import { formatNumber, formatPercent, titleCase } from "@/lib/format";
import { CHART_COLORS, NETWORK_COLORS } from "./chart-theme";
import { ChartTooltip } from "./chart-tooltip";

export interface NetworkSlice {
  network: string;
  requests: number;
  percent: number;
}

const LIVE_NETWORKS = new Set(["residential"]);

/**
 * Part-to-whole of resolved network classes. All four classes are listed (0 % rows included);
 * networks that are not live yet say so instead of pretending to have traffic.
 */
export function NetworkDonut({ data, size = 156 }: { data: NetworkSlice[]; size?: number }) {
  const nonZero = data.filter((d) => d.requests > 0);
  const total = data.reduce((a, d) => a + d.requests, 0);
  return (
    <div className="flex flex-col items-center gap-5 sm:flex-row sm:items-center">
      <div className="relative shrink-0" style={{ width: size, height: size }}>
        <ResponsiveContainer width="100%" height="100%">
          <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
            <Tooltip content={<ChartTooltip labelFormatter={(_l, p) => titleCase(String(p[0]?.name ?? ""))} valueFormatter={(v) => `${formatNumber(v)} req`} />} />
            <Pie
              data={nonZero.length ? nonZero : [{ network: "none", requests: 1, percent: 0 }]}
              dataKey="requests"
              nameKey="network"
              innerRadius={size / 2 - 22}
              outerRadius={size / 2 - 6}
              paddingAngle={nonZero.length > 1 ? 2 : 0}
              stroke={CHART_COLORS.surface}
              strokeWidth={2}
              isAnimationActive={false}
              cornerRadius={3}
            >
              {(nonZero.length ? nonZero : [{ network: "none" }]).map((d) => (
                <Cell key={d.network} fill={d.network === "none" ? "var(--bg-muted)" : NETWORK_COLORS[d.network] ?? CHART_COLORS.muted} />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-[18px] font-semibold leading-none tracking-tight tabular">{formatNumber(total)}</span>
          <span className="mt-1 text-[11px] text-fg-subtle">resolved</span>
        </div>
      </div>
      <ul className="w-full min-w-0 flex-1 divide-y divide-border text-[13px]">
        {data.map((d) => (
          <li key={d.network} className="flex items-center justify-between gap-3 py-2">
            <span className="flex items-center gap-2 text-fg-muted">
              <span aria-hidden className="inline-block size-2 rounded-[2px]" style={{ backgroundColor: NETWORK_COLORS[d.network] ?? CHART_COLORS.muted }} />
              <span className="text-fg">{d.network === "isp" ? "ISP" : titleCase(d.network)}</span>
              {!LIVE_NETWORKS.has(d.network) ? <span className="text-[11px] text-fg-subtle">coming soon</span> : null}
            </span>
            <span className="flex items-center gap-3 font-mono tabular">
              <span className="text-fg-subtle">{formatNumber(d.requests)}</span>
              <span className="w-12 text-right">{formatPercent(d.percent, d.percent > 0 && d.percent < 1 ? 1 : 0)}</span>
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}