import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Plus, MapPin, Edit2, Trash2, Star, StarOff } from "lucide-react";
import { toast } from "sonner";
import { useCustomerAddress } from "@/hooks/useCustomerAddress";

export default function CustomerAddressesPage() {
    const {
      customerId,
      customer,
      addresses,
      isLoading,
      showForm,
      editingAddress,
      formData,
      regiones,
      setFormData,
      setShowForm,
      openCreateForm,
      openEditForm,
      closeForm,
      handleSubmit,
      deleteAddress,
      setDefaultAddress,
    } = useCustomerAddress();

    const handleFormSubmit = async (e) => {
      e.preventDefault();
      try {
        await handleSubmit();
        toast.success(
          editingAddress ? "Direccion actualizada exitosamente" : "Direccion creada exitosamente"
        );
      } catch (error) {
        toast.error("Error al guardar direccion: " + error.message);
      }
    };

    const handleDelete = async (address) => {
      if (
        !window.confirm(
          `¿Estás seguro de eliminar la dirección "${address.address_name || address.street_address}"?`
        )
      ) {
        return;
      }
      try {
        await deleteAddress(address.id);
        toast.success("Direccion eliminada exitosamente");
      } catch (error) {
        toast.error("Error al eliminar direccion: " + error.message);
      }
    };

    if (!customerId) {
        return (
            <div className="p-8 text-center">
                <p className="text-gray-500">No se especificó un cliente</p>
            </div>
        );
    }

    if (!customer) {
        return (
            <div className="p-8 text-center">
                <p className="text-gray-500">Cargando...</p>
            </div>
        );
    }

    return (
        <div className="p-6 max-w-7xl mx-auto space-y-6">
            {/* Header */}
            <div className="flex justify-between items-start">
                <div>
                    <h1 className="text-3xl font-bold text-gray-900">Direcciones de Despacho</h1>
                    <p className="text-gray-500 mt-1">Cliente: {customer.name}</p>
                    <p className="text-gray-400 text-sm">{customer.email}</p>
                </div>
                <Button onClick={openCreateForm} className="bg-blue-600 hover:bg-blue-700">
                    <Plus className="w-4 h-4 mr-2" />
                    Nueva Dirección
                </Button>
            </div>

            {/* Stats */}
            <Card>
                <CardContent className="pt-6">
                    <div className="flex items-center gap-3">
                        <div className="p-2 bg-blue-100 rounded-lg">
                            <MapPin className="w-6 h-6 text-blue-600" />
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">Total de Direcciones</p>
                            <p className="text-2xl font-bold">{addresses.length}</p>
                        </div>
                    </div>
                </CardContent>
            </Card>

            {/* Addresses Grid */}
            {isLoading ? (
                <div className="text-center py-12">
                    <p className="text-gray-500">Cargando direcciones...</p>
                </div>
            ) : addresses.length === 0 ? (
                <Card>
                    <CardContent className="py-12 text-center">
                        <MapPin className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                        <p className="text-gray-500">No hay direcciones registradas</p>
                        <Button onClick={openCreateForm} className="mt-4" variant="outline">
                            <Plus className="w-4 h-4 mr-2" />
                            Agregar Primera Dirección
                        </Button>
                    </CardContent>
                </Card>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {addresses.map((address) => (
                        <Card key={address.id} className={`hover:shadow-lg transition-shadow ${address.is_default ? 'border-2 border-blue-500' : ''}`}>
                            <CardHeader className="pb-3">
                                <div className="flex justify-between items-start">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-2">
                                            <CardTitle className="text-lg">
                                                {address.address_name || "Sin nombre"}
                                            </CardTitle>
                                            {address.is_default && (
                                                <Badge className="bg-blue-100 text-blue-800">
                                                    <Star className="w-3 h-3 mr-1 fill-current" />
                                                    Predeterminada
                                                </Badge>
                                            )}
                                        </div>
                                    </div>
                                    <div className="flex gap-1">
                                        {!address.is_default && (
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                onClick={() => setDefaultAddress(address.id)}
                                                title="Establecer como predeterminada"
                                            >
                                                <StarOff className="w-4 h-4 text-gray-400" />
                                            </Button>
                                        )}
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => openEditForm(address)}
                                        >
                                            <Edit2 className="w-4 h-4 text-blue-600" />
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => handleDelete(address)}
                                        >
                                            <Trash2 className="w-4 h-4 text-red-600" />
                                        </Button>
                                    </div>
                                </div>
                            </CardHeader>
                            <CardContent className="space-y-2">
                                <p className="text-sm font-medium">{address.street_address}</p>
                                <p className="text-sm text-gray-600">{address.comuna}, {address.region}</p>
                                {address.postal_code && (
                                    <p className="text-sm text-gray-600">CP: {address.postal_code}</p>
                                )}
                                {address.reference && (
                                    <p className="text-sm text-gray-500 italic">{address.reference}</p>
                                )}
                                {address.contact_name && (
                                    <div className="pt-2 border-t">
                                        <p className="text-sm text-gray-600">Contacto: {address.contact_name}</p>
                                        {address.contact_phone && (
                                            <p className="text-sm text-gray-600">Tel: {address.contact_phone}</p>
                                        )}
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    ))}
                </div>
            )}

            {/* Form Dialog */}
            <Dialog open={showForm} onOpenChange={setShowForm}>
                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle>
                            {editingAddress ? 'Editar Dirección' : 'Nueva Dirección'}
                        </DialogTitle>
                    </DialogHeader>
                    <form onSubmit={handleFormSubmit}>
                        <div className="space-y-4">
                            <div>
                                <Label>Nombre de la Dirección</Label>
                                <Input
                                    value={formData.address_name}
                                    onChange={(e) => setFormData({ ...formData, address_name: e.target.value })}
                                    placeholder="Ej: Casa, Oficina, Casa Abuela"
                                />
                            </div>

                            <div>
                                <Label>Dirección Completa *</Label>
                                <Input
                                    value={formData.street_address}
                                    onChange={(e) => setFormData({ ...formData, street_address: e.target.value })}
                                    required
                                    placeholder="Calle y número"
                                />
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label>Comuna *</Label>
                                    <Input
                                        value={formData.comuna}
                                        onChange={(e) => setFormData({ ...formData, comuna: e.target.value })}
                                        required
                                        placeholder="Ej: Las Condes"
                                    />
                                </div>

                                <div>
                                    <Label>Región *</Label>
                                    <Select
                                        value={formData.region}
                                        onValueChange={(value) => setFormData({ ...formData, region: value })}
                                        required
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Seleccionar región" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {regiones.map((region) => (
                                                <SelectItem key={region} value={region}>
                                                    {region}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>

                            <div>
                                <Label>Código Postal</Label>
                                <Input
                                    value={formData.postal_code}
                                    onChange={(e) => setFormData({ ...formData, postal_code: e.target.value })}
                                    placeholder="Opcional"
                                />
                            </div>

                            <div>
                                <Label>Referencia</Label>
                                <Textarea
                                    value={formData.reference}
                                    onChange={(e) => setFormData({ ...formData, reference: e.target.value })}
                                    placeholder="Ej: Casa blanca con portón negro, al lado del almacén"
                                    rows={2}
                                />
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <Label>Nombre de Contacto</Label>
                                    <Input
                                        value={formData.contact_name}
                                        onChange={(e) => setFormData({ ...formData, contact_name: e.target.value })}
                                        placeholder="Persona que recibe"
                                    />
                                </div>

                                <div>
                                    <Label>Teléfono de Contacto</Label>
                                    <Input
                                        value={formData.contact_phone}
                                        onChange={(e) => setFormData({ ...formData, contact_phone: e.target.value })}
                                        placeholder="+56 9 1234 5678"
                                    />
                                </div>
                            </div>

                            <div className="flex items-center gap-2">
                                <input
                                    type="checkbox"
                                    id="is_default"
                                    checked={formData.is_default}
                                    onChange={(e) => setFormData({ ...formData, is_default: e.target.checked })}
                                    className="w-4 h-4"
                                />
                                <Label htmlFor="is_default" className="cursor-pointer">
                                    Establecer como dirección predeterminada
                                </Label>
                            </div>
                        </div>
                        <DialogFooter className="mt-6">
                            <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
                                
                                Cancelar
                            </Button>
                            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
                                {editingAddress ? 'Actualizar' : 'Guardar'}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </div>
    );
}