import { useState } from 'react';
import { useTrips } from '@/hooks/useTrips';
import { TripStatus } from '@/services/tripsApi';
import {
  Plane,
  Plus,
  Trash2,
  Edit2,
  Eye,
  Calendar,
  Users,
  DollarSign,
  MapPin,
  RefreshCw,
  Search,
  MoreVertical,
  Clock,
  CheckCircle,
  XCircle,
  PlayCircle,
  PauseCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

const statusConfig: Record<TripStatus, { label: string; icon: any; color: string }> = {
  planning: { label: 'Planificando', icon: Clock, color: 'bg-yellow-500' },
  upcoming: { label: 'Próximo', icon: Calendar, color: 'bg-blue-500' },
  in_progress: { label: 'En progreso', icon: PlayCircle, color: 'bg-green-500' },
  completed: { label: 'Completado', icon: CheckCircle, color: 'bg-gray-500' },
  cancelled: { label: 'Cancelado', icon: XCircle, color: 'bg-red-500' },
};

const Trips = () => {
  const {
    trips,
    stats,
    loading,
    error,
    selectedStatus,
    loadTrips,
    createTrip,
    updateTrip,
    deleteTrip,
    getTripById,
    selectedTrip,
    setSelectedTrip,
    changeStatus,
  } = useTrips();

  const [searchTerm, setSearchTerm] = useState('');
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [tripToDelete, setTripToDelete] = useState<string | null>(null);

  // Form state
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    destination: '',
    startDate: '',
    endDate: '',
    travelersCount: 1,
    estimatedBudget: 0,
    currency: 'USD',
    isPublic: false,
  });

  const filteredTrips = trips.filter(trip =>
    trip.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    trip.destination?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    trip.description?.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleRefresh = async () => {
    await loadTrips();
  };

  const handleCreate = async () => {
    const result = await createTrip(formData);
    if (result) {
      setIsCreateDialogOpen(false);
      resetForm();
    }
  };

  const handleEdit = async () => {
    if (!selectedTrip) return;
    const success = await updateTrip(selectedTrip.id, formData);
    if (success) {
      setIsEditDialogOpen(false);
      resetForm();
    }
  };

  const handleDelete = async () => {
    if (!tripToDelete) return;
    const success = await deleteTrip(tripToDelete);
    if (success) {
      setIsDeleteDialogOpen(false);
      setTripToDelete(null);
    }
  };

  const openEditDialog = async (tripId: string) => {
    const trip = await getTripById(tripId);
    if (trip) {
      setFormData({
        name: trip.name,
        description: trip.description || '',
        destination: trip.destination || '',
        startDate: trip.startDate || '',
        endDate: trip.endDate || '',
        travelersCount: trip.travelersCount || 1,
        estimatedBudget: trip.estimatedBudget || 0,
        currency: trip.currency || 'USD',
        isPublic: trip.isPublic,
      });
      setIsEditDialogOpen(true);
    }
  };

  const openDeleteDialog = (tripId: string) => {
    setTripToDelete(tripId);
    setIsDeleteDialogOpen(true);
  };

  const resetForm = () => {
    setFormData({
      name: '',
      description: '',
      destination: '',
      startDate: '',
      endDate: '',
      travelersCount: 1,
      estimatedBudget: 0,
      currency: 'USD',
      isPublic: false,
    });
    setSelectedTrip(null);
  };

  const formatDate = (date: string | undefined) => {
    if (!date) return '-';
    return new Date(date).toLocaleDateString('es-ES', {
      day: 'numeric',
      month: 'short',
      year: 'numeric',
    });
  };

  if (loading && trips.length === 0) {
    return (
      <div className="body-content">
        <div className="container-xxl">
          <div className="flex items-center justify-center min-h-96">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
              <p className="mt-4 text-muted-foreground">Cargando viajes...</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="body-content">
      <div className="container-xxl">
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Plane className="h-6 w-6 text-primary" />
              Gestión de Viajes
            </h1>
            <p className="text-muted-foreground mt-1">
              Administra los itinerarios de viaje de los usuarios
            </p>
          </div>
          <div className="flex gap-2 mt-4 md:mt-0">
            <Button onClick={handleRefresh} variant="outline">
              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
              Actualizar
            </Button>
            <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
              <DialogTrigger asChild>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Nuevo Viaje
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-lg">
                <DialogHeader>
                  <DialogTitle>Crear Viaje</DialogTitle>
                  <DialogDescription>
                    Crea un nuevo itinerario de viaje.
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4 max-h-96 overflow-y-auto">
                  <div className="space-y-2">
                    <Label htmlFor="name">Nombre del viaje</Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="Mi viaje a..."
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="destination">Destino</Label>
                    <Input
                      id="destination"
                      value={formData.destination}
                      onChange={(e) => setFormData({ ...formData, destination: e.target.value })}
                      placeholder="Punta Cana, RD"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="description">Descripción</Label>
                    <Textarea
                      id="description"
                      value={formData.description}
                      onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                      placeholder="Describe tu viaje..."
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="startDate">Fecha inicio</Label>
                      <Input
                        id="startDate"
                        type="date"
                        value={formData.startDate}
                        onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="endDate">Fecha fin</Label>
                      <Input
                        id="endDate"
                        type="date"
                        value={formData.endDate}
                        onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="travelers">Viajeros</Label>
                      <Input
                        id="travelers"
                        type="number"
                        min="1"
                        value={formData.travelersCount}
                        onChange={(e) => setFormData({ ...formData, travelersCount: parseInt(e.target.value) || 1 })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="budget">Presupuesto</Label>
                      <Input
                        id="budget"
                        type="number"
                        min="0"
                        value={formData.estimatedBudget}
                        onChange={(e) => setFormData({ ...formData, estimatedBudget: parseFloat(e.target.value) || 0 })}
                      />
                    </div>
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
                    Cancelar
                  </Button>
                  <Button onClick={handleCreate} disabled={!formData.name}>
                    Crear
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>

        {/* Stats Cards */}
        {stats && (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">
                  Total Viajes
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.totalTrips}</div>
              </CardContent>
            </Card>
            {Object.entries(stats.byStatus || {}).map(([status, count]) => {
              const config = statusConfig[status as TripStatus];
              const Icon = config?.icon || Clock;
              return (
                <Card key={status}>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1">
                      <Icon className="h-3 w-3" />
                      {config?.label || status}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-xl font-bold">{count}</div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}

        {/* Filters */}
        <Card className="mb-6">
          <CardContent className="pt-6">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Buscar viajes..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>
              <div className="w-full md:w-48">
                <Select
                  value={selectedStatus || 'all'}
                  onValueChange={(value) => changeStatus(value === 'all' ? undefined : value as TripStatus)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Filtrar por estado" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos los estados</SelectItem>
                    {Object.entries(statusConfig).map(([value, config]) => (
                      <SelectItem key={value} value={value}>
                        {config.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Error State */}
        {error && (
          <Card className="mb-6 border-destructive">
            <CardContent className="pt-6">
              <p className="text-destructive">{error}</p>
              <Button onClick={handleRefresh} variant="outline" className="mt-2">
                Reintentar
              </Button>
            </CardContent>
          </Card>
        )}

        {/* Empty State */}
        {!loading && filteredTrips.length === 0 && (
          <Card>
            <CardContent className="pt-6">
              <div className="text-center py-12">
                <Plane className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
                <h3 className="text-xl font-semibold mb-2">No hay viajes</h3>
                <p className="text-muted-foreground mb-4">
                  {searchTerm
                    ? 'No se encontraron viajes con ese término de búsqueda.'
                    : selectedStatus
                    ? `No hay viajes con estado "${statusConfig[selectedStatus]?.label}".`
                    : 'Crea tu primer itinerario de viaje.'}
                </p>
                <Button onClick={() => setIsCreateDialogOpen(true)}>
                  <Plus className="h-4 w-4 mr-2" />
                  Crear Viaje
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Trips Grid */}
        {filteredTrips.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredTrips.map((trip) => {
              const statusInfo = statusConfig[trip.status];
              const StatusIcon = statusInfo?.icon || Clock;
              return (
                <Card key={trip.id} className="overflow-hidden">
                  <div
                    className="h-32 relative bg-gradient-to-br from-primary/20 to-primary/5"
                    style={{
                      backgroundImage: trip.coverImageUrl
                        ? `url(${trip.coverImageUrl})`
                        : undefined,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center',
                    }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                    <div className="absolute bottom-3 left-3 right-3">
                      <h3 className="text-white font-bold text-lg truncate">{trip.name}</h3>
                      {trip.destination && (
                        <p className="text-white/80 text-sm flex items-center gap-1">
                          <MapPin className="h-3 w-3" />
                          {trip.destination}
                        </p>
                      )}
                    </div>
                    <div className="absolute top-2 right-2">
                      <Badge className={`${statusInfo?.color} text-white`}>
                        <StatusIcon className="h-3 w-3 mr-1" />
                        {statusInfo?.label}
                      </Badge>
                    </div>
                  </div>
                  <CardContent className="pt-4">
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          {formatDate(trip.startDate)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Users className="h-4 w-4" />
                          {trip.travelersCount}
                        </span>
                      </div>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => getTripById(trip.id)}>
                            <Eye className="h-4 w-4 mr-2" />
                            Ver detalles
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => openEditDialog(trip.id)}>
                            <Edit2 className="h-4 w-4 mr-2" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            className="text-destructive"
                            onClick={() => openDeleteDialog(trip.id)}
                          >
                            <Trash2 className="h-4 w-4 mr-2" />
                            Eliminar
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                    {trip.estimatedBudget && trip.estimatedBudget > 0 && (
                      <div className="flex items-center gap-1 text-sm">
                        <DollarSign className="h-4 w-4 text-green-500" />
                        <span className="font-medium">
                          {trip.estimatedBudget.toLocaleString('es-ES')} {trip.currency}
                        </span>
                      </div>
                    )}
                    {trip.days && trip.days.length > 0 && (
                      <p className="text-sm text-muted-foreground mt-2">
                        {trip.days.length} días planificados
                      </p>
                    )}
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}

        {/* Edit Dialog */}
        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Editar Viaje</DialogTitle>
              <DialogDescription>
                Modifica los detalles del viaje.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4 max-h-96 overflow-y-auto">
              <div className="space-y-2">
                <Label htmlFor="edit-name">Nombre del viaje</Label>
                <Input
                  id="edit-name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-destination">Destino</Label>
                <Input
                  id="edit-destination"
                  value={formData.destination}
                  onChange={(e) => setFormData({ ...formData, destination: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-description">Descripción</Label>
                <Textarea
                  id="edit-description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-startDate">Fecha inicio</Label>
                  <Input
                    id="edit-startDate"
                    type="date"
                    value={formData.startDate}
                    onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-endDate">Fecha fin</Label>
                  <Input
                    id="edit-endDate"
                    type="date"
                    value={formData.endDate}
                    onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-travelers">Viajeros</Label>
                  <Input
                    id="edit-travelers"
                    type="number"
                    min="1"
                    value={formData.travelersCount}
                    onChange={(e) => setFormData({ ...formData, travelersCount: parseInt(e.target.value) || 1 })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-budget">Presupuesto</Label>
                  <Input
                    id="edit-budget"
                    type="number"
                    min="0"
                    value={formData.estimatedBudget}
                    onChange={(e) => setFormData({ ...formData, estimatedBudget: parseFloat(e.target.value) || 0 })}
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleEdit} disabled={!formData.name}>
                Guardar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* Delete Dialog */}
        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>¿Eliminar viaje?</AlertDialogTitle>
              <AlertDialogDescription>
                Esta acción no se puede deshacer. El viaje y todos sus días y actividades serán eliminados permanentemente.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancelar</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDelete}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                Eliminar
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>

        {/* Footer */}
        <div className="mt-6 text-center text-sm text-muted-foreground">
          Mostrando {filteredTrips.length} de {trips.length} viajes
        </div>
      </div>
    </div>
  );
};

export default Trips;