import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Loader2, Save, CreditCard, AlertCircle, CheckCircle2 } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { toast } from "sonner";
import { useTransbankCloudToCloud } from "@/hooks/useTransbankCloudToCloud";

export default function TransbankCloudToCloudPage() {
    const {
      selectedCompany,
      companies,
      loading,
      config,
      formData,
      isSaving,
      setSelectedCompany,
      setFormData,
      saveConfig,
      handleEnvironmentChange,
    } = useTransbankCloudToCloud();

    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        await saveConfig();
        toast.success("Configuración guardada correctamente");
      } catch (error) {
        toast.error("Error al guardar configuración: " + error.message);
      }
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-screen">
                <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
            </div>
        );
    }

    if (companies.length === 0) {
        return (
            <div className="p-6">
                <Card className="max-w-2xl mx-auto">
                    <CardContent className="pt-6">
                        <div className="text-center py-8">
                            <AlertCircle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
                            <p className="text-gray-600">Primero debes crear una empresa</p>
                        </div>
                    </CardContent>
                </Card>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
            <div className="max-w-4xl mx-auto">
                <div className="mb-6">
                    <h1 className="text-3xl font-bold text-gray-900 mb-2">
                        Transbank POS Cloud to Cloud
                    </h1>
                    <p className="text-gray-600">
                        Configura las credenciales de integración Cloud to Cloud de Transbank
                    </p>
                </div>

                {companies.length > 1 && (
                    <Card className="mb-6">
                        <CardContent className="pt-6">
                            <Label>Seleccionar Empresa</Label>
                            <Select
                                value={selectedCompany?.id ? String(selectedCompany.id) : undefined}
                                onValueChange={(companyId) => {
                                    const company = companies.find((c) => String(c.id) === String(companyId));
                                    setSelectedCompany(company);
                                }}
                            >
                                <SelectTrigger>
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    {companies.map((company) => (
                                        <SelectItem key={String(company.id)} value={String(company.id)}>
                                            {company.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </CardContent>
                    </Card>
                )}

                <Card className="glass-card">
                    <CardHeader>
                        <div className="flex items-center justify-between">
                            <div>
                                <CardTitle className="flex items-center gap-2">
                                    <CreditCard className="w-5 h-5" />
                                    Credenciales Transbank
                                </CardTitle>
                                <CardDescription>
                                    {selectedCompany?.name}
                                </CardDescription>
                            </div>
                            {config && (
                                <Badge className={config.is_active ? "bg-emerald-100 text-emerald-800" : "bg-gray-100 text-gray-800"}>
                                    {config.is_active ? (
                                        <>
                                            <CheckCircle2 className="w-3 h-3 mr-1" />
                                            Activa
                                        </>
                                    ) : "Inactiva"}
                                </Badge>
                            )}
                        </div>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                                <h3 className="font-semibold text-sm text-blue-900 mb-2">
                                    📘 Instrucciones
                                </h3>
                                <ol className="text-sm text-blue-800 space-y-1 ml-4 list-decimal">
                                    <li>Ingresa al portal de Transbank: <a href="https://portal.api.tbk.cl/transbank/clientes/" target="_blank" className="underline">portal.api.tbk.cl</a></li>
                                    <li>Crea una aplicación y obtén tu API Key (Clave) y Secret</li>
                                    <li>Suscríbete a la API "api-posintegrado"</li>
                                    <li>Completa los campos a continuación con tus credenciales</li>
                                </ol>
                            </div>

                            <div className="grid md:grid-cols-2 gap-4">
                                <div>
                                    <Label>Código de Comercio *</Label>
                                    <Input
                                        value={formData.commerce_code}
                                        onChange={(e) => setFormData({...formData, commerce_code: e.target.value})}
                                        placeholder="597040002504"
                                        required
                                    />
                                    <p className="text-xs text-gray-500 mt-1">Asignado por Transbank</p>
                                </div>

                                <div>
                                    <Label>Terminal ID *</Label>
                                    <Input
                                        value={formData.terminal_id}
                                        onChange={(e) => setFormData({...formData, terminal_id: e.target.value})}
                                        placeholder="TERM-001"
                                        required
                                    />
                                    <p className="text-xs text-gray-500 mt-1">ID del terminal POS físico</p>
                                </div>
                            </div>

                            <div>
                                <Label>API Key (Clave) *</Label>
                                <Input
                                    value={formData.api_key}
                                    onChange={(e) => setFormData({...formData, api_key: e.target.value})}
                                    placeholder="Clave del portal Transbank"
                                    type="password"
                                    required
                                />
                                <p className="text-xs text-gray-500 mt-1">Obtenida del portal de desarrolladores</p>
                            </div>

                            <div>
                                <Label>API Secret (Secreto) *</Label>
                                <Input
                                    value={formData.api_secret}
                                    onChange={(e) => setFormData({...formData, api_secret: e.target.value})}
                                    placeholder="Secreto del portal Transbank"
                                    type="password"
                                    required
                                />
                                <p className="text-xs text-gray-500 mt-1">Guárdalo de forma segura</p>
                            </div>

                            <div>
                                <Label>Ambiente *</Label>
                                <Select
                                    value={formData.environment}
                                    onValueChange={handleEnvironmentChange}
                                >
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="development">Desarrollo (Testing)</SelectItem>
                                        <SelectItem value="production">Producción</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            <div>
                                <Label>URL Base API</Label>
                                <Input
                                    value={formData.api_base_url}
                                    onChange={(e) => setFormData({...formData, api_base_url: e.target.value})}
                                    placeholder="https://comercio-api.transbank.cl"
                                    readOnly
                                    className="bg-gray-50"
                                />
                                <p className="text-xs text-gray-500 mt-1">Se configura automáticamente según el ambiente</p>
                            </div>

                            <div>
                                <Label>URL de Notificación (Webhook)</Label>
                                <Input
                                    value={formData.notify_url}
                                    onChange={(e) => setFormData({...formData, notify_url: e.target.value})}
                                    placeholder="https://tu-app.com/api/transbank/notify"
                                />
                                <p className="text-xs text-gray-500 mt-1">Endpoint para recibir notificaciones de pago</p>
                            </div>

                            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div>
                                    <Label className="text-base">Activar Integración</Label>
                                    <p className="text-xs text-gray-500">Habilitar pagos con Transbank POS</p>
                                </div>
                                <Switch
                                    checked={formData.is_active}
                                    onCheckedChange={(checked) => setFormData({...formData, is_active: checked})}
                                />
                            </div>

                            <div className="flex justify-end gap-3 pt-4 border-t">
                                <Button
                                    type="submit"
                                    disabled={isSaving}
                                    className="bg-gradient-to-r from-blue-600 to-blue-700"
                                >
                                    {isSaving ? (
                                        <>
                                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                                            Guardando...
                                        </>
                                    ) : (
                                        <>
                                            <Save className="w-4 h-4 mr-2" />
                                            Guardar Configuración
                                        </>
                                    )}
                                </Button>
                            </div>
                        </form>

                        {config && (
                            <div className="mt-6 pt-6 border-t">
                                <h3 className="font-semibold text-sm text-gray-700 mb-2">Estado de Configuración</h3>
                                <div className="grid md:grid-cols-2 gap-3 text-sm">
                                    <div className="bg-gray-50 p-3 rounded">
                                        <span className="text-gray-600">Última actualización:</span>
                                        <p className="font-semibold">{new Date(config.updated_date).toLocaleString('es-CL')}</p>
                                    </div>
                                    <div className="bg-gray-50 p-3 rounded">
                                        <span className="text-gray-600">Configurado por:</span>
                                        <p className="font-semibold">{config.created_by}</p>
                                    </div>
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>

                <Card className="mt-6 border-amber-200 bg-amber-50/50">
                    <CardHeader>
                        <CardTitle className="text-sm flex items-center gap-2 text-amber-800">
                            <AlertCircle className="w-4 h-4" />
                            Importante
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <ul className="text-sm text-amber-900 space-y-2">
                            <li>• <strong>Desarrollo:</strong> Usa credenciales de prueba de Transbank</li>
                            <li>• <strong>Producción:</strong> Requiere aprobación y certificación de Transbank</li>
                            <li>• El <strong>API Secret</strong> se almacena encriptado y no se mostrará después de guardar</li>
                            <li>• Cada empresa puede tener su propia configuración independiente</li>
                            <li>• La integración estará lista cuando actives el proyecto completo</li>
                        </ul>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}