import { useState } from 'react';
import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, Mail, Droplet, AlertTriangle } 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 { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
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);
  
  // 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 resetFormulario = () => {
    setNombre('');
    setApellido('');
    setDni('');
    setFechaNacimiento('');
    setSexo('M');
    setTelefono('');
    setEmail('');
    setDireccion('');
    setGrupoSanguineo('');
    setAlergias('');
    setAntecedentes('');
    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 || '');
    setDialogoAbierto(true);
  };

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

    const datos = {
      nombre,
      apellido,
      dni,
      fechaNacimiento,
      sexo,
      telefono,
      email: email || undefined,
      direccion: direccion || undefined,
      grupoSanguineo: grupoSanguineo || undefined,
      alergias: alergias || undefined,
      antecedentes: antecedentes || 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">
      {/* 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">Pacientes</h1>
          <p className="text-gray-500">Gestión de pacientes del hospital</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
          <DialogTrigger asChild>
            <Button 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>
                {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>Teléfono *</Label>
                <Input 
                  value={telefono} 
                  onChange={(e) => setTelefono(e.target.value)}
                  placeholder="Teléfono de contacto"
                />
              </div>
              <div>
                <Label>Email</Label>
                <Input 
                  type="email"
                  value={email} 
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Correo electrónico"
                />
              </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>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 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>
            <div className="flex justify-end gap-2 mt-4">
              <Button variant="outline" onClick={() => {
                resetFormulario();
                setDialogoAbierto(false);
              }}>
                Cancelar
              </Button>
              <Button 
                onClick={handleGuardar}
                disabled={!nombre || !apellido || !dni || !fechaNacimiento || !telefono}
              >
                {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>

      {/* Lista de Pacientes */}
      <div className="grid grid-cols-1 gap-4">
        {pacientesFiltrados.map((paciente) => (
          <Card key={paciente.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                <div className="flex items-start gap-4">
                  <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <User className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2 flex-wrap">
                      <h3 className="font-bold text-lg">
                        {paciente.apellido}, {paciente.nombre}
                      </h3>
                      {estaInternado(paciente.id) && (
                        <Badge className="bg-purple-100 text-purple-800">
                          Internado
                        </Badge>
                      )}
                    </div>
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 mt-2 text-sm text-gray-500">
                      <div className="flex items-center gap-1">
                        <span className="font-medium">DNI:</span> {paciente.dni}
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="h-3 w-3" />
                        {getEdad(paciente.fechaNacimiento)} años
                      </div>
                      <div className="flex items-center gap-1">
                        <span className="font-medium">Sexo:</span> {paciente.sexo}
                      </div>
                      {paciente.grupoSanguineo && (
                        <div className="flex items-center gap-1">
                          <Droplet className="h-3 w-3" />
                          {paciente.grupoSanguineo}
                        </div>
                      )}
                    </div>
                    <div className="flex flex-wrap gap-3 mt-2 text-sm text-gray-500">
                      <div className="flex items-center gap-1">
                        <Phone className="h-3 w-3" />
                        {paciente.telefono}
                      </div>
                      {paciente.email && (
                        <div className="flex items-center gap-1">
                          <Mail className="h-3 w-3" />
                          {paciente.email}
                        </div>
                      )}
                    </div>
                    {(paciente.alergias || paciente.antecedentes) && (
                      <div className="mt-2 flex flex-wrap gap-2">
                        {paciente.alergias && (
                          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
                            <AlertTriangle className="h-3 w-3 mr-1" />
                            Alergias
                          </Badge>
                        )}
                        {paciente.antecedentes && (
                          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                            Antecedentes
                          </Badge>
                        )}
                      </div>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Button 
                    variant="outline" 
                    size="sm"
                    onClick={() => handleEditar(paciente)}
                  >
                    <Edit2 className="h-4 w-4" />
                  </Button>
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle>
                        <AlertDialogDescription>
                          Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '}
                          <strong>{paciente.apellido}, {paciente.nombre}</strong>.
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
                        <AlertDialogAction 
                          onClick={() => onEliminar(paciente.id)}
                          className="bg-red-600 hover:bg-red-700"
                        >
                          Eliminar
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {pacientesFiltrados.length === 0 && (
        <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 className="mt-4" onClick={() => setDialogoAbierto(true)}>
              <Plus className="h-4 w-4 mr-2" />
              Agregar primer paciente
            </Button>
          )}
        </div>
      )}
    </div>
  );
}