import { useState } from 'react';
import { Microscope, Plus, Search, Calendar, AlertCircle, Trash2, CheckCircle2, Save, X, Pencil } 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 type { Cultivo, Paciente, Cama, Internacion } from '@/types';

interface CultivosProps {
  cultivos: Cultivo[];
  pacientes: Paciente[];
  internaciones: Internacion[];
  camas: Cama[];
  onAgregarCultivo: (cultivo: Omit<Cultivo, 'id'>) => void;
  onActualizarCultivo?: (id: string, datos: Partial<Cultivo>) => void;
  onEliminarCultivo: (id: string) => void;
  getPacienteById: (id: string) => Paciente | undefined;
  getCamaById: (id: string) => Cama | undefined;
  getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
}

export function Cultivos({
  cultivos,
  pacientes,
  internaciones,
  camas,
  onAgregarCultivo,
  onActualizarCultivo,
  onEliminarCultivo,
  getPacienteById,
  getCamaById,
  getInternacionActivaByPaciente,
}: CultivosProps) {
  const [busqueda, setBusqueda] = useState('');
  const [filtroEstado, setFiltroEstado] = useState<'todos' | 'NAF/Pendiente' | 'Parcial' | 'Positivo' | 'Negativo'>('todos');
  const [dialogoNuevoAbierto, setDialogoNuevoAbierto] = useState(false);
  const [dialogoParcialAbierto, setDialogoParcialAbierto] = useState(false);
  const [dialogoDefinitivoAbierto, setDialogoDefinitivoAbierto] = useState(false);
  const [cultivoSeleccionado, setCultivoSeleccionado] = useState<Cultivo | null>(null);

  const [pacienteSeleccionado, setPacienteSeleccionado] = useState('');
  const [busquedaPaciente, setBusquedaPaciente] = useState('');
  const [fechaToma, setFechaToma] = useState(new Date().toISOString().split('T')[0]);
  const [protocolo, setProtocolo] = useState('');
  const [tipoMuestra, setTipoMuestra] = useState<Cultivo['tipoMuestra']>('HMCx2');
  const [observaciones, setObservaciones] = useState('');

  const [fechaResultado, setFechaResultado] = useState(new Date().toISOString().split('T')[0]);
  const [estadoResultado, setEstadoResultado] = useState<Cultivo['estado']>('Positivo');
  const [germen, setGermen] = useState('');
  const [sensible, setSensible] = useState('');
  const [resistente, setResistente] = useState('');

  const resetFormularioNuevo = () => {
    setPacienteSeleccionado('');
    setBusquedaPaciente('');
    setFechaToma(new Date().toISOString().split('T')[0]);
    setProtocolo('');
    setTipoMuestra('HMCx2');
    setObservaciones('');
  };

  const pacientesFiltrados = pacientes.filter(p => {
    if (!busquedaPaciente) return true;
    const texto = `${p.apellido} ${p.nombre} ${p.dni}`.toLowerCase();
    return texto.includes(busquedaPaciente.toLowerCase());
  });

  const resetFormularioResultado = () => {
    setFechaResultado(new Date().toISOString().split('T')[0]);
    setEstadoResultado('Positivo');
    setGermen('');
    setSensible('');
    setResistente('');
    setCultivoSeleccionado(null);
  };

  const handleAgregar = () => {
    if (pacienteSeleccionado && fechaToma && tipoMuestra) {
      onAgregarCultivo({
        pacienteId: pacienteSeleccionado,
        fechaToma,
        protocolo: protocolo || undefined,
        tipoMuestra,
        observaciones: observaciones || undefined,
        estado: 'NAF/Pendiente',
      });
      resetFormularioNuevo();
      setDialogoNuevoAbierto(false);
    }
  };

  const handleParcial = () => {
    if (cultivoSeleccionado && onActualizarCultivo && germen) {
      onActualizarCultivo(cultivoSeleccionado.id, {
        estado: 'Parcial',
        germen: germen || undefined,
        sensible: sensible || undefined,
        resistente: resistente || undefined,
      });
      resetFormularioResultado();
      setDialogoParcialAbierto(false);
    }
  };

  const handleDefinitivo = () => {
    if (cultivoSeleccionado && onActualizarCultivo) {
      onActualizarCultivo(cultivoSeleccionado.id, {
        fechaResultado,
        estado: estadoResultado,
        germen: germen || undefined,
        sensible: sensible || undefined,
        resistente: resistente || undefined,
      });
      resetFormularioResultado();
      setDialogoDefinitivoAbierto(false);
    }
  };

  const abrirParcial = (cultivo: Cultivo) => {
    setCultivoSeleccionado(cultivo);
    setGermen(cultivo.germen || '');
    setSensible(cultivo.sensible || '');
    setResistente(cultivo.resistente || '');
    setDialogoParcialAbierto(true);
  };

  const abrirDefinitivo = (cultivo: Cultivo) => {
    setCultivoSeleccionado(cultivo);
    setFechaResultado(cultivo.fechaResultado || new Date().toISOString().split('T')[0]);
    setEstadoResultado(cultivo.estado === 'Parcial' || cultivo.estado === 'Positivo' ? 'Positivo' : cultivo.estado);
    setGermen(cultivo.germen || '');
    setSensible(cultivo.sensible || '');
    setResistente(cultivo.resistente || '');
    setDialogoDefinitivoAbierto(true);
  };

  const getEstadoColor = (estado: Cultivo['estado']) => {
    switch (estado) {
      case 'NAF/Pendiente': return 'bg-amber-100 text-amber-800';
      case 'Parcial': return 'bg-orange-100 text-orange-800';
      case 'Positivo': return 'bg-red-100 text-red-800';
      case 'Negativo': return 'bg-green-100 text-green-800';
    }
  };

  const getEstadoLabel = (estado: Cultivo['estado']) => {
    switch (estado) {
      case 'NAF/Pendiente': return 'NAF/Pendiente';
      case 'Parcial': return 'Parcial';
      case 'Positivo': return 'Positivo';
      case 'Negativo': return 'Negativo Final';
    }
  };

  const getNumeroCama = (pacienteId: string): string | null => {
    const internacion = getInternacionActivaByPaciente(pacienteId);
    if (!internacion) return null;
    const cama = getCamaById(internacion.camaId);
    return cama ? cama.numero : null;
  };

  const cultivosFiltrados = cultivos.filter(c => {
    const paciente = getPacienteById(c.pacienteId);
    const textoBusqueda = paciente ? `${paciente.apellido} ${paciente.nombre} ${paciente.dni}`.toLowerCase() : '';
    const coincideBusqueda = !busqueda || textoBusqueda.includes(busqueda.toLowerCase());
    const coincideEstado = filtroEstado === 'todos' || c.estado === filtroEstado;
    return coincideBusqueda && coincideEstado;
  }).sort((a, b) => new Date(b.fechaToma).getTime() - new Date(a.fechaToma).getTime());

  return (
    <div className="space-y-6">
      <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">Cultivos</h1>
          <p className="text-gray-500">Gestión de cultivos microbiológicos y antibiogramas</p>
        </div>
        <Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
          <DialogTrigger asChild>
            <Button onClick={resetFormularioNuevo}>
              <Plus className="h-4 w-4 mr-2" />
              Nuevo Cultivo
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-lg">
            <DialogHeader>
              <DialogTitle>Nuevo Cultivo</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              {!pacienteSeleccionado ? (
                <div>
                  <Label>Buscar Paciente *</Label>
                  <Input
                    value={busquedaPaciente}
                    onChange={(e) => setBusquedaPaciente(e.target.value)}
                    placeholder="Ingrese apellido, nombre o DNI..."
                    autoFocus
                  />
                  {busquedaPaciente && (
                    <div className="mt-2 border rounded-md max-h-48 overflow-y-auto">
                      {pacientesFiltrados.length === 0 ? (
                        <p className="p-3 text-sm text-gray-500">No se encontraron pacientes</p>
                      ) : (
                        pacientesFiltrados.map(p => (
                          <button
                            key={p.id}
                            type="button"
                            onClick={() => setPacienteSeleccionado(p.id)}
                            className="w-full text-left p-3 hover:bg-gray-50 border-b last:border-b-0"
                          >
                            {p.apellido}, {p.nombre} - DNI: {p.dni}
                          </button>
                        ))
                      )}
                    </div>
                  )}
                </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="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
                </div>
              )}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Fecha de Toma *</Label>
                  <Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
                </div>
                <div>
                  <Label>Protocolo</Label>
                  <Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="N° Protocolo" />
                </div>
              </div>
              <div>
                <Label>Tipo de Muestra *</Label>
                <Select value={tipoMuestra} onValueChange={(v: Cultivo['tipoMuestra']) => setTipoMuestra(v)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="HMCx2">HMCx2</SelectItem>
                    <SelectItem value="RC">RC</SelectItem>
                    <SelectItem value="PC">PC</SelectItem>
                    <SelectItem value="UC">UC</SelectItem>
                    <SelectItem value="LCR">LCR</SelectItem>
                    <SelectItem value="LP">LP</SelectItem>
                    <SelectItem value="LAsc">LAsc</SelectItem>
                    <SelectItem value="LAbd">LAbd</SelectItem>
                    <SelectItem value="Coleccion">Coleccion</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Observaciones</Label>
                <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
                <Button onClick={handleAgregar} disabled={!pacienteSeleccionado || !fechaToma || !tipoMuestra}>
                  <Plus className="h-4 w-4 mr-2" />
                  Guardar
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <Dialog open={dialogoParcialAbierto} onOpenChange={setDialogoParcialAbierto}>
        <DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Cargar Resultado Parcial</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="bg-orange-50 border border-orange-200 p-3 rounded-lg">
              <p className="text-sm font-medium text-orange-800">Resultado Parcial - Sujeto a modificación</p>
              <p className="text-xs text-orange-600 mt-1">Ingrese el germen crecido para tomar conducta. Podrá editarse posteriormente.</p>
            </div>
            <div>
              <Label>Germen *</Label>
              <Input value={germen} onChange={(e) => setGermen(e.target.value)} placeholder="Ej: Staphylococcus aureus" />
            </div>
            <div>
              <Label>Sensible a:</Label>
              <Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Amikacina, Vancomicina" />
            </div>
            <div>
              <Label>Resistente a:</Label>
              <Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Oxacilina" />
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => { resetFormularioResultado(); setDialogoParcialAbierto(false); }}>
                <X className="h-4 w-4 mr-2" />
                Cancelar
              </Button>
              <Button onClick={handleParcial} disabled={!germen}>
                <Save className="h-4 w-4 mr-2" />
                Guardar Parcial
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={dialogoDefinitivoAbierto} onOpenChange={setDialogoDefinitivoAbierto}>
        <DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Cargar Resultado Definitivo</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Fecha de Resultado *</Label>
                <Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
              </div>
              <div>
                <Label>Resultado *</Label>
                <Select value={estadoResultado} onValueChange={(v: Cultivo['estado']) => setEstadoResultado(v)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Positivo">Positivo</SelectItem>
                    <SelectItem value="Negativo">Negativo Final</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            {estadoResultado === 'Positivo' && (
              <>
                <div>
                  <Label>Germen *</Label>
                  <Input value={germen} onChange={(e) => setGermen(e.target.value)} placeholder="Ej: Staphylococcus aureus" />
                </div>
                <div>
                  <Label>Sensible a:</Label>
                  <Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Amikacina, Gentamicina" />
                </div>
                <div>
                  <Label>Resistente a:</Label>
                  <Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Ampicilina, Cefazolina" />
                </div>
              </>
            )}
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => { resetFormularioResultado(); setDialogoDefinitivoAbierto(false); }}>
                <X className="h-4 w-4 mr-2" />
                Cancelar
              </Button>
              <Button onClick={handleDefinitivo} disabled={estadoResultado === 'Positivo' && !germen}>
                <Save className="h-4 w-4 mr-2" />
                Guardar Definitivo
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <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 por paciente..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
              />
            </div>
            <Select value={filtroEstado} onValueChange={(v: typeof filtroEstado) => setFiltroEstado(v)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos los estados</SelectItem>
                <SelectItem value="Pendiente">Pendiente</SelectItem>
                <SelectItem value="Parcial">Parcial</SelectItem>
                <SelectItem value="Positivo">Positivo</SelectItem>
                <SelectItem value="Negativo">Negativo Final</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <div className="gap-4 flex flex-col">
        {cultivosFiltrados.map((cultivo) => {
          const paciente = getPacienteById(cultivo.pacienteId);
          
          return (
            <Card key={cultivo.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-4">
                <div className="flex flex-col gap-3">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <div className={`h-10 w-10 rounded-full flex items-center justify-center ${
                        cultivo.estado === 'NAF/Pendiente' ? 'bg-amber-100' :
                        cultivo.estado === 'Parcial' ? 'bg-orange-100' :
                        cultivo.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'
                      }`}>
                        <Microscope className={`h-5 w-5 ${
                          cultivo.estado === 'NAF/Pendiente' ? 'text-amber-600' :
                          cultivo.estado === 'Parcial' ? 'text-orange-600' :
                          cultivo.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'
                        }`} />
                      </div>
                      <div>
                        <h3 className="font-bold">
                          {paciente ? (
                            <>
                              {(() => {
                                const numCama = getNumeroCama(paciente.id);
                                return numCama ? `Cama ${numCama} - ${paciente.apellido}, ${paciente.nombre}` : `${paciente.apellido}, ${paciente.nombre}`;
                              })()}
                            </>
                          ) : 'Paciente no encontrado'}
                        </h3>
                        <div className="flex items-center gap-3 text-sm text-gray-500">
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            Toma: {cultivo.fechaToma}
                          </span>
                          <Badge variant="outline">{cultivo.tipoMuestra}</Badge>
                          <Badge className={getEstadoColor(cultivo.estado)}>
                            {getEstadoLabel(cultivo.estado)}
                          </Badge>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
                        <>
                          <Button size="sm" onClick={() => abrirParcial(cultivo)}>
                            <AlertCircle className="h-4 w-4 mr-1" />
                            Parcial
                          </Button>
                          <Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
                            <CheckCircle2 className="h-4 w-4 mr-1" />
                            Definitivo
                          </Button>
                        </>
                      )}
                      {onActualizarCultivo && cultivo.estado === 'Parcial' && (
                        <>
                          <Button size="sm" variant="outline" onClick={() => abrirParcial(cultivo)}>
                            <Pencil className="h-4 w-4 mr-1" />
                            Editar Parcial
                          </Button>
                          <Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
                            <CheckCircle2 className="h-4 w-4 mr-1" />
                            Definitivo
                          </Button>
                        </>
                      )}
                      {onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
                        <Button size="sm" variant="outline" onClick={() => abrirDefinitivo(cultivo)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                      )}
                      <Button size="sm" variant="ghost" className="text-red-600" onClick={() => onEliminarCultivo(cultivo.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  
                  {cultivo.protocolo && (
                    <p className="text-xs text-gray-500">
                      Protocolo: {cultivo.protocolo}
                    </p>
                  )}
                  
                  {cultivo.observaciones && (
                    <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">
                      {cultivo.observaciones}
                    </p>
                  )}
                  
                  {cultivo.estado === 'Parcial' && cultivo.germen && (
                    <div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
                      <p className="text-sm font-medium text-orange-800 flex items-center gap-2">
                        <AlertCircle className="h-4 w-4" />
                        PARCIAL - Germen: {cultivo.germen}
                      </p>
                      {(cultivo.sensible || cultivo.resistente) && (
                        <div className="mt-2 space-y-1">
                          {cultivo.sensible && <p className="text-xs text-orange-700">Sensible: {cultivo.sensible}</p>}
                          {cultivo.resistente && <p className="text-xs text-orange-700">Resistente: {cultivo.resistente}</p>}
                        </div>
                      )}
                    </div>
                  )}
                  
                  {cultivo.estado === 'Positivo' && cultivo.germen && (
                    <div className="bg-red-50 p-3 rounded-lg border border-red-200">
                      <p className="text-sm font-medium text-red-800 flex items-center gap-2">
                        <AlertCircle className="h-4 w-4" />
                        Germen: {cultivo.germen}
                      </p>
                      {cultivo.fechaResultado && (
                        <p className="text-xs text-red-600 mt-1">
                          Resultado: {cultivo.fechaResultado}
                        </p>
                      )}
                      
                      {(cultivo.sensible || cultivo.resistente) && (
                        <div className="mt-2 space-y-2">
                          {cultivo.sensible && (
                            <div>
                              <p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p>
                              <p className="text-sm text-green-800">{cultivo.sensible}</p>
                            </div>
                          )}
                          {cultivo.resistente && (
                            <div>
                              <p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p>
                              <p className="text-sm text-red-800">{cultivo.resistente}</p>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  )}
                  
                  {cultivo.estado === 'Negativo' && (
                    <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                      <p className="text-sm font-medium text-green-800 flex items-center gap-2">
                        <CheckCircle2 className="h-4 w-4" />
                        Sin crecimiento de microorganismos
                      </p>
                      {cultivo.fechaResultado && (
                        <p className="text-xs text-green-600 mt-1">
                          Resultado: {cultivo.fechaResultado}
                        </p>
                      )}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {cultivosFiltrados.length === 0 && (
        <div className="text-center py-12 text-gray-400">
          <Microscope className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">
            {busqueda || filtroEstado !== 'todos' 
              ? 'No se encontraron cultivos con esos filtros' 
              : 'No hay cultivos registrados'}
          </p>
        </div>
      )}
    </div>
  );
}