"use client";

import { useEffect, useState } from 'react';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Trash2, RefreshCw, FileText } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

interface LogEntry {
  id: string;
  timestamp: string;
  method: string;
  url: string;
  status: number;
  duration: number;
}

export function ApiLogs() {
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchLogs = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/vultr/logs');
      if (!response.ok) {
        throw new Error('Failed to fetch logs');
      }
      const data = await response.json();
      setLogs(data.logs || []);
    } catch (error) {
      console.error('Error fetching logs:', error);
    } finally {
      setLoading(false);
    }
  };

  const clearLogs = async () => {
    try {
      const response = await fetch('/api/vultr/logs', {
        method: 'DELETE',
      });
      if (!response.ok) {
        throw new Error('Failed to clear logs');
      }
      setLogs([]);
    } catch (error) {
      console.error('Error clearing logs:', error);
    }
  };

  useEffect(() => {
    fetchLogs();
  }, []);

  const getMethodColor = (method: string) => {
    const colors: Record<string, string> = {
      GET: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20',
      POST: 'bg-green-500/10 text-green-500 dark:bg-green-500/20',
      PUT: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20',
      DELETE: 'bg-red-500/10 text-red-500 dark:bg-red-500/20',
    };
    return colors[method] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20';
  };

  const getStatusColor = (status: number) => {
    if (status >= 200 && status < 300) {
      return 'bg-green-500/10 text-green-500 dark:bg-green-500/20';
    } else if (status >= 300 && status < 400) {
      return 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20';
    } else if (status >= 400 && status < 500) {
      return 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20';
    } else {
      return 'bg-red-500/10 text-red-500 dark:bg-red-500/20';
    }
  };

  return (
    <div className="flex flex-col h-full">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-medium">API Request Logs</h3>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={fetchLogs}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Refresh
          </Button>
          <Button variant="outline" size="sm" onClick={clearLogs}>
            <Trash2 className="h-4 w-4 mr-2" />
            Clear
          </Button>
        </div>
      </div>

      {logs.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-full py-12 text-center">
          <FileText className="h-12 w-12 text-muted-foreground opacity-50 mb-4" />
          <h3 className="text-lg font-medium">No API Logs</h3>
          <p className="text-sm text-muted-foreground mt-2 max-w-md">
            There are no API request logs to display. Logs will appear here as you interact with the Vultr API.
          </p>
        </div>
      ) : (
        <ScrollArea className="h-[calc(100vh-300px)]">
          <div className="space-y-3 pr-4">
            {logs.map((log) => (
              <Card key={log.id} className="overflow-hidden">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <Badge className={getMethodColor(log.method)}>
                        {log.method}
                      </Badge>
                      <Badge className={getStatusColor(log.status)}>
                        {log.status}
                      </Badge>
                    </div>
                    <div className="text-xs text-muted-foreground">
                      {new Date(log.timestamp).toLocaleString()}
                    </div>
                  </div>
                  <div className="text-sm font-mono break-all">{log.url}</div>
                  <div className="text-xs text-muted-foreground mt-1">
                    Duration: {log.duration}ms
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </ScrollArea>
      )}
    </div>
  );
}