lr-openwrt-tool/src/components/dashboard/IpPoolChart.tsx

import {
  Cell,
  Pie,
  PieChart,
  ResponsiveContainer,
} from 'recharts';

import { Card } from '@/components/ui/Card';

type IpPoolChartProps = {
  used: number;
  total: number;
};

export function IpPoolChart({
  used,
  total,
}: IpPoolChartProps) {
  const available = Math.max(total - used, 0);

  const percentage =
    total > 0
      ? (used / total) * 100
      : 0;

  const displayPercentage =
    percentage.toFixed(2);

  const data = [
    {
      name: 'Usados',
      value: used,
    },
    {
      name: 'Disponíveis',
      value: available,
    },
  ];

  return (
    <Card className="flex h-full min-h-[380px] flex-col overflow-hidden">
      <div className="shrink-0">
        <h3 className="font-semibold text-white">
          Uso da Pool IP
        </h3>

        <p className="mt-1 text-xs text-slate-500">
          Capacidade de atribuição WireGuard
        </p>
      </div>

      <div className="flex min-h-0 flex-1 flex-col justify-center">
        <div className="relative mx-auto h-40 w-40 sm:h-48 sm:w-48 xl:h-44 xl:w-44 2xl:h-56 2xl:w-56">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                dataKey="value"
                innerRadius="72%"
                outerRadius="92%"
                startAngle={90}
                endAngle={-270}
                paddingAngle={2}
              >
                {data.map((_, index) => (
                  <Cell
                    key={index}
                    fill={
                      index === 0
                        ? '#19d16f'
                        : '#263244'
                    }
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>

          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <p className="text-3xl font-black text-white 2xl:text-4xl">
              {displayPercentage}%
            </p>

            <p className="mt-1 text-xs text-slate-500">
              pool usada
            </p>
          </div>
        </div>

        <div className="mt-5 grid gap-3 2xl:mt-8">
          <div className="grid grid-cols-2 gap-3">
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
              <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                Usados
              </p>

              <p className="mt-1 truncate text-xl font-black text-green-300 2xl:text-2xl">
                {used}
              </p>
            </div>

            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
              <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                Livres
              </p>

              <p className="mt-1 truncate text-xl font-black text-blue-300 2xl:text-2xl">
                {available}
              </p>
            </div>
          </div>

          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
            <div className="mb-2 flex justify-between gap-3 text-xs text-slate-500">
              <span>Capacidade</span>
              <span className="truncate">
                {used} / {total}
              </span>
            </div>

            <div className="h-2 overflow-hidden rounded-full bg-slate-800">
              <div
                className="h-full rounded-full bg-green-400"
                style={{
                  width: `${Math.min(percentage, 100)}%`,
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
}