import { useState } from 'react';

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

import { vpnApi } from '@/services/vpnApi';

export function IpManagementPanel() {
  const [ip, setIp] = useState('');

  async function handleReserveIp() {
    try {
      const response =
        await vpnApi.availableIp();

      setIp(response.vpnIp);
    } catch (error) {
      console.error(
        'Failed to reserve IP:',
        error,
      );
    }
  }

  return (
    <Card className="h-full">
      <h3 className="mb-3 font-semibold text-white">
        IP Management
      </h3>

      <p className="mb-4 text-sm text-slate-400">
        Overlay route: 198.19.0.0/16
      </p>

      <div className="flex items-center gap-3">
        <Button onClick={handleReserveIp}>
          Reserve Next Available IP
        </Button>
      </div>

      {ip && (
        <div className="mt-4 rounded-xl border border-green-500/20 bg-green-500/10 p-4">
          <p className="text-sm text-green-300">
            Assigned candidate:
          </p>

          <p className="mt-1 font-mono text-lg font-semibold text-white">
            {ip}
          </p>
        </div>
      )}
    </Card>
  );
}