// @ts-nocheck
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Truck, Plus, Edit, Phone, Mail, Package, MapPin, Trash2, AlertCircle } from "lucide-react";
import { useShippingCompany } from "@/hooks/useShippingCompany";

export default function ShippingCompaniesPage() {
    const {
        shippingCompanies,
        shippingConfig,
        showModal,
        editingCompany,
        formData,
        activeCompanies,
        totalCapacity,
        isLoading,
        isSaving,
        setFormData,
        setShowModal,
        saveCompany,
        deleteCompany,
        openCreateModal,
        openEditModal,
        closeModal,
    } = useShippingCompany();

    const handleSave = () => {
        if (!formData.name) {
            return;
        }
        saveCompany();
    };

    const handleDelete = (id) => {
        if (confirm("¿Estás seguro de eliminar este transporte?")) {
            deleteCompany(id);
        }
    };

    if (isLoading) {
        return (
            <div className="flex items-center justify-center h-screen">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
                    <p className="text-slate-600">Cargando transportes...</p>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6">
            <div className="max-w-7xl mx-auto space-y-6">
                <div className="flex justify-between items-center">
                    <div>
                        <h1 className="text-3xl font-bold text-slate-900">Empresas de Transporte</h1>
                        <p className="text-slate-600 mt-1">Gestiona las empresas de envío y sus tarifas</p>
                    </div>
                    <div className="flex gap-3">
                        <Button
                            onClick={openCreateModal}
                            className="gap-2 bg-blue-600 hover:bg-blue-700"
                        >
                            <Plus className="w-4 h-4" />
                            Nuevo Transporte
                        </Button>
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Card>
                        <CardContent className="p-6">
                            <div className="flex items-center gap-4">
                                <div className="p-3 bg-blue-100 rounded-lg">
                                    <Truck className="w-6 h-6 text-blue-600" />
                                </div>
                                <div>
                                    <p className="text-sm text-slate-600">Total Transportes</p>
                                    <p className="text-2xl font-bold">{shippingCompanies.length}</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="p-6">
                            <div className="flex items-center gap-4">
                                <div className="p-3 bg-green-100 rounded-lg">
                                    <Package className="w-6 h-6 text-green-600" />
                                </div>
                                <div>
                                    <p className="text-sm text-slate-600">Activos</p>
                                    <p className="text-2xl font-bold">{activeCompanies.length}</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="p-6">
                            <div className="flex items-center gap-4">
                                <div className="p-3 bg-purple-100 rounded-lg">
                                    <MapPin className="w-6 h-6 text-purple-600" />
                                </div>
                                <div>
                                    <p className="text-sm text-slate-600">Capacidad Total</p>
                                    <p className="text-2xl font-bold">{totalCapacity} kg</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {shippingConfig && (
                    <Card className="bg-blue-50 border-blue-200">
                        <CardContent className="p-4">
                            <div className="flex items-start gap-3">
                                <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
                                <div>
                                    <p className="font-medium text-blue-900">Configuración de Envío</p>
                                    <p className="text-sm text-blue-700 mt-1">
                                        Región de origen: {shippingConfig.origin_region} | 
                                        Peso por defecto: {shippingConfig.default_weight_kg} kg
                                    </p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                )}

                {shippingCompanies.length === 0 ? (
                    <Card>
                        <CardContent className="p-12 text-center">
                            <Truck className="w-16 h-16 text-slate-300 mx-auto mb-4" />
                            <h3 className="text-xl font-semibold text-slate-900 mb-2">
                                No hay transportes configurados
                            </h3>
                            <p className="text-slate-600 mb-6">
                                Agrega empresas de transporte para calcular costos de envío automáticamente
                            </p>
                            <Button
                                onClick={openCreateModal}
                                className="gap-2"
                            >
                                <Plus className="w-4 h-4" />
                                Crear Transporte
                            </Button>
                        </CardContent>
                    </Card>
                ) : (
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        {shippingCompanies.map((company) => (
                            <Card key={company.id} className={!company.is_active ? "opacity-60" : ""}>
                                <CardHeader className="pb-3">
                                    <div className="flex justify-between items-start">
                                        <div className="flex items-start gap-3">
                                            <div className="p-2 bg-blue-100 rounded-lg">
                                                <Truck className="w-5 h-5 text-blue-600" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg">{company.name}</CardTitle>
                                                <div className="flex gap-2 mt-2">
                                                    <Badge variant={company.is_active ? "default" : "secondary"}>
                                                        {company.is_active ? "Activo" : "Inactivo"}
                                                    </Badge>
                                                    <Badge variant="outline">
                                                        Max {company.max_weight_kg} kg
                                                    </Badge>
                                                    <Badge variant="outline">
                                                        {company.service_type === "ambos" ? "Domicilio/Sucursal" : 
                                                         company.service_type === "domicilio" ? "Domicilio" : "Sucursal"}
                                                    </Badge>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="flex gap-1">
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                onClick={() => openEditModal(company)}
                                            >
                                                <Edit className="w-4 h-4" />
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                onClick={() => handleDelete(company.id)}
                                            >
                                                <Trash2 className="w-4 h-4 text-red-600" />
                                            </Button>
                                        </div>
                                    </div>
                                </CardHeader>
                                <CardContent className="space-y-4">
                                    {(company.contact_name || company.contact_email || company.contact_phone) && (
                                        <div className="space-y-2">
                                            {company.contact_name && (
                                                <div className="flex items-center gap-2 text-sm">
                                                    <span className="text-slate-600">Contacto:</span>
                                                    <span className="font-medium">{company.contact_name}</span>
                                                </div>
                                            )}
                                            {company.contact_email && (
                                                <div className="flex items-center gap-2 text-sm text-slate-600">
                                                    <Mail className="w-3 h-3" />
                                                    <span>{company.contact_email}</span>
                                                </div>
                                            )}
                                            {company.contact_phone && (
                                                <div className="flex items-center gap-2 text-sm text-slate-600">
                                                    <Phone className="w-3 h-3" />
                                                    <span>{company.contact_phone}</span>
                                                </div>
                                            )}
                                        </div>
                                    )}

                                    {company.rates && company.rates.length > 0 ? (
                                        <div>
                                            <p className="text-sm font-medium text-slate-900 mb-2">Tarifas por Región:</p>
                                            <div className="space-y-2 max-h-40 overflow-y-auto">
                                                {company.rates.map((rate, idx) => (
                                                    <div key={idx} className="bg-slate-50 rounded p-2 text-sm">
                                                        <div className="flex justify-between items-center mb-1">
                                                            <div className="flex items-center gap-2">
                                                                <span>{rate.delivery_type === "domicilio" ? "🏠" : "📦"}</span>
                                                                <span className="font-medium text-slate-900 capitalize">
                                                                    {rate.delivery_type}
                                                                </span>
                                                            </div>
                                                            <p className="font-bold text-blue-600">
                                                                ${rate.cost?.toLocaleString()}
                                                            </p>
                                                        </div>
                                                        <div className="text-xs text-slate-600 mt-1">
                                                            <p className="font-medium mb-1">{rate.regions?.length || 0} regiones:</p>
                                                            <div className="flex flex-wrap gap-1">
                                                                {rate.regions?.slice(0, 3).map((region, i) => (
                                                                    <span key={i} className="bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded text-xs">
                                                                        {region.replace("Región ", "").replace(" de ", " ")}
                                                                    </span>
                                                                ))}
                                                                {rate.regions?.length > 3 && (
                                                                    <span className="text-slate-500">+{rate.regions.length - 3} más</span>
                                                                )}
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    ) : (
                                        <div className="bg-orange-50 border border-orange-200 rounded p-2">
                                            <p className="text-xs text-orange-800">⚠️ Sin tarifas configuradas</p>
                                        </div>
                                    )}

                                    {company.notes && (
                                        <div className="bg-yellow-50 border border-yellow-200 rounded p-2">
                                            <p className="text-xs text-yellow-800">{company.notes}</p>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        ))}
                    </div>
                )}
            </div>

            <Dialog open={showModal} onOpenChange={setShowModal}>
                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle>
                            {editingCompany ? "Editar Transporte" : "Nuevo Transporte"}
                        </DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                        <div className="grid grid-cols-2 gap-4">
                            <div className="col-span-2">
                                <Label>Nombre de la Empresa *</Label>
                                <Input
                                    value={formData.name}
                                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                    placeholder="Ej: NINJA, USEND, etc."
                                />
                            </div>

                            <div>
                                <Label>Contacto</Label>
                                <Input
                                    value={formData.contact_name}
                                    onChange={(e) => setFormData({ ...formData, contact_name: e.target.value })}
                                    placeholder="Nombre del contacto"
                                />
                            </div>

                            <div>
                                <Label>Email</Label>
                                <Input
                                    type="email"
                                    value={formData.contact_email}
                                    onChange={(e) => setFormData({ ...formData, contact_email: e.target.value })}
                                    placeholder="email@empresa.cl"
                                />
                            </div>

                            <div>
                                <Label>Teléfono</Label>
                                <Input
                                    value={formData.contact_phone}
                                    onChange={(e) => setFormData({ ...formData, contact_phone: e.target.value })}
                                    placeholder="+56912345678"
                                />
                            </div>

                            <div>
                                <Label>Peso Máximo (kg) *</Label>
                                <Input
                                    type="number"
                                    value={formData.max_weight_kg}
                                    onChange={(e) => setFormData({ ...formData, max_weight_kg: parseFloat(e.target.value) || 0 })}
                                    placeholder="10"
                                    min="0"
                                    step="0.5"
                                />
                            </div>

                            <div>
                                <Label>Tipo de Servicio *</Label>
                                <select
                                    value={formData.service_type}
                                    onChange={(e) => setFormData({ ...formData, service_type: e.target.value })}
                                    className="w-full h-9 px-3 rounded-md border border-input bg-transparent text-sm"
                                >
                                    <option value="domicilio">Domicilio</option>
                                    <option value="sucursal">Sucursal</option>
                                    <option value="ambos">Ambos</option>
                                </select>
                            </div>

                            <div className="col-span-2">
                                <Label>Notas</Label>
                                <Input
                                    value={formData.notes}
                                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                    placeholder="Información adicional..."
                                />
                            </div>

                            <div className="col-span-2">
                                <label className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        checked={formData.is_active}
                                        onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                                        className="rounded"
                                    />
                                    <span className="text-sm font-medium">Transporte Activo</span>
                                </label>
                            </div>

                            <div className="col-span-2 border-t pt-4">
                                <div className="flex items-center justify-between mb-3">
                                    <Label className="text-base">Tarifas por Región</Label>
                                    <Button
                                        type="button"
                                        size="sm"
                                        onClick={() => {
                                            setFormData({
                                                ...formData,
                                                rates: [...(formData.rates || []), {
                                                    regions: [],
                                                    cost: 0,
                                                    delivery_type: "domicilio",
                                                }],
                                            });
                                        }}
                                        className="gap-2"
                                    >
                                        <Plus className="w-3 h-3" />
                                        Agregar Tarifa
                                    </Button>
                                </div>

                                <div className="space-y-3 max-h-60 overflow-y-auto">
                                    {(formData.rates || []).map((rate, idx) => (
                                        <Card key={idx} className="p-3 bg-slate-50">
                                            <div className="space-y-3">
                                                <div className="flex justify-between items-start">
                                                    <Label className="text-sm">Tarifa #{idx + 1}</Label>
                                                    <Button
                                                        type="button"
                                                        size="sm"
                                                        variant="ghost"
                                                        onClick={() => {
                                                            const newRates = formData.rates.filter((_, i) => i !== idx);
                                                            setFormData({ ...formData, rates: newRates });
                                                        }}
                                                    >
                                                        <Trash2 className="w-3 h-3 text-red-600" />
                                                    </Button>
                                                </div>

                                                <div className="grid grid-cols-2 gap-3">
                                                    <div>
                                                        <Label className="text-xs">Tipo de Entrega</Label>
                                                        <select
                                                            value={rate.delivery_type}
                                                            onChange={(e) => {
                                                                const newRates = [...formData.rates];
                                                                newRates[idx].delivery_type = e.target.value;
                                                                setFormData({ ...formData, rates: newRates });
                                                            }}
                                                            className="w-full h-8 px-2 rounded-md border border-input bg-white text-xs"
                                                        >
                                                            <option value="domicilio">Domicilio</option>
                                                            <option value="sucursal">Sucursal</option>
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <Label className="text-xs">Costo ($)</Label>
                                                        <Input
                                                            type="number"
                                                            value={rate.cost}
                                                            onChange={(e) => {
                                                                const newRates = [...formData.rates];
                                                                newRates[idx].cost = parseFloat(e.target.value) || 0;
                                                                setFormData({ ...formData, rates: newRates });
                                                            }}
                                                            className="h-8 text-xs"
                                                            placeholder="4500"
                                                        />
                                                    </div>
                                                </div>

                                                <div>
                                                    <Label className="text-xs">Regiones ({rate.regions?.length || 0} seleccionadas)</Label>
                                                    <select
                                                        multiple
                                                        value={rate.regions || []}
                                                        onChange={(e) => {
                                                            const selected = Array.from(e.target.selectedOptions, option => option.value);
                                                            const newRates = [...formData.rates];
                                                            newRates[idx].regions = selected;
                                                            setFormData({ ...formData, rates: newRates });
                                                        }}
                                                        className="w-full h-32 px-2 py-1 rounded-md border border-input bg-white text-xs"
                                                    >
                                                        <option value="Región de Arica y Parinacota">Región de Arica y Parinacota</option>
                                                        <option value="Región de Tarapacá">Región de Tarapacá</option>
                                                        <option value="Región de Antofagasta">Región de Antofagasta</option>
                                                        <option value="Región de Atacama">Región de Atacama</option>
                                                        <option value="Región de Coquimbo">Región de Coquimbo</option>
                                                        <option value="Región de Valparaíso">Región de Valparaíso</option>
                                                        <option value="Región Metropolitana de Santiago">Región Metropolitana de Santiago</option>
                                                        <option value="Región del Libertador General Bernardo O'Higgins">Región del Libertador General Bernardo O'Higgins</option>
                                                        <option value="Región del Maule">Región del Maule</option>
                                                        <option value="Región de Ñuble">Región de Ñuble</option>
                                                        <option value="Región del Biobío">Región del Biobío</option>
                                                        <option value="Región de La Araucanía">Región de La Araucanía</option>
                                                        <option value="Región de Los Ríos">Región de Los Ríos</option>
                                                        <option value="Región de Los Lagos">Región de Los Lagos</option>
                                                        <option value="Región de Aysén del General Carlos Ibáñez del Campo">Región de Aysén del General Carlos Ibáñez del Campo</option>
                                                        <option value="Región de Magallanes y de la Antártica Chilena">Región de Magallanes y de la Antártica Chilena</option>
                                                    </select>
                                                    <p className="text-xs text-slate-500 mt-1">Mantén Ctrl/Cmd para seleccionar múltiples</p>
                                                </div>
                                            </div>
                                        </Card>
                                    ))}

                                    {(!formData.rates || formData.rates.length === 0) && (
                                        <div className="text-center py-8 text-slate-400 text-sm">
                                            No hay tarifas configuradas. Haz clic en "Agregar Tarifa" para comenzar.
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-end gap-2 pt-4 border-t">
                            <Button
                                variant="outline"
                                onClick={closeModal}
                            >
                                Cancelar
                            </Button>
                            <Button
                                onClick={handleSave}
                                disabled={isSaving}
                            >
                                {isSaving ? "Guardando..." : "Guardar"}
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </div>
    );
}