import { useState } from 'react';
import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, AlertTriangle, X, Save, IdCard, Activity, Settings, ShieldCheck, MoreHorizontal, Eye } 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import type { Paciente } from '@/types';

interface PacientesProps {
  pacientes: Paciente[];
  internaciones: { id: string; pacienteId: string; activa: boolean }[];
  onAgregar: (paciente: Omit<Paciente, 'id' | 'fechaRegistro'>) => void;
  onActualizar: (id: string, datos: Partial<Paciente>) => void;
  onEliminar: (id: string) => void;
}

export function Pacientes({
  pacientes,
  internaciones,
  onAgregar,
  onActualizar,
  onEliminar
}: PacientesProps) {
  const [busqueda, setBusqueda] = useState('');
  const [dialogoAbierto, setDialogoAbierto] = useState(false);
  const [pacienteEditando, setPacienteEditando] = useState<Paciente | null>(null);
  const [pacienteAEliminar, setPacienteAEliminar] = useState<Paciente | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [pacienteVerDetalle, setPacienteVerDetalle] = useState<Paciente | null>(null);

  // Formulario
  const [nombre, setNombre] = useState('');
  const [apellido, setApellido] = useState('');
  const [dni, setDni] = useState('');
  const [fechaNacimiento, setFechaNacimiento] = useState('');
  const [sexo, setSexo] = useState<'M' | 'F' | 'Otro'>('M');
  const [telefono, setTelefono] = useState('');
  const [email, setEmail] = useState('');
  const [direccion, setDireccion] = useState('');
  const [grupoSanguineo, setGrupoSanguineo] = useState('');
  const [alergias, setAlergias] = useState('');
  const [antecedentes, setAntecedentes] = useState('');
  const [obraSocial, setObraSocial] = useState('');
  const [nacionalidad, setNacionalidad] = useState('');
  const [medicacionHabitual, setMedicacionHabitual] = useState('');
  const [historiaClinica, setHistoriaClinica] = useState('');

  const resetFormulario = () => {
    setNombre('');
    setApellido('');
    setDni('');
    setFechaNacimiento('');
    setSexo('M');
    setTelefono('');
    setEmail('');
    setDireccion('');
    setGrupoSanguineo('');
    setAlergias('');
    setAntecedentes('');
    setObraSocial('');
    setNacionalidad('');
    setMedicacionHabitual('');
    setHistoriaClinica('');
    setPacienteEditando(null);
  };

  const handleEditar = (paciente: Paciente) => {
    setPacienteEditando(paciente);
    setNombre(paciente.nombre);
    setApellido(paciente.apellido);
    setDni(paciente.dni);
    setFechaNacimiento(paciente.fechaNacimiento);
    setSexo(paciente.sexo);
    setTelefono(paciente.telefono);
    setEmail(paciente.email || '');
    setDireccion(paciente.direccion || '');
    setGrupoSanguineo(paciente.grupoSanguineo || '');
    setAlergias(paciente.alergias || '');
    setAntecedentes(paciente.antecedentes || '');
    setObraSocial(paciente.obraSocial || '');
    setNacionalidad(paciente.nacionalidad || '');
    setMedicacionHabitual(paciente.medicacionHabitual || '');
    setHistoriaClinica(paciente.historiaClinica || '');
    setDialogoAbierto(true);
  };

  const handleGuardar = () => {
    if (!nombre || !apellido || !dni || !fechaNacimiento) return;

    const datos = {
      nombre,
      apellido,
      dni,
      fechaNacimiento,
      sexo,
      telefono: telefono || undefined,
      email: email || undefined,
      direccion: direccion || undefined,
      grupoSanguineo: grupoSanguineo || undefined,
      alergias: alergias || undefined,
      antecedentes: antecedentes || undefined,
      obraSocial: obraSocial || undefined,
      nacionalidad: nacionalidad || undefined,
      medicacionHabitual: medicacionHabitual || undefined,
      historiaClinica: historiaClinica || undefined,
    };

    if (pacienteEditando) {
      onActualizar(pacienteEditando.id, datos);
    } else {
      onAgregar(datos);
    }

    resetFormulario();
    setDialogoAbierto(false);
  };

  const pacientesFiltrados = pacientes.filter(p =>
    p.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
    p.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
    p.dni.includes(busqueda)
  );

  const getEdad = (fechaNacimiento: string) => {
    const hoy = new Date();
    const nacimiento = new Date(fechaNacimiento);
    let edad = hoy.getFullYear() - nacimiento.getFullYear();
    const mes = hoy.getMonth() - nacimiento.getMonth();
    if (mes < 0 || (mes === 0 && hoy.getDate() < nacimiento.getDate())) {
      edad--;
    }
    return edad;
  };

  const estaInternado = (pacienteId: string) => {
    return internaciones.some(i => i.pacienteId === pacienteId && i.activa);
  };

  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">
            <Users className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
            Pacientes
          </h1>
          <p className="text-gray-500 dark:text-gray-400">Gestión de pacientes del hospital</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
          <DialogTrigger asChild>
            <Button variant="outline" onClick={resetFormulario}>
              <Plus className="h-4 w-4 mr-2" />
              Nuevo Paciente
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                {pacienteEditando ? <Edit2 className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
                {pacienteEditando ? 'Editar Paciente' : 'Nuevo Paciente'}
              </DialogTitle>
            </DialogHeader>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <Label>Nombre *</Label>
                <Input
                  value={nombre}
                  onChange={(e) => setNombre(e.target.value)}
                  placeholder="Nombre del paciente"
                />
              </div>
              <div>
                <Label>Apellido *</Label>
                <Input
                  value={apellido}
                  onChange={(e) => setApellido(e.target.value)}
                  placeholder="Apellido del paciente"
                />
              </div>
              <div>
                <Label>DNI *</Label>
                <Input
                  value={dni}
                  onChange={(e) => setDni(e.target.value)}
                  placeholder="Número de DNI"
                />
              </div>
              <div>
                <Label>Fecha de Nacimiento *</Label>
                <Input
                  type="date"
                  value={fechaNacimiento}
                  onChange={(e) => setFechaNacimiento(e.target.value)}
                />
              </div>
              <div>
                <Label>Sexo *</Label>
                <Select value={sexo} onValueChange={(v: 'M' | 'F' | 'Otro') => setSexo(v)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="M">Masculino</SelectItem>
                    <SelectItem value="F">Femenino</SelectItem>
                    <SelectItem value="Otro">Otro</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Historia Clínica</Label>
                <Input
                  value={historiaClinica}
                  onChange={(e) => setHistoriaClinica(e.target.value)}
                  placeholder="Historia clínica..."
                />
              </div>
              <div>
                <Label>Obra Social</Label>
                <Input
                  value={obraSocial}
                  onChange={(e) => setObraSocial(e.target.value)}
                  placeholder="Obra social del paciente"
                />
              </div>
              <div>
                <Label>Nacionalidad</Label>
                <Input
                  value={nacionalidad}
                  onChange={(e) => setNacionalidad(e.target.value)}
                  placeholder="Nacionalidad del paciente"
                />
              </div>
              <div>
                <Label>Dirección</Label>
                <Input
                  value={direccion}
                  onChange={(e) => setDireccion(e.target.value)}
                  placeholder="Dirección del paciente"
                />
              </div>
              <div>
                <Label>Grupo Sanguíneo</Label>
                <Select value={grupoSanguineo} onValueChange={setGrupoSanguineo}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="A+">A+</SelectItem>
                    <SelectItem value="A-">A-</SelectItem>
                    <SelectItem value="B+">B+</SelectItem>
                    <SelectItem value="B-">B-</SelectItem>
                    <SelectItem value="AB+">AB+</SelectItem>
                    <SelectItem value="AB-">AB-</SelectItem>
                    <SelectItem value="O+">O+</SelectItem>
                    <SelectItem value="O-">O-</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="sm:col-span-2">
                <Label>Teléfono Contacto</Label>
                <Input
                  value={telefono}
                  onChange={(e) => setTelefono(e.target.value)}
                  placeholder="Teléfono de contacto"
                />
              </div>
              <div className="sm:col-span-2">
                <Label>Medicación Habitual</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[60px]"
                  value={medicacionHabitual}
                  onChange={(e) => setMedicacionHabitual(e.target.value)}
                  placeholder="Medicación habitual del paciente..."
                />
              </div>
              <div className="sm:col-span-2">
                <Label>Antecedentes Médicos</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[60px]"
                  value={antecedentes}
                  onChange={(e) => setAntecedentes(e.target.value)}
                  placeholder="Antecedentes médicos relevantes..."
                />
              </div>
              <div className="sm:col-span-2">
                <Label>Alergias</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[60px]"
                  value={alergias}
                  onChange={(e) => setAlergias(e.target.value)}
                  placeholder="Alergias conocidas..."
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 mt-4">
              <Button variant="outline" onClick={() => {
                resetFormulario();
                setDialogoAbierto(false);
              }}>
                <X className="h-4 w-4 mr-2" />
                Cancelar
              </Button>
              <Button variant="outline"
                onClick={handleGuardar}
                disabled={!nombre || !apellido || !dni || !fechaNacimiento}
              >
                <Save className="h-4 w-4 mr-2" />
                {pacienteEditando ? 'Guardar Cambios' : 'Crear Paciente'}
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Búsqueda */}
      <Card>
        <CardContent className="p-4">
          <div className="relative">
            <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 por nombre, apellido o DNI..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      {/* Tabla de Pacientes */}
      {pacientesFiltrados.length > 0 ? (
        <div className="grid grid-cols-1 w-full">
          <div className="w-full overflow-x-auto rounded-md border bg-card text-card-foreground shadow-sm pb-2">
            <Table className="w-full min-w-max text-sm">
              <TableHeader>
                <TableRow>
                  <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>
                    <div className="flex items-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>
                    <div className="flex items-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>
                    <div className="flex items-center gap-1.5">
                      <Users className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Sexo</span>
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex items-center gap-1.5">
                      <ShieldCheck className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Obra Social</span>
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex items-center gap-1.5">
                      <Phone className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
                      <span>Teléfono</span>
                    </div>
                  </TableHead>
                  <TableHead>
                    <div className="flex items-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="w-[80px]">
                    <div className="flex items-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>
                {pacientesFiltrados.map((paciente) => {
                  const internado = estaInternado(paciente.id);
                  return (
                    <TableRow key={paciente.id} className="hover:bg-muted/50">
                      <TableCell className="font-medium text-gray-900 dark:text-white whitespace-nowrap">
                        <div className="flex items-center gap-2">
                          <span>{paciente.apellido}</span>
                          {paciente.alergias && (
                            <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0 shrink-0">
                              <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
                              Alergia
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                        {paciente.nombre}
                      </TableCell>
                      <TableCell className="text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
                        {paciente.dni}
                      </TableCell>
                      <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
                        {getEdad(paciente.fechaNacimiento)}
                      </TableCell>
                      <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
                        {paciente.sexo}
                      </TableCell>
                      <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
                        {paciente.obraSocial || '-'}
                      </TableCell>
                      <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
                        {paciente.telefono || '-'}
                      </TableCell>
                      <TableCell className="whitespace-nowrap">
                        {internado ? (
                          <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200">
                            Internado
                          </Badge>
                        ) : (
                          <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium">
                            Ambulatorio
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell className="whitespace-nowrap">
                        <div className="flex items-center">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                                <MoreHorizontal className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem onClick={() => setPacienteVerDetalle(paciente)}>
                                <Eye className="h-4 w-4 mr-2 text-teal-600 dark:text-teal-400" />
                                Detalles
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleEditar(paciente)}>
                                <Edit2 className="h-4 w-4 mr-2 text-blue-600" />
                                Editar paciente
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/50"
                                onClick={() => {
                                  setPacienteAEliminar(paciente);
                                  setDeleteDialogOpen(true);
                                }}
                              >
                                <Trash2 className="h-4 w-4 mr-2" />
                                Eliminar
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        </div>
      ) : (
        <div className="text-center py-12 text-gray-400">
          <Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">
            {busqueda ? 'No se encontraron pacientes con esa búsqueda' : 'No hay pacientes registrados'}
          </p>
          {!busqueda && (
            <Button variant="outline" className="mt-4" onClick={() => setDialogoAbierto(true)}>
              <Plus className="h-4 w-4 mr-2" />
              Agregar primer paciente
            </Button>
          )}
        </div>
      )}

      {/* Dialogo de confirmacion de eliminacion */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle>
            <AlertDialogDescription>
              Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '}
              <strong>{pacienteAEliminar?.apellido}, {pacienteAEliminar?.nombre}</strong>.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setPacienteAEliminar(null)}>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (pacienteAEliminar) {
                  onEliminar(pacienteAEliminar.id);
                  setPacienteAEliminar(null);
                }
              }}
              className="bg-red-600 hover:bg-red-700"
            >
              Eliminar
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Dialogo de detalles del paciente */}
      <Dialog open={!!pacienteVerDetalle} onOpenChange={(open) => { if (!open) setPacienteVerDetalle(null); }}>
        <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-xl">
              <User className="h-5 w-5 text-teal-600 dark:text-teal-400" />
              Detalles del Paciente
            </DialogTitle>
          </DialogHeader>
          {pacienteVerDetalle && (
            <div className="space-y-4 pt-1">
              <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg space-y-3 border border-gray-100 dark:border-gray-800">
                <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  {pacienteVerDetalle.apellido || '—'}, {pacienteVerDetalle.nombre || '—'}
                </div>
                <div className="grid grid-cols-2 gap-3 text-sm">
                  <div>
                    <span className="text-gray-500 dark:text-gray-400 block text-xs">DNI</span>
                    <span className="font-mono font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.dni || 'Sin especificar'}</span>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Sexo</span>
                    <span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.sexo || 'Sin especificar'}</span>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Fecha de Nacimiento</span>
                    <span className="font-medium text-gray-800 dark:text-gray-200">
                      {pacienteVerDetalle.fechaNacimiento ? `${pacienteVerDetalle.fechaNacimiento} (${getEdad(pacienteVerDetalle.fechaNacimiento)})` : 'Sin especificar'}
                    </span>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Grupo Sanguíneo</span>
                    <span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.grupoSanguineo || 'Sin especificar'}</span>
                  </div>
                  <div className="col-span-2">
                    <span className="text-gray-500 dark:text-gray-400 block text-xs">Estado Actual</span>
                    {internaciones.some(i => i.pacienteId === pacienteVerDetalle.id && i.activa) ? (
                      <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200 mt-0.5">
                        Internado
                      </Badge>
                    ) : (
                      <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium mt-0.5">
                        Ambulatorio
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

              {/* Informacion de contacto, filiación y cobertura */}
              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300 px-1">
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Historia Clínica:</span>
                  <span className="font-mono font-medium">{pacienteVerDetalle.historiaClinica || 'Sin especificar'}</span>
                </div>
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Obra Social:</span>
                  <span className="font-medium">{pacienteVerDetalle.obraSocial || 'Sin especificar'}</span>
                </div>
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Nacionalidad:</span>
                  <span>{pacienteVerDetalle.nacionalidad || 'Sin especificar'}</span>
                </div>
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Teléfono:</span>
                  <span>{pacienteVerDetalle.telefono || 'Sin especificar'}</span>
                </div>
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Email:</span>
                  <span>{pacienteVerDetalle.email || 'Sin especificar'}</span>
                </div>
                <div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-gray-500 dark:text-gray-400">Dirección:</span>
                  <span>{pacienteVerDetalle.direccion || 'Sin especificar'}</span>
                </div>
              </div>

              {/* Sección Clínica */}
              <div className="space-y-3 pt-2">
                <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Información Clínica
                </h4>
                <div>
                  <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
                    Medicación Habitual
                  </span>
                  <p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
                    {pacienteVerDetalle.medicacionHabitual || 'Sin medicación habitual registrada'}
                  </p>
                </div>
                <div>
                  <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
                    Antecedentes Médicos
                  </span>
                  <p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
                    {pacienteVerDetalle.antecedentes || 'Sin antecedentes registrados'}
                  </p>
                </div>
                <div>
                  <span className="text-xs text-red-600 dark:text-red-400 block mb-1 font-medium flex items-center gap-1">
                    <AlertTriangle className="h-3 w-3" />
                    Alergias
                  </span>
                  <p className={`p-2.5 rounded border text-xs min-h-[38px] whitespace-pre-wrap ${
                    pacienteVerDetalle.alergias 
                      ? 'bg-red-50 dark:bg-red-950/30 border-red-200/60 dark:border-red-800/40 text-red-900 dark:text-red-200' 
                      : 'bg-gray-50 dark:bg-gray-800/60 border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400'
                  }`}>
                    {pacienteVerDetalle.alergias || 'Sin alergias registradas'}
                  </p>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}
