import React, { useState } from 'react';
import { Server, TestTube, Edit, X, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const APIs = () => {
  const [editingApi, setEditingApi] = useState<string | null>(null);
  const {
    apiConfigs,
    loading,
    updateApiConfig,
    testApiConnection,
  } = useSystemConfig();

  const handleApiEdit = (id: string, field: string, value: string) => {
    const config = apiConfigs.find(c => c.id === id);
    if (config) {
      updateApiConfig({ ...config, [field]: value });
      setEditingApi(null);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-gray-900">Configuración de APIs</h2>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Server className="w-5 h-5" />
            APIs Externas
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center p-8">
              <RefreshCw className="w-6 h-6 animate-spin" />
            </div>
          ) : (
            <div className="space-y-4">
              {apiConfigs.map((config) => (
                <div key={config.id} className="border rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h4 className="font-medium">{config.name}</h4>
                    <div className="flex items-center gap-2">
                      <Badge variant={config.status === 'active' ? 'default' : 'secondary'}>
                        {config.status}
                      </Badge>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => testApiConnection(config.id)}
                      >
                        <TestTube className="w-4 h-4 mr-1" />
                        Probar
                      </Button>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <label className="font-medium">Endpoint:</label>
                      {editingApi === config.id + '-endpoint' ? (
                        <div className="flex gap-2 mt-1">
                          <Input
                            defaultValue={config.endpoint}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter') {
                                handleApiEdit(config.id, 'endpoint', e.currentTarget.value);
                              }
                            }}
                          />
                          <Button size="sm" onClick={() => setEditingApi(null)}>
                            <X className="w-4 h-4" />
                          </Button>
                        </div>
                      ) : (
                        <div className="flex items-center gap-2 mt-1">
                          <span className="text-gray-600">{config.endpoint}</span>
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => setEditingApi(config.id + '-endpoint')}
                          >
                            <Edit className="w-4 h-4" />
                          </Button>
                        </div>
                      )}
                    </div>
                    <div>
                      <label className="font-medium">Timeout:</label>
                      <span className="text-gray-600 ml-2">{config.timeout}ms</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

export default APIs;
