"use client";

import { useEffect, useState } from 'react';
import { useToast } from '@/hooks/use-toast';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Skeleton } from '@/components/ui/skeleton';
import { RecordForm } from './record-form';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Plus, Trash2, Edit, Loader2, FileWarning } from 'lucide-react';
import { Badge } from './ui/badge';

interface DNSRecord {
  id: string;
  type: string;
  name: string;
  data: string;
  priority?: number;
  ttl: number;
}

interface RecordsListProps {
  apiKey: string;
  domain: string;
}

export function RecordsList({ apiKey, domain }: RecordsListProps) {
  const [records, setRecords] = useState<DNSRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [isAddingRecord, setIsAddingRecord] = useState(false);
  const [editingRecord, setEditingRecord] = useState<DNSRecord | null>(null);
  const [deletingRecordId, setDeletingRecordId] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const { toast } = useToast();

  const fetchRecords = async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/vultr/domains/${domain}/records`, {
        headers: {
          'X-API-Key': apiKey,
        },
      });

      if (!response.ok) {
        throw new Error('Failed to fetch records');
      }

      const data = await response.json();
      setRecords(data.records || []);
    } catch (error) {
      console.error('Error fetching records:', error);
      toast({
        title: 'Error',
        description: 'Failed to fetch DNS records.',
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (domain) {
      fetchRecords();
    }
  }, [domain, apiKey]);

  const handleDeleteRecord = async () => {
    if (!deletingRecordId) return;

    try {
      setIsDeleting(true);
      const response = await fetch(
        `/api/vultr/domains/${domain}/records/${deletingRecordId}`,
        {
          method: 'DELETE',
          headers: {
            'X-API-Key': apiKey,
          },
        }
      );

      if (!response.ok) {
        throw new Error('Failed to delete record');
      }

      toast({
        title: 'Success',
        description: 'DNS record deleted successfully.',
      });

      // Refresh the records list
      fetchRecords();
    } catch (error) {
      console.error('Error deleting record:', error);
      toast({
        title: 'Error',
        description: 'Failed to delete DNS record.',
        variant: 'destructive',
      });
    } finally {
      setIsDeleting(false);
      setDeletingRecordId(null);
    }
  };

  const getRecordTypeColor = (type: string) => {
    const types: Record<string, string> = {
      A: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20',
      AAAA: 'bg-purple-500/10 text-purple-500 dark:bg-purple-500/20',
      CNAME: 'bg-green-500/10 text-green-500 dark:bg-green-500/20',
      MX: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20',
      TXT: 'bg-slate-500/10 text-slate-500 dark:bg-slate-500/20',
      NS: 'bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20',
      SRV: 'bg-rose-500/10 text-rose-500 dark:bg-rose-500/20',
      CAA: 'bg-cyan-500/10 text-cyan-500 dark:bg-cyan-500/20',
    };
    
    return types[type] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20';
  };

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <Skeleton className="h-10 w-32" />
          <Skeleton className="h-10 w-24" />
        </div>
        <div className="border rounded-md">
          <div className="h-12 border-b px-4 flex items-center">
            <Skeleton className="h-4 w-full" />
          </div>
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="h-16 border-b px-4 flex items-center">
              <Skeleton className="h-4 w-full" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (isAddingRecord || editingRecord) {
    return (
      <RecordForm
        apiKey={apiKey}
        domain={domain}
        record={editingRecord}
        onCancel={() => {
          setIsAddingRecord(false);
          setEditingRecord(null);
        }}
        onSuccess={() => {
          setIsAddingRecord(false);
          setEditingRecord(null);
          fetchRecords();
        }}
      />
    );
  }

  return (
    <div className="flex flex-col h-full">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-medium">DNS Records</h3>
        <Button onClick={() => setIsAddingRecord(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Add Record
        </Button>
      </div>

      {records.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-full py-12 text-center">
          <FileWarning className="h-12 w-12 text-muted-foreground opacity-50 mb-4" />
          <h3 className="text-lg font-medium">No DNS Records Found</h3>
          <p className="text-sm text-muted-foreground mt-2 max-w-md">
            This domain doesn't have any DNS records yet. Click the "Add Record" button to create your first record.
          </p>
        </div>
      ) : (
        <ScrollArea className="h-[calc(100vh-300px)]">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Type</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>TTL</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {records.map((record) => (
                  <TableRow key={record.id}>
                    <TableCell>
                      <Badge className={`font-medium ${getRecordTypeColor(record.type)}`}>
                        {record.type}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="font-medium">{record.name || '@'}</div>
                      {record.priority !== undefined && (
                        <div className="text-xs text-muted-foreground">
                          Priority: {record.priority}
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="max-w-[200px] truncate" title={record.data}>
                      {record.data}
                    </TableCell>
                    <TableCell>{record.ttl}</TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => setEditingRecord(record)}
                        >
                          <Edit className="h-4 w-4" />
                          <span className="sr-only">Edit</span>
                        </Button>
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => setDeletingRecordId(record.id)}
                        >
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Delete</span>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </ScrollArea>
      )}

      <AlertDialog open={!!deletingRecordId} onOpenChange={(open) => !open && setDeletingRecordId(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete this DNS record. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteRecord}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Deleting...
                </>
              ) : (
                'Delete'
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}