"use client";

import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
import type { ServiceData } from "../lib/types";

const STATUS_COLORS: Record<string, string> = {
  used: "#22c55e",
  unused: "#ef4444",
};

const STATUS_LABELS: Record<string, string> = {
  used: "Used",
  unused: "Unused",
};

export function StatusChart({ endpoints }: { endpoints: ServiceData["endpoints"] }) {
  const data = [
    { name: STATUS_LABELS.used, value: endpoints.used.count, color: STATUS_COLORS.used },
    { name: STATUS_LABELS.unused, value: endpoints.unused.count, color: STATUS_COLORS.unused },
  ].filter((d) => d.value > 0);

  return (
    <ResponsiveContainer width="100%" height={140}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          innerRadius={35}
          outerRadius={55}
          paddingAngle={2}
          dataKey="value"
          stroke="none"
        >
          {data.map((entry, i) => (
            <Cell key={i} fill={entry.color} />
          ))}
        </Pie>
        <Tooltip
          formatter={(value) => [`${value} endpoints`]}
          contentStyle={{
            backgroundColor: "var(--background-surface)",
            border: "1px solid var(--border)",
            borderRadius: "0.5rem",
            color: "var(--text-primary)",
          }}
          itemStyle={{ color: "var(--text-primary)" }}
          labelStyle={{ color: "var(--text-secondary)" }}
        />
      </PieChart>
    </ResponsiveContainer>
  );
}

export { STATUS_COLORS, STATUS_LABELS };