import { useState } from 'react';
import { Bed, CheckCircle2, Clock, Wrench, User, Plus, Trash, Edit2, Save, X } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { formatDateDDMMYYYY, getNombreProfesional, isCamaFueraDeGrupo, computeSector, sortCamas } from '@/lib/utils';

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 { Input } from '@/components/ui/input';
import type { Cama, Paciente, Internacion, Grupo } from '@/types';
import { useHospitalStore } from '@/hooks/useHospitalStore';

interface MapaCamasProps {
  camas: Cama[];
  grupos: Grupo[];
  pacientes: Paciente[];
  internaciones: Internacion[];
  onActualizarCama: (id: string, datos: Partial<Cama>) => void;
  onAgregarCama: (cama: Omit<Cama, 'id'>) => Promise<string | void>;
  onEliminarCama: (id: string) => void;
  onIniciarInternacion: (internacion: Omit<Internacion, 'id' | 'activa'>) => Promise<string>;
  onAgregarGrupo: (grupo: Omit<Grupo, 'id'>) => Promise<string | void>;
  onActualizarGrupo: (id: string, datos: Partial<Grupo>) => void;
  onEliminarGrupo: (id: string) => void;
  getPacienteById: (id: string) => Paciente | undefined;
  getInternacionById: (id: string) => Internacion | undefined;
}

export function MapaCamas({
  camas,
  grupos,
  pacientes,
  internaciones,
  onActualizarCama,
  onAgregarCama,
  onEliminarCama,
  onIniciarInternacion,
  onAgregarGrupo,
  onActualizarGrupo,
  onEliminarGrupo,
  getPacienteById,
}: MapaCamasProps) {
  const { canEditCama, currentUser } = useHospitalStore();
  const [filtroSala, setFiltroSala] = useState<string>('todas');
  const [filtroTipo, setFiltroTipo] = useState<string>('todos');
  const [filtroEstado, setFiltroEstado] = useState<string>('todos');
  const [camaSeleccionada, setCamaSeleccionada] = useState<Cama | null>(null);
  const [grupoSeleccionada, setGrupoSeleccionada] = useState<string>('');
  const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
  const [diagnostico, setDiagnostico] = useState('');
  const [enfermedadActual, setEnfermedadActual] = useState('');
  const [antecedentesEnfermedadActual, setAntecedentesEnfermedadActual] = useState('');
  const effectiveMedico = getNombreProfesional(currentUser);
  const [dialogoAbierto, setDialogoAbierto] = useState(false);
  // Grupo dialog state
  const [grupoDialogOpen, setGrupoDialogOpen] = useState(false);
  const [grupoNombre, setGrupoNombre] = useState('');
  const [editingGrupoId, setEditingGrupoId] = useState<string | null>(null);

  // Cama dialog state
  const [bedDialogOpen, setBedDialogOpen] = useState(false);
  const [editingBed, setEditingBed] = useState<Cama | null>(null);
  const [bedNumero, setBedNumero] = useState('');
  const [bedTipo, setBedTipo] = useState<Cama['tipo']>('General');
  const [bedGrupoId, setBedGrupoId] = useState<string | undefined>(undefined);

  const salas = Array.from(new Set(camas.map(c => c.grupoId).filter(Boolean))) as string[];
  const grupoById = Object.fromEntries(grupos.map(a => [a.id, a.nombre]));
  const tipos = Array.from(new Set(camas.map(c => c.tipo)));

  const camasFiltradas = camas.filter(cama => {
    if (filtroSala !== 'todas' && cama.grupoId !== filtroSala) return false;
    if (filtroTipo !== 'todos' && cama.tipo !== filtroTipo) return false;
    if (filtroEstado !== 'todos' && cama.estado !== filtroEstado) return false;
    return true;
  });

  const getEstadoColor = (cama: Cama) => {
    if (cama.estado === 'Disponible') {
      return 'bg-emerald-100 border-emerald-300 text-emerald-800 dark:bg-emerald-950/80 dark:border-emerald-700/60 dark:text-emerald-200';
    }
    if (cama.estado === 'Reservada') {
      return 'bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-950/80 dark:border-orange-700/60 dark:text-orange-200';
    }
    if (cama.estado === 'Ocupada') {
      // Tipos de aislamiento
      const aislamientos = ['Aislamiento KPC', 'Aislamiento COVID', 'Aislamiento Clostridium', 'Aislamiento Neutropenico', 'Aislamiento TBC', 'Aislamiento Escabiosis'];
      if (aislamientos.includes(cama.tipo)) {
        return 'bg-red-100 border-red-300 text-red-800 dark:bg-red-950/80 dark:border-red-700/60 dark:text-red-200';
      }
      return 'bg-blue-100 border-blue-300 text-blue-800 dark:bg-blue-950/80 dark:border-blue-700/60 dark:text-blue-200';
    }
    return 'bg-amber-100 border-amber-300 text-amber-800 dark:bg-amber-950/80 dark:border-amber-700/60 dark:text-amber-200';
  };

  const getEstadoIcono = (cama: Cama) => {
    switch (cama.estado) {
      case 'Disponible': return <CheckCircle2 className="h-5 w-5" />;
      case 'Ocupada': return <User className="h-5 w-5" />;
      case 'Reparacion': return <Wrench className="h-5 w-5" />;
      case 'Reservada': return <Clock className="h-5 w-5" />;
    }
  };

  const sortedCamas = sortCamas(camasFiltradas);

  const handleOcuparCama = () => {
    if (camaSeleccionada && grupoSeleccionada && pacienteSeleccionado && diagnostico && enfermedadActual && effectiveMedico) {
      onIniciarInternacion({
        pacienteId: pacienteSeleccionado,
        camaId: camaSeleccionada.id,
        grupoId: grupoSeleccionada,
        diagnosticoIngreso: diagnostico,
        enfermedadActual,
        antecedentesEnfermedadActual: antecedentesEnfermedadActual || undefined,
        medicoIngresante: effectiveMedico,
      });
      setDialogoAbierto(false);
      setCamaSeleccionada(null);
      setGrupoSeleccionada('');
      setPacienteSeleccionado('');
      setDiagnostico('');
      setEnfermedadActual('');
      setAntecedentesEnfermedadActual('');
    }
  };

  const handleCambiarEstado = (cama: Cama, nuevoEstado: Cama['estado']) => {
    onActualizarCama(cama.id, { estado: nuevoEstado });
  };

  const pacientesSinInternar = pacientes.filter(p => {
    const internacionActiva = internaciones.find(i => i.pacienteId === p.id && i.activa);
    return !internacionActiva;
  });

  return (
    <div className="space-y-6 dark:text-white">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
            <Bed className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
            Camas
          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
            {camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeGrupo(c, grupos)).length} Disponibles
          </Badge>
          <Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700">
            {camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeGrupo(c, grupos)).length} Ocupadas
          </Badge>
          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-800">
            {camas.filter(c => isCamaFueraDeGrupo(c)).length} Fuera de Área
          </Badge>
          <div className="ml-0 sm:ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
            {currentUser?.rol === 'admin' && (
              <Button variant="outline" onClick={() => {
                setEditingGrupoId(null);
                setGrupoNombre('');
                setGrupoDialogOpen(true);
              }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
                Administrar Grupos
              </Button>
            )}
            {currentUser?.rol === 'admin' && (
              <Button variant="outline" onClick={() => {
                setEditingBed(null);
                setBedNumero('');
                setBedTipo('General');
                setBedGrupoId(grupos?.[0]?.id);
                setBedDialogOpen(true);
              }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
                <Plus className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
                <span className="hidden sm:inline">Agregar Cama</span>
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <Label className="text-xs text-gray-500 mb-1 block">Grupo</Label>
              <Select value={filtroSala} onValueChange={setFiltroSala}>
                <SelectTrigger>
                  <SelectValue placeholder="Todos los grupos" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todas">Todos los grupos</SelectItem>
                  {salas.map(sala => (
                    <SelectItem key={sala} value={sala}>{grupoById[sala] ?? sala}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs text-gray-500 mb-1 block">Tipo</Label>
              <Select value={filtroTipo} onValueChange={setFiltroTipo}>
                <SelectTrigger>
                  <SelectValue placeholder="Todos los tipos" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todos">Todos los tipos</SelectItem>
                  {tipos.map(tipo => (
                    <SelectItem key={tipo} value={tipo}>{tipo}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs text-gray-500 mb-1 block">Estado</Label>
              <Select value={filtroEstado} onValueChange={setFiltroEstado}>
                <SelectTrigger>
                  <SelectValue placeholder="Todos los estados" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todos">Todos los estados</SelectItem>
                  <SelectItem value="Disponible">Disponible</SelectItem>
                  <SelectItem value="Ocupada">Ocupada</SelectItem>
                  <SelectItem value="Mantenimiento">Mantenimiento</SelectItem>
                  <SelectItem value="Reservada">Reservada</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Mapa de Camas */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-4">
        {sortedCamas.map((cama) => {
          const internacion = internaciones.find(i => i.camaId === cama.id && i.activa);
          const paciente = internacion ? getPacienteById(internacion.pacienteId) : null;

          return (
            <Dialog key={cama.id}>
              <DialogTrigger asChild>
                <Card
                  className={`cursor-pointer hover:shadow-md transition-shadow border-2 w-full ${getEstadoColor(cama)}`}
                  onClick={() => setCamaSeleccionada(cama)}
                >
                  <CardContent className="p-2 sm:p-4">
                    <div className="flex items-center justify-between mb-1 sm:mb-2">
                      <Bed className="h-4 w-4 sm:h-6 sm:w-6" />
                      {getEstadoIcono(cama)}
                    </div>
                    <p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
                    <p className="text-xs opacity-75 truncate">{cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'} - {computeSector(cama.numero)}</p>
                    <Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50 dark:bg-gray-800 dark:text-gray-300">
                      {cama.tipo}
                    </Badge>
                    {cama.estado === 'Ocupada' && paciente && (
                      <div className="mt-1 sm:mt-2 pt-1 sm:pt-2 border-t border-current/20">
                        <p className="text-xs font-medium truncate">
                          {paciente.apellido}, {paciente.nombre}
                        </p>
                      </div>
                    )}



                  </CardContent>
                </Card>
              </DialogTrigger>
              <DialogContent className="sm:max-w-md">
                <DialogHeader>
                  <DialogTitle className="flex items-center gap-2">
                    <Bed className="h-5 w-5" />
                    Cama {cama.numero} - {cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'}
                  </DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div className="flex items-center gap-2">
                    <Badge className={getEstadoColor(cama)}>
                      {cama.estado}
                    </Badge>
                    <Badge variant="outline">{cama.tipo}</Badge>
                  </div>

                  {cama.estado === 'Ocupada' && paciente && internacion && (
                    <div className="bg-gray-50 dark:bg-gray-800/80 border border-transparent dark:border-gray-700/60 p-4 rounded-lg space-y-2">
                      <p className="font-medium text-gray-900 dark:text-gray-100">Paciente:</p>
                      <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{paciente.apellido}, {paciente.nombre}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">DNI: {paciente.dni}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Ingreso: {internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Diagnóstico: {internacion.diagnosticoIngreso}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">Médico: {internacion.medicoIngresante}</p>
                    </div>
                  )}

                  <div className="space-y-2">
                    <p className="font-medium">Acciones:</p>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                      {cama.estado === 'Disponible' && canEditCama(cama.id) && (
                        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
                          <DialogTrigger asChild>
                            <Button variant="outline"
                              className="w-full"
                              onClick={() => {
                                setCamaSeleccionada(cama);
                                setDialogoAbierto(true);
                              }}
                            >
                              <Plus className="h-4 w-4 mr-1" />
                              Ocupar
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="sm:max-w-lg">
                            <DialogHeader>
                              <DialogTitle>Nueva Internación - Cama {cama.numero}</DialogTitle>
                            </DialogHeader>
                            <div className="space-y-4">
                              <div>
                                <Label>Paciente *</Label>
                                <Select value={pacienteSeleccionado} onValueChange={setPacienteSeleccionado}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="Seleccionar paciente" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {pacientesSinInternar.map(p => (
                                      <SelectItem key={p.id} value={p.id}>
                                        {p.apellido}, {p.nombre} - DNI: {p.dni}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div>
                                <Label>Grupo de Trabajo *</Label>
                                <Select value={grupoSeleccionada} onValueChange={setGrupoSeleccionada}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="Seleccionar área" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {grupos.filter(a => a.nombre !== 'Fuera de grupo').map(a => (
                                      <SelectItem key={a.id} value={a.id}>
                                        {a.nombre}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div>
                                <Label>Diagnóstico de Ingreso *</Label>
                                <textarea
                                  className="w-full p-2 border rounded-md text-sm"
                                  rows={3}
                                  value={diagnostico}
                                  onChange={(e) => setDiagnostico(e.target.value)}
                                  placeholder="Ingrese el diagnóstico..."
                                />
                              </div>
                              <div>
                                <Label>Enfermedad Actual *</Label>
                                <textarea
                                  className="w-full p-2 border rounded-md text-sm"
                                  rows={4}
                                  value={enfermedadActual}
                                  onChange={(e) => setEnfermedadActual(e.target.value)}
                                  placeholder="Describa la enfermedad actual..."
                                />
                              </div>
                              <div>
                                <Label>Antecedentes de Enfermedad Actual</Label>
                                <textarea
                                  className="w-full p-2 border rounded-md text-sm"
                                  rows={3}
                                  value={antecedentesEnfermedadActual}
                                  onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
                                  placeholder="Antecedentes relevantes..."
                                />
                              </div>
                              <div>
                                <Label>Médico Tratante *</Label>
                                <input
                                  type="text"
                                  className="w-full p-2 border rounded-md text-sm bg-gray-100 dark:bg-gray-800 cursor-not-allowed"
                                  value={getNombreProfesional(currentUser)}
                                  disabled
                                  placeholder="Nombre del médico..."
                                />
                              </div>
                              <Button variant="outline"
                                className="w-full"
                                onClick={handleOcuparCama}
                                disabled={!pacienteSeleccionado || !diagnostico || !enfermedadActual || !effectiveMedico}
                              >
                                <Plus className="h-4 w-4 mr-1" />
                                Iniciar Internación
                              </Button>
                            </div>
                          </DialogContent>
                        </Dialog>
)}
                      
                      {cama.estado !== 'Disponible' && cama.estado !== 'Ocupada' && canEditCama(cama.id) && (
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={() => handleCambiarEstado(cama, 'Disponible')}
                        >
                          <CheckCircle2 className="h-4 w-4 mr-1" />
                          Disponible
                        </Button>
                      )}

                      {cama.estado !== 'Reparacion' && cama.estado !== 'Ocupada' && canEditCama(cama.id) && (
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={() => handleCambiarEstado(cama, 'Reparacion')}
                        >
                          <Wrench className="h-4 w-4 mr-1" />
                          Reparacion
                        </Button>
                      )}

                      {cama.estado !== 'Reservada' && cama.estado !== 'Ocupada' && canEditCama(cama.id) && (
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={() => handleCambiarEstado(cama, 'Reservada')}
                        >
                          <Clock className="h-4 w-4 mr-1" />
                          Reservar
                        </Button>
                      )}


                      {canEditCama(cama.id) && (
                        <Button variant="outline" onClick={() => {
                          setEditingBed(cama);
                          setBedNumero(cama.numero);
                          setBedTipo(cama.tipo);
                          setBedGrupoId(cama.grupoId);
                          setBedDialogOpen(true);
                        }}>
                          <Edit2 className="h-4 w-4 mr-1" />Editar
                        </Button>
                      )}
                      {canEditCama(cama.id) && currentUser?.rol === 'admin' && (
                        <Button variant="destructive" onClick={() => {
                          onEliminarCama(cama.id);
                        }}>
                          <Trash className="h-4 w-4 mr-1" />Eliminar
                        </Button>
                      )}
                    </div>
                  </div>
                </div>

              </DialogContent>
            </Dialog>
          );
        })}
      </div>

      {/* Grupo dialog */}
      <Dialog open={grupoDialogOpen} onOpenChange={setGrupoDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editingGrupoId ? 'Editar Grupo' : 'Nuevo Grupo'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Nombre</Label>
              <Input value={grupoNombre} onChange={(e) => setGrupoNombre(e.target.value)} />
            </div>
            <div className="flex gap-2 justify-end">
              {editingGrupoId && (
                <Button size="sm" variant="destructive" onClick={() => { if (confirm('Eliminar grupo?')) { onEliminarGrupo(editingGrupoId); setGrupoDialogOpen(false); } }}>
                  <Trash className="h-4 w-4" />
                </Button>
              )}
              <Button size="sm" variant="outline" onClick={() => setGrupoDialogOpen(false)}>
                <X className="h-4 w-4" />
              </Button>
              <Button size="sm" variant="outline" onClick={() => {
                if (!grupoNombre.trim()) return alert('Nombre requerido');
                if (editingGrupoId) onActualizarGrupo(editingGrupoId, { nombre: grupoNombre });
                else onAgregarGrupo({ nombre: grupoNombre });
                setGrupoDialogOpen(false);
              }}>
                <Save className="h-4 w-4" />
              </Button>
            </div>
            <div>
              <p className="text-sm font-medium">Grupos existentes</p>
              <div className="mt-2 space-y-2">
                {grupos.map(a => (
                  <div key={a.id} className="flex items-center justify-between">
                    <div>{a.nombre}</div>
                    <div className="flex gap-1">
                      <Button size="sm" variant="outline" onClick={() => { setEditingGrupoId(a.id); setGrupoNombre(a.nombre); }}>
                        <Edit2 className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline" className="text-red-600" onClick={() => { if (confirm('Eliminar grupo?')) onEliminarGrupo(a.id); }}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* Bed dialog */}
      <Dialog open={bedDialogOpen} onOpenChange={setBedDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{editingBed ? `Editar Cama ${editingBed.numero}` : 'Nueva Cama'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Número</Label>
              <Input 
                value={bedNumero} 
                onChange={(e) => setBedNumero(e.target.value)} 
                disabled={currentUser?.rol !== 'admin'}
              />
            </div>
            <div>
              <Label>Tipo</Label>
              <Select value={bedTipo} onValueChange={(v) => setBedTipo(v as Cama['tipo'])}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="General">General</SelectItem>
                  <SelectItem value="Aislamiento KPC">Aislamiento KPC</SelectItem>
                  <SelectItem value="Aislamiento COVID">Aislamiento COVID</SelectItem>
                  <SelectItem value="Aislamiento Clostridium">Aislamiento Clostridium</SelectItem>
                  <SelectItem value="Aislamiento Neutropenico">Aislamiento Neutropenico</SelectItem>
                  <SelectItem value="Aislamiento TBC">Aislamiento TBC</SelectItem>
                  <SelectItem value="Aislamiento Escabiosis">Aislamiento Escabiosis</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>Grupo</Label>
              <Select 
                value={bedGrupoId ?? '__none'} 
                onValueChange={(v) => setBedGrupoId(v === '__none' ? undefined : v)}
                disabled={currentUser?.rol !== 'admin'}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccione grupo" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="__none">Sin grupo</SelectItem>
                  {grupos.map(a => (
                    <SelectItem key={a.id} value={a.id}>{a.nombre}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex gap-2 justify-end">
              {editingBed && currentUser?.rol === 'admin' && (
                <Button variant="destructive" onClick={() => { onEliminarCama(editingBed.id); setBedDialogOpen(false); }}>
                  Eliminar
                </Button>
              )}
              <Button variant="outline" onClick={() => setBedDialogOpen(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
              <Button variant="outline" onClick={() => {
                if (!bedNumero.trim()) return alert('Número requerido');
                if (editingBed) {
                  onActualizarCama(editingBed.id, { numero: bedNumero, tipo: bedTipo, grupoId: bedGrupoId });
                } else {
                  onAgregarCama({ numero: bedNumero, tipo: bedTipo, estado: 'Disponible', grupoId: bedGrupoId });
                }
                setBedDialogOpen(false);
              }}>Guardar</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {camasFiltradas.length === 0 && (
        <div className="text-center py-12 text-gray-400">
          <Bed className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">No se encontraron camas con los filtros seleccionados</p>
        </div>
      )}
    </div>
  );
}
