import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { 
  Bed, 
  Plus, 
  Search, 
  Filter,
  Edit,
  Trash2,
  CheckCircle,
  AlertCircle,
  Wrench,
  Users,
  DollarSign,
  Wifi,
  Tv,
  Wind,
  Coffee
} from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Switch } from '@/components/ui/switch';

interface Room {
  id: string;
  number: string;
  type: 'single' | 'double' | 'suite' | 'deluxe';
  status: 'available' | 'occupied' | 'maintenance' | 'cleaning';
  floor: number;
  capacity: number;
  price: number;
  amenities: string[];
  guest?: {
    name: string;
    checkIn: string;
    checkOut: string;
  };
}

const RoomManagement = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<string>('all');
  const [rooms, setRooms] = useState<Room[]>([
    {
      id: '1',
      number: '101',
      type: 'single',
      status: 'available',
      floor: 1,
      capacity: 1,
      price: 80,
      amenities: ['wifi', 'tv', 'ac']
    },
    {
      id: '2',
      number: '102',
      type: 'double',
      status: 'occupied',
      floor: 1,
      capacity: 2,
      price: 120,
      amenities: ['wifi', 'tv', 'ac', 'coffee'],
      guest: {
        name: 'Juan Pérez',
        checkIn: '2025-01-15',
        checkOut: '2025-01-20'
      }
    },
    {
      id: '3',
      number: '201',
      type: 'suite',
      status: 'maintenance',
      floor: 2,
      capacity: 4,
      price: 250,
      amenities: ['wifi', 'tv', 'ac', 'coffee']
    },
    {
      id: '4',
      number: '202',
      type: 'deluxe',
      status: 'cleaning',
      floor: 2,
      capacity: 3,
      price: 180,
      amenities: ['wifi', 'tv', 'ac', 'coffee']
    }
  ]);

  const statusConfig = {
    available: { label: 'Disponible', color: 'bg-green-500', icon: CheckCircle },
    occupied: { label: 'Ocupada', color: 'bg-blue-500', icon: Users },
    maintenance: { label: 'Mantenimiento', color: 'bg-orange-500', icon: Wrench },
    cleaning: { label: 'Limpieza', color: 'bg-purple-500', icon: AlertCircle }
  };

  const amenitiesIcons: Record<string, any> = {
    wifi: Wifi,
    tv: Tv,
    ac: Wind,
    coffee: Coffee
  };

  const filteredRooms = rooms.filter(room => {
    const matchesSearch = room.number.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = filterStatus === 'all' || room.status === filterStatus;
    return matchesSearch && matchesStatus;
  });

  const changeRoomStatus = (roomId: string, newStatus: Room['status']) => {
    setRooms(rooms.map(room => 
      room.id === roomId ? { ...room, status: newStatus } : room
    ));
  };

  return (
    <div className="space-y-6">
      {/* Header & Actions */}
      <Card>
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
            <div className="flex-1 w-full md:w-auto">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="Buscar habitación..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Select value={filterStatus} onValueChange={setFilterStatus}>
                <SelectTrigger className="w-full md:w-40">
                  <SelectValue placeholder="Estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  <SelectItem value="available">Disponibles</SelectItem>
                  <SelectItem value="occupied">Ocupadas</SelectItem>
                  <SelectItem value="maintenance">Mantenimiento</SelectItem>
                  <SelectItem value="cleaning">Limpieza</SelectItem>
                </SelectContent>
              </Select>
              <Dialog>
                <DialogTrigger asChild>
                  <Button>
                    <Plus className="w-4 h-4 mr-2" />
                    Nueva Habitación
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Agregar Nueva Habitación</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4 py-4">
                    <div>
                      <Label>Número de Habitación</Label>
                      <Input placeholder="101" />
                    </div>
                    <div>
                      <Label>Tipo</Label>
                      <Select>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar tipo" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="single">Individual</SelectItem>
                          <SelectItem value="double">Doble</SelectItem>
                          <SelectItem value="suite">Suite</SelectItem>
                          <SelectItem value="deluxe">Deluxe</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label>Precio por Noche</Label>
                      <Input type="number" placeholder="80" />
                    </div>
                    <Button className="w-full">Crear Habitación</Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Rooms Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {filteredRooms.map((room) => {
          const StatusIcon = statusConfig[room.status].icon;
          return (
            <Card key={room.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Bed className="w-5 h-5 text-gray-600" />
                    <CardTitle className="text-lg">Hab. {room.number}</CardTitle>
                  </div>
                  <div className={`w-3 h-3 rounded-full ${statusConfig[room.status].color}`}></div>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600">Piso {room.floor}</span>
                  <Badge variant="outline">{room.type}</Badge>
                </div>

                <div className="flex items-center gap-2">
                  <StatusIcon className="w-4 h-4" />
                  <span className="text-sm font-medium">{statusConfig[room.status].label}</span>
                </div>

                {room.guest && (
                  <div className="p-2 bg-blue-50 rounded text-sm">
                    <p className="font-medium">{room.guest.name}</p>
                    <p className="text-xs text-gray-600">
                      {room.guest.checkIn} → {room.guest.checkOut}
                    </p>
                  </div>
                )}

                <div className="flex items-center justify-between pt-2 border-t">
                  <div className="flex items-center gap-1 text-lg font-bold text-green-600">
                    <DollarSign className="w-4 h-4" />
                    {room.price}
                  </div>
                  <div className="flex gap-2">
                    {room.amenities.slice(0, 3).map((amenity) => {
                      const Icon = amenitiesIcons[amenity];
                      return Icon ? <Icon key={amenity} className="w-4 h-4 text-gray-500" /> : null;
                    })}
                  </div>
                </div>

                <div className="flex gap-2 pt-2">
                  <Select
                    value={room.status}
                    onValueChange={(value) => changeRoomStatus(room.id, value as Room['status'])}
                  >
                    <SelectTrigger className="flex-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="available">Disponible</SelectItem>
                      <SelectItem value="occupied">Ocupada</SelectItem>
                      <SelectItem value="maintenance">Mantenimiento</SelectItem>
                      <SelectItem value="cleaning">Limpieza</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button size="sm" variant="outline">
                    <Edit className="w-4 h-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
};

export default RoomManagement;
