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).toFixed(2)
      : '0.00';

  const data = [
    {
      name: 'Used',
      value: used,
    },
    {
      name: 'Available',
      value: available,
    },
  ];

  return (
    <Card className="h-full">
      <h3 className="mb-4 font-semibold text-white">
        IP Pool Usage
      </h3>

      <div className="flex h-[calc(100%-2rem)] items-center justify-between gap-6">
        <div className="h-44 w-44">
          <ResponsiveContainer
            width="100%"
            height="100%"
          >
            <PieChart>
              <Pie
                data={data}
                dataKey="value"
                innerRadius={55}
                outerRadius={78}
                paddingAngle={2}
              >
                {data.map((_, index) => (
                  <Cell
                    key={index}
                    fill={
                      index === 0
                        ? '#19d16f'
                        : '#263244'
                    }
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>

        <div className="text-sm text-slate-300">
          <p>
            <span className="text-green-300">
              {used}
            </span>{' '}
            used IPs
          </p>

          <p className="mt-2">
            <span className="text-blue-300">
              {available}
            </span>{' '}
            available
          </p>

          <p className="mt-4 text-3xl font-bold text-white">
            {percentage}%
          </p>
        </div>
      </div>
    </Card>
  );
}