import { useState, useEffect } from 'react';
import { ClipboardList, Plus, Search, LogOut, CheckCircle2, MoreHorizontal, FileText, Trash2, Bed, User, Calendar, IdCard, Activity, CalendarDays, Clock, Settings, ListTodo } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { toast } from 'sonner';
import type { Internacion, Paciente, Cama, Grupo, Evolucion, Laboratorio, Cultivo } from '@/types';
import { formatDateDDMMYYYY, getNombreProfesional, sortCamas, getLocalToday } from '@/lib/utils';
import { useHospitalStore } from '@/hooks/useHospitalStore';

interface InternacionesProps {
  internaciones: Internacion[];
  pacientes: Paciente[];
  camas: Cama[];
  evoluciones?: Evolucion[];
  laboratorios?: Laboratorio[];
  cultivos?: Cultivo[];
  grupos: Grupo[];
  onIniciarInternacion: (internacion: Omit<Internacion, 'id' | 'activa'>) => void;
  onFinalizarInternacion: (internacionId: string, datos: {
    fechaEgreso: string;
    diagnosticoEgreso: string;
    motivoEgreso: Internacion['motivoEgreso'];
    servicioAlQuePasa?: string;
  }) => void;
  onEliminarInternacion?: (internacionId: string) => Promise<void> | void;
  getPacienteById: (id: string) => Paciente | undefined;
  getCamaById: (id: string) => Cama | undefined;
  onVerHC?: (internacionId: string) => void;
  onNuevoIngreso?: () => void;
  onVerPendientesDeSala?: () => void;
}

export function Internaciones({
  internaciones,
  pacientes,
  camas,
  onIniciarInternacion,
  onFinalizarInternacion,
  onEliminarInternacion,
  getPacienteById,
  getCamaById,
  grupos,
  onVerHC,
  onNuevoIngreso,
  onVerPendientesDeSala,
}: InternacionesProps) {
  const { currentUser, refreshState } = useHospitalStore();

  useEffect(() => {
    refreshState();
  }, [refreshState]);
  const [filtroEstado, setFiltroEstado] = useState<'todas' | 'activas' | 'finalizadas'>('todas');
  const [dialogoNuevaAbierto, setDialogoNuevaAbierto] = useState(false);
  const [dialogoEgresoAbierto, setDialogoEgresoAbierto] = useState(false);
  const [dialogoEliminarAbierto, setDialogoEliminarAbierto] = useState(false);
  const [internacionSeleccionada, setInternacionSeleccionada] = useState<Internacion | null>(null);
  const [internacionAEliminar, setInternacionAEliminar] = useState<Internacion | null>(null);
  const [busqueda, setBusqueda] = useState('');
  const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
  const [camaSeleccionada, setCamaSeleccionada] = useState<string>('');
  const [grupoSeleccionada, setGrupoSeleccionada] = useState<string>('');
  const [diagnosticoIngreso, setDiagnosticoIngreso] = useState('');
  const [enfermedadActual, setEnfermedadActual] = useState('');
  const [motivoConsulta, setMotivoConsulta] = useState('');
  const [antecedentesEnfermedadActual, setAntecedentesEnfermedadActual] = useState('');
  const effectiveMedico = getNombreProfesional(currentUser);

  // Formulario nueva internación
  const [fechaEgreso, setFechaEgreso] = useState('');
  const [diagnosticoEgreso, setDiagnosticoEgreso] = useState('');
  const [motivoEgreso, setMotivoEgreso] = useState<Internacion['motivoEgreso']>('Alta médica');
  const [servicioAlQuePasa, setServicioAlQuePasa] = useState('');

  const resetFormularioNueva = () => {
    setPacienteSeleccionado('');
    setCamaSeleccionada('');
    setGrupoSeleccionada('');
    setDiagnosticoIngreso('');
    setEnfermedadActual('');
    setAntecedentesEnfermedadActual('');
  };

  const resetFormularioEgreso = () => {
    setFechaEgreso('');
    setDiagnosticoEgreso('');
    setMotivoEgreso('Alta médica');
    setServicioAlQuePasa('');
    setInternacionSeleccionada(null);
  };

  const handleIniciarInternacion = async () => {
    if (pacienteSeleccionado && camaSeleccionada && grupoSeleccionada && (diagnosticoIngreso || motivoConsulta) && enfermedadActual && effectiveMedico) {
      try {
        await onIniciarInternacion({
          pacienteId: pacienteSeleccionado,
          camaId: camaSeleccionada,
          grupoId: grupoSeleccionada,
          diagnosticoIngreso: diagnosticoIngreso || motivoConsulta,
          motivoConsulta,
          enfermedadActual,
          antecedentesEnfermedadActual: antecedentesEnfermedadActual || undefined,
          medicoIngresante: effectiveMedico,
        });
        toast.success('Internación iniciada correctamente');
        resetFormularioNueva();
        setDialogoNuevaAbierto(false);
      } catch (err) {
        console.error('Error al iniciar internación:', err);
        toast.error('Error al iniciar la internación');
      }
    } else {
      toast.error('Por favor complete todos los campos obligatorios');
    }
  };

  const handleFinalizarInternacion = () => {
    if (internacionSeleccionada && fechaEgreso && diagnosticoEgreso && motivoEgreso) {
      if (motivoEgreso === 'Pase servicio' && !servicioAlQuePasa.trim()) {
        toast.error('Por favor indique el servicio al que pasa');
        return;
      }
      onFinalizarInternacion(internacionSeleccionada.id, {
        fechaEgreso,
        diagnosticoEgreso,
        motivoEgreso,
        servicioAlQuePasa: motivoEgreso === 'Pase servicio' ? servicioAlQuePasa : undefined,
      });
      resetFormularioEgreso();
      setDialogoEgresoAbierto(false);
    }
  };

  const sortedCamas = sortCamas(camas);

  const getCamaIndex = (camaId?: string) => {
    if (!camaId) return 999999;
    const index = sortedCamas.findIndex(c => c.id === camaId);
    return index !== -1 ? index : 999999;
  };

  const internacionesFiltradas = internaciones.filter(i => {
    const paciente = getPacienteById(i.pacienteId);
    const cumpleBusqueda = !busqueda ||
      (paciente && (
        paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
        paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
        paciente.dni.includes(busqueda)
      ));

    const cumpleEstado = filtroEstado === 'todas' ||
      (filtroEstado === 'activas' && i.activa) ||
      (filtroEstado === 'finalizadas' && !i.activa);

    return cumpleBusqueda && cumpleEstado;
  }).sort((a, b) => {
    const indexA = getCamaIndex(a.camaId);
    const indexB = getCamaIndex(b.camaId);
    if (indexA !== indexB) {
      return indexA - indexB;
    }
    return new Date(b.fechaIngresoClinica || '').getTime() - new Date(a.fechaIngresoClinica || '').getTime();
  });

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

  const getGrupoName = (grupoId?: string) => grupos.find(a => a.id === grupoId)?.nombre;

  const calcularEdad = (fechaNacimiento?: string) => {
    if (!fechaNacimiento) return '-';
    const hoy = new Date();
    const nacimiento = new Date(fechaNacimiento);
    if (isNaN(nacimiento.getTime())) return '-';
    let edad = hoy.getFullYear() - nacimiento.getFullYear();
    const m = hoy.getMonth() - nacimiento.getMonth();
    if (m < 0 || (m === 0 && hoy.getDate() < nacimiento.getDate())) {
      edad--;
    }
    return edad >= 0 ? `${edad} años` : '-';
  };

  const calcularDiasDuracion = (internacion: Internacion) => {
    const fechaStr = internacion.fechaIngresoClinica || internacion.fechaIngreso;
    if (!fechaStr) return null;

    const hoy = new Date();
    let fechaFin = hoy;

    if (!internacion.activa && internacion.fechaEgreso) {
      const egreso = new Date(internacion.fechaEgreso.includes('T') ? internacion.fechaEgreso : `${internacion.fechaEgreso}T00:00:00`);
      if (!isNaN(egreso.getTime())) {
        fechaFin = egreso;
      }
    }

    const ingreso = new Date(fechaStr.includes('T') ? fechaStr : `${fechaStr}T00:00:00`);
    if (isNaN(ingreso.getTime())) return null;

    const inicioD = new Date(ingreso.getFullYear(), ingreso.getMonth(), ingreso.getDate());
    const finD = new Date(fechaFin.getFullYear(), fechaFin.getMonth(), fechaFin.getDate());

    const diffMs = finD.getTime() - inicioD.getTime();
    const dias = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    return dias < 0 ? 0 : dias;
  };

  const abrirDialogoEgreso = (internacion: Internacion) => {
    setInternacionSeleccionada(internacion);
    setFechaEgreso(getLocalToday());
    setDialogoEgresoAbierto(true);
  };

  // Ver Historia Clínica (navegar a página)

  return (
    <div className="space-y-6 dark:text-white">
      {/* Header */}
      <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">
            <ClipboardList className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
            Internaciones
          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de internaciones en sala</p>
        </div>
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
          <Dialog open={dialogoNuevaAbierto} onOpenChange={setDialogoNuevaAbierto}>
            <DialogTrigger asChild>
              <Button variant="outline" onClick={() => onNuevoIngreso ? onNuevoIngreso() : setDialogoNuevaAbierto(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Nuevo Ingreso
              </Button>
            </DialogTrigger>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>Nuevo Ingreso</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label>Paciente *</Label>
                {!pacienteSeleccionado ? (
                  <>
                    <Input
                      placeholder="Buscar por apellido, nombre o DNI"
                      value={busqueda}
                      onChange={(e) => setBusqueda(e.target.value)}
                      className="mb-2"
                    />
                    <div className="max-h-48 overflow-auto border rounded-md">
                      {(() => {
                        const q = busqueda.trim().toLowerCase();
                        if (!q) {
                          return (
                            <div className="p-2 text-sm text-gray-500">Escribe apellido, nombre o DNI para buscar</div>
                          );
                        }
                        const matches = pacientesSinInternar.filter(p => (
                          p.apellido.toLowerCase().includes(q) ||
                          p.nombre.toLowerCase().includes(q) ||
                          p.dni.includes(q)
                        ));
                        if (matches.length === 0) {
                          return <div className="p-2 text-sm text-gray-500">No se encontraron pacientes coincidentes</div>;
                        }
                        return matches.map(p => (
                          <button
                            key={p.id}
                            type="button"
                            onClick={() => setPacienteSeleccionado(p.id)}
                            className={`w-full text-left p-2 hover:bg-gray-50 ${pacienteSeleccionado === p.id ? 'bg-gray-100' : ''}`}
                          >
                            {p.apellido}, {p.nombre} — DNI: {p.dni}
                          </button>
                        ));
                      })()}
                    </div>
                  </>
                ) : (
                  <div className="flex items-center gap-2">
                    <Badge className="bg-gray-100 text-gray-800 px-3 py-1">
                      {(() => {
                        const p = pacientes.find(x => x.id === pacienteSeleccionado);
                        return p ? `${p.apellido}, ${p.nombre} — DNI: ${p.dni}` : '';
                      })()}
                    </Badge>
                    <Button size="sm" variant="outline" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
                  </div>
                )}
              </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>Cama *</Label>
                <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar cama" />
                  </SelectTrigger>
                  <SelectContent>
                    {sortedCamas.filter(c => c.estado === 'Disponible').map(c => (
                      <SelectItem key={c.id} value={c.id}>
                        {c.numero} - {getGrupoName(c.grupoId) || 'Sin grupo'} ({c.tipo})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Motivo de Consulta *</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                  value={motivoConsulta}
                  onChange={(e) => setMotivoConsulta(e.target.value)}
                  placeholder="Motivo de consulta..."
                />
              </div>
              <div>
                <Label>Enfermedad Actual *</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[100px]"
                  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 min-h-[80px]"
                  value={antecedentesEnfermedadActual}
                  onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
                  placeholder="Antecedentes relevantes de la enfermedad actual..."
                />
              </div>
              <div>
                <Label>Médico Ingresante *</Label>
                <Input
                  value={getNombreProfesional(currentUser)}
                  disabled
                  placeholder="Nombre del médico ingresante"
                />
              </div>
              <Button variant="outline"
                className="w-full"
                onClick={handleIniciarInternacion}
                disabled={!pacienteSeleccionado || !camaSeleccionada || !motivoConsulta || !enfermedadActual || !effectiveMedico}
              >
                <Plus className="h-4 w-4 mr-2" />
                Iniciar Internación
              </Button>
            </div>
          </DialogContent>
          </Dialog>

          <Button
            variant="outline"
            onClick={() => onVerPendientesDeSala ? onVerPendientesDeSala() : null}
            className="flex items-center gap-2"
          >
            <ListTodo className="h-4 w-4" />
            Pendientes
          </Button>
        </div>
      </div>

      {/* Filtros */}
      <Card>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div className="relative sm:col-span-2">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                className="pl-10"
                placeholder="Buscar paciente..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
              />
            </div>
            <div>
              <Select value={filtroEstado} onValueChange={(v: 'todas' | 'activas' | 'finalizadas') => setFiltroEstado(v)}>
                <SelectTrigger>
                  <SelectValue placeholder="Filtrar por estado" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todas">Todas las internaciones</SelectItem>
                  <SelectItem value="activas">Internaciones activas</SelectItem>
                  <SelectItem value="finalizadas">Internaciones finalizadas</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Lista de Internaciones en Tabla */}
      {internacionesFiltradas.length === 0 ? (
        <div className="text-center py-12 text-gray-400">
          <ClipboardList className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">
            {busqueda || filtroEstado !== 'todas'
              ? 'No se encontraron internaciones con esos filtros'
              : 'No hay internaciones registradas'}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 w-full">
          <div className="w-full overflow-x-auto rounded-md border bg-card pb-2">
            <Table className="w-full min-w-max text-sm">
              <TableHeader>
                <TableRow>
                  <TableHead>
                    <div className="flex items-center gap-1.5">
                      <Bed className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Cama</span>
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex items-center gap-1.5">
                      <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Apellido</span>
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex items-center gap-1.5">
                      <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Nombre</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Edad</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <IdCard className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>DNI</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Estado</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <CalendarDays className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Fecha Ingreso</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <CalendarDays className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Fecha Egreso</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center">
                    <div className="flex items-center justify-center gap-1.5">
                      <Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Duración</span>
                    </div>
                  </TableHead>
                  <TableHead className="text-center w-[60px]">
                    <div className="flex items-center justify-center gap-1.5">
                      <Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span className="sr-only">Acciones</span>
                    </div>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {internacionesFiltradas.map((internacion) => {
                  const paciente = getPacienteById(internacion.pacienteId);
                  const cama = getCamaById(internacion.camaId);
                  const fechaIng = internacion.fechaIngresoClinica
                    ? formatDateDDMMYYYY(internacion.fechaIngresoClinica)
                    : (internacion.fechaIngreso ? formatDateDDMMYYYY(internacion.fechaIngreso) : '-');

                  return (
                    <TableRow key={internacion.id} className="hover:bg-muted/50">
                      <TableCell className="font-medium text-xs whitespace-nowrap">
                        {cama ? cama.numero : '-'}
                      </TableCell>
                      <TableCell className="text-xs font-medium whitespace-nowrap">
                        {paciente?.apellido || '-'}
                      </TableCell>
                      <TableCell className="text-xs font-medium whitespace-nowrap">
                        {paciente?.nombre || '-'}
                      </TableCell>
                      <TableCell className="text-center text-xs whitespace-nowrap">
                        {calcularEdad(paciente?.fechaNacimiento)}
                      </TableCell>
                      <TableCell className="text-center text-xs whitespace-nowrap font-mono">
                        {paciente?.dni || '-'}
                      </TableCell>
                      <TableCell className="text-center">
                        {(() => {
                          if (internacion.activa) {
                            return (
                              <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-950/80 dark:text-purple-300 border-purple-200 hover:bg-purple-100">
                                Activa
                              </Badge>
                            );
                          }
                          const motivo = internacion.motivoEgreso;
                          if (motivo === 'Alta médica') {
                            return (
                              <Badge variant="outline" className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950/80 dark:text-emerald-300 border-emerald-200 hover:bg-emerald-100">
                                Alta
                              </Badge>
                            );
                          }
                          if (motivo === 'Egreso Voluntario') {
                            return (
                              <Badge variant="outline" className="bg-blue-100 text-blue-800 dark:bg-blue-950/80 dark:text-blue-300 border-blue-200 hover:bg-blue-100">
                                Egreso Voluntario
                              </Badge>
                            );
                          }
                          if (motivo === 'Obito') {
                            return (
                              <Badge variant="outline" className="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-300 border-slate-300 hover:bg-slate-200">
                                Óbito
                              </Badge>
                            );
                          }
                          if (motivo === 'Pase servicio') {
                            return (
                              <Badge variant="outline" className="bg-indigo-100 text-indigo-800 dark:bg-indigo-950/80 dark:text-indigo-300 border-indigo-200 hover:bg-indigo-100">
                                Pase Servicio
                              </Badge>
                            );
                          }
                          if (motivo === 'Derivación') {
                            return (
                              <Badge variant="outline" className="bg-amber-100 text-amber-800 dark:bg-amber-950/80 dark:text-amber-300 border-amber-200 hover:bg-amber-100">
                                Derivación
                              </Badge>
                            );
                          }
                          return (
                            <Badge variant="outline" className="bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 border-gray-300 hover:bg-gray-100">
                              Alta
                            </Badge>
                          );
                        })()}
                      </TableCell>
                      <TableCell className="text-center text-xs whitespace-nowrap">
                        {fechaIng}
                      </TableCell>
                      <TableCell className="text-center text-xs whitespace-nowrap">
                        {internacion.fechaEgreso ? formatDateDDMMYYYY(internacion.fechaEgreso) : '-'}
                      </TableCell>
                      <TableCell className="text-center text-xs whitespace-nowrap">
                        {(() => {
                          const dias = calcularDiasDuracion(internacion);
                          if (dias === null) return '-';
                          const esMenorOIgual10 = dias <= 10;
                          return (
                            <Badge
                              className={
                                esMenorOIgual10
                                  ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/80 dark:text-emerald-300 border-emerald-200 hover:bg-emerald-100'
                                  : 'bg-red-100 text-red-800 dark:bg-red-950/80 dark:text-red-300 border-red-200 hover:bg-red-100'
                              }
                            >
                              {dias} {dias === 1 ? 'día' : 'días'}
                            </Badge>
                          );
                        })()}
                      </TableCell>
                      <TableCell className="text-center p-1">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button size="sm" variant="ghost" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => { if (typeof onVerHC === 'function') onVerHC(internacion.id); }}>
                              <FileText className="mr-2 h-4 w-4" />
                              Ver HC
                            </DropdownMenuItem>
                            <DropdownMenuItem 
                              className="text-red-600 focus:text-red-600"
                              onClick={() => {
                                setInternacionAEliminar(internacion);
                                setDialogoEliminarAbierto(true);
                              }}
                            >
                              <Trash2 className="mr-2 h-4 w-4" />
                              Eliminar HC
                            </DropdownMenuItem>
                            {internacion.activa && (
                              <DropdownMenuItem onClick={() => abrirDialogoEgreso(internacion)}>
                                <LogOut className="mr-2 h-4 w-4" />
                                Registrar Egreso
                              </DropdownMenuItem>
                            )}
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        </div>
      )}

      {/* Modal Registrar Egreso */}
      <Dialog open={dialogoEgresoAbierto} onOpenChange={(open) => { if (!open) resetFormularioEgreso(); setDialogoEgresoAbierto(open); }}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Registrar Egreso</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Paciente</Label>
              <Input
                value={(() => {
                  if (!internacionSeleccionada) return '';
                  const p = getPacienteById(internacionSeleccionada.pacienteId);
                  return p ? `${p.apellido}, ${p.nombre}` : '';
                })()}
                disabled
              />
            </div>
            <div>
              <Label>Fecha de Egreso *</Label>
              <Input
                type="date"
                value={fechaEgreso}
                onChange={(e) => setFechaEgreso(e.target.value)}
              />
            </div>
            <div>
              <Label>Motivo de Egreso *</Label>
              <Select value={motivoEgreso} onValueChange={(v) => { setMotivoEgreso(v as Internacion['motivoEgreso']); if (v !== 'Pase servicio') setServicioAlQuePasa(''); }}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Alta médica">Alta médica</SelectItem>
                  <SelectItem value="Egreso Voluntario">Egreso Voluntario</SelectItem>
                  <SelectItem value="Derivación">Derivación</SelectItem>
                  <SelectItem value="Obito">Obito</SelectItem>
                  <SelectItem value="Pase servicio">Pase servicio</SelectItem>
                  <SelectItem value="Otro">Otro</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {motivoEgreso === 'Pase servicio' && (
              <div>
                <Label>Servicio al que pasa *</Label>
                <Input
                  value={servicioAlQuePasa}
                  onChange={(e) => setServicioAlQuePasa(e.target.value)}
                  placeholder="Ej. Terapia Intensiva, Quirófano, etc."
                />
              </div>
            )}
            <div>
              <Label>Diagnóstico de Egreso *</Label>
              <textarea
                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                value={diagnosticoEgreso}
                onChange={(e) => setDiagnosticoEgreso(e.target.value)}
                placeholder="Ingrese el diagnóstico de egreso..."
              />
            </div>
            <Button variant="outline"
               className="w-full"
               onClick={handleFinalizarInternacion}
               disabled={!fechaEgreso || !diagnosticoEgreso || !motivoEgreso || (motivoEgreso === 'Pase servicio' && !servicioAlQuePasa.trim())}
            >
              <CheckCircle2 className="h-4 w-4 mr-2" />
              Confirmar Egreso
            </Button>
          </div>
        </DialogContent>
      </Dialog>
      {/* Modal Confirmar Eliminación HC */}
      <Dialog open={dialogoEliminarAbierto} onOpenChange={(open) => { if (!open) setInternacionAEliminar(null); setDialogoEliminarAbierto(open); }}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Eliminar Historia Clínica de Internación</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <p className="text-sm text-muted-foreground">
              ¿Está seguro de que desea eliminar esta historia clínica de internación y todos sus registros asociados (evoluciones, laboratorios, cultivos, indicaciones, etc.)? Esta acción no se puede deshacer.
            </p>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="outline" onClick={() => setDialogoEliminarAbierto(false)}>
                Cancelar
              </Button>
              <Button
                variant="destructive"
                onClick={async () => {
                  if (internacionAEliminar && typeof onEliminarInternacion === 'function') {
                    await onEliminarInternacion(internacionAEliminar.id);
                    setDialogoEliminarAbierto(false);
                    setInternacionAEliminar(null);
                  }
                }}
              >
                Eliminar Definitivamente
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
