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: 'Used',
      value: used,
    },
    {
      name: 'Available',
      value: available,
    },
  ];

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

        <p className="text-xs text-slate-500">
          WireGuard allocation capacity
        </p>
      </div>

      <div className="flex min-h-0 flex-1 flex-col justify-center">
        <div className="relative mx-auto h-56 w-56">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                dataKey="value"
                innerRadius={76}
                outerRadius={100}
                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-4xl font-bold text-white">
              {displayPercentage}%
            </p>

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

        <div className="mt-8 space-y-4">
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
            <p className="text-xs uppercase tracking-wide text-slate-500">
              Used IPs
            </p>

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

          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
            <p className="text-xs uppercase tracking-wide text-slate-500">
              Available IPs
            </p>

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

          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
            <div className="mb-2 flex justify-between text-xs text-slate-500">
              <span>Capacity</span>
              <span>{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>
  );
}