import { useState } from 'react';
import { FileText, Plus, Search, Calendar, Clock, Thermometer, Heart, Activity, Wind, Droplets, Pencil, Trash2, ChevronDown, ChevronUp } 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 { Evolucion, Internacion, Paciente, SignosVitales, ExamenFisico } from '@/types';

interface EvolucionesProps {
  evoluciones: Evolucion[];
  internaciones: Internacion[];
  pacientes: Paciente[];
  onAgregarEvolucion: (evolucion: Omit<Evolucion, 'id'>) => void;
  onActualizarEvolucion?: (id: string, datos: Partial<Evolucion>) => void;
  onEliminarEvolucion: (id: string) => void;
  getPacienteById: (id: string) => Paciente | undefined;
  getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
}

export function Evoluciones({ 
  evoluciones, 
  internaciones, 
  pacientes,
  onAgregarEvolucion, 
  onActualizarEvolucion,
  onEliminarEvolucion,
  getPacienteById,
  getInternacionActivaByPaciente
}: EvolucionesProps) {
  const [busqueda, setBusqueda] = useState('');
  const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
  const [dialogoAbierto, setDialogoAbierto] = useState(false);
  const [evolucionExpandida, setEvolucionExpandida] = useState<string | null>(null);
  const [evolucionEditando, setEvolucionEditando] = useState<Evolucion | null>(null);
  
  const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
  const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
  const [medico, setMedico] = useState('');
  const [temperatura, setTemperatura] = useState('');
  const [presionSistolica, setPresionSistolica] = useState('');
  const [presionDiastolica, setPresionDiastolica] = useState('');
  const [frecuenciaCardiaca, setFrecuenciaCardiaca] = useState('');
  const [frecuenciaRespiratoria, setFrecuenciaRespiratoria] = useState('');
  const [saturacionO2, setSaturacionO2] = useState('');
  const [snc, setSnc] = useState('');
  const [cardiovascular, setCardiovascular] = useState('');
  const [respiratorio, setRespiratorio] = useState('');
  const [abdominal, setAbdominal] = useState('');
  const [genitourinario, setGenitourinario] = useState('');
  const [pielAnexos, setPielAnexos] = useState('');
  const [soma, setSoma] = useState('');
  const [novedades, setNovedades] = useState('');
  const [comentario, setComentario] = useState('');
  const [pendientes, setPendientes] = useState('');

  const resetFormulario = () => {
    setFecha(new Date().toISOString().split('T')[0]);
    setHora(new Date().toTimeString().slice(0, 5));
    setMedico('');
    setTemperatura('');
    setPresionSistolica('');
    setPresionDiastolica('');
    setFrecuenciaCardiaca('');
    setFrecuenciaRespiratoria('');
    setSaturacionO2('');
    setSnc('');
    setCardiovascular('');
    setRespiratorio('');
    setAbdominal('');
    setGenitourinario('');
    setPielAnexos('');
    setSoma('');
    setNovedades('');
    setComentario('');
    setPendientes('');
    setEvolucionEditando(null);
  };

  const abrirEditar = (evo: Evolucion) => {
    setEvolucionEditando(evo);
    setFecha(evo.fecha);
    setHora(evo.hora);
    setMedico(evo.medico);
    setTemperatura(evo.signosVitales?.temperatura?.toString() || '');
    setPresionSistolica(evo.signosVitales?.presionSistolica?.toString() || '');
    setPresionDiastolica(evo.signosVitales?.presionDiastolica?.toString() || '');
    setFrecuenciaCardiaca(evo.signosVitales?.frecuenciaCardiaca?.toString() || '');
    setFrecuenciaRespiratoria(evo.signosVitales?.frecuenciaRespiratoria?.toString() || '');
    setSaturacionO2(evo.signosVitales?.saturacionO2?.toString() || '');
    setSnc(evo.examenFisico?.SNC || '');
    setCardiovascular(evo.examenFisico?.Cardiovascular || '');
    setRespiratorio(evo.examenFisico?.Respiratorio || '');
    setAbdominal(evo.examenFisico?.Abdominal || '');
    setGenitourinario(evo.examenFisico?.Genitourinario || '');
    setPielAnexos(evo.examenFisico?.PielAnexos || '');
    setSoma(evo.examenFisico?.SOMA || '');
    setNovedades(evo.novedades || '');
    setComentario(evo.comentario || '');
    setPendientes(evo.pendientes || '');
    setDialogoAbierto(true);
  };

  const handleGuardar = () => {
    const internacion = getInternacionActivaByPaciente(pacienteSeleccionado);
    if (!internacion || !medico) return;

    const signosVitales: SignosVitales | undefined =
      temperatura || presionSistolica || frecuenciaCardiaca
        ? {
            temperatura: temperatura ? parseFloat(temperatura) : undefined,
            presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined,
            presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined,
            frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined,
            frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined,
            saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined,
          }
        : undefined;

    const examenFisico: ExamenFisico | undefined =
      snc || cardiovascular || respiratorio || abdominal || genitourinario || pielAnexos || soma
        ? {
            SNC: snc || undefined,
            Cardiovascular: cardiovascular || undefined,
            Respiratorio: respiratorio || undefined,
            Abdominal: abdominal || undefined,
            Genitourinario: genitourinario || undefined,
            PielAnexos: pielAnexos || undefined,
            SOMA: soma || undefined,
          }
        : undefined;

    const evolucionData = {
      fecha,
      hora,
      medico,
      signosVitales,
      examenFisico,
      novedades: novedades || undefined,
      comentario: comentario || undefined,
      pendientes: pendientes || undefined,
    };

    if (evolucionEditando && onActualizarEvolucion) {
      onActualizarEvolucion(evolucionEditando.id, evolucionData);
    } else {
      onAgregarEvolucion({ ...evolucionData, internacionId: internacion.id });
    }

    resetFormulario();
    setDialogoAbierto(false);
  };

  const pacientesInternados = pacientes.filter(p => {
    const internacion = getInternacionActivaByPaciente(p.id);
    return internacion !== undefined;
  });

  const evolucionesFiltradas = evoluciones
    .filter(e => {
      const internacion = internaciones.find(i => i.id === e.internacionId);
      if (!internacion) return false;
      const paciente = getPacienteById(internacion.pacienteId);
      if (!paciente) return false;
      
      return !busqueda || 
        paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
        paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
        paciente.dni.includes(busqueda);
    })
    .sort((a, b) => new Date(b.fecha + 'T' + b.hora).getTime() - new Date(a.fecha + 'T' + a.hora).getTime());

  const getSignosVitalesTexto = (sv: SignosVitales | undefined) => {
    if (!sv) return null;
    const partes: string[] = [];
    if (sv.presionSistolica && sv.presionDiastolica) partes.push(`PA: ${sv.presionSistolica}/${sv.presionDiastolica}`);
    if (sv.frecuenciaCardiaca) partes.push(`FC: ${sv.frecuenciaCardiaca}`);
    if (sv.frecuenciaRespiratoria) partes.push(`FR: ${sv.frecuenciaRespiratoria}`);
    if (sv.temperatura) partes.push(`T: ${sv.temperatura}°C`);
    if (sv.saturacionO2) partes.push(`SatO2: ${sv.saturacionO2}%`);
    return partes.join(' | ');
  };

  return (
    <div className="space-y-6 dark:text-white">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
          <p className="text-gray-500 dark:text-gray-400">Registro de evoluciones y signos vitales</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
          <DialogTrigger asChild>
            <Button onClick={resetFormulario}>
              <Plus className="h-4 w-4 mr-2" />
              Nueva Evolución
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {evolucionEditando ? 'Editar Evolución' : 'Nueva Evolución'}
              </DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              {!evolucionEditando && (
                <div>
                  <Label>Paciente *</Label>
                  <Select value={pacienteSeleccionado} onValueChange={setPacienteSeleccionado}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar paciente internado" />
                    </SelectTrigger>
                    <SelectContent>
                      {pacientesInternados.map(p => (
                        <SelectItem key={p.id} value={p.id}>
                          {p.apellido}, {p.nombre} - DNI: {p.dni}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Fecha *</Label>
                  <Input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
                </div>
                <div>
                  <Label>Hora *</Label>
                  <Input type="time" value={hora} onChange={(e) => setHora(e.target.value)} />
                </div>
              </div>

              <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                <p className="text-sm font-bold text-blue-800 mb-3 flex items-center gap-2">
                  <Activity className="h-4 w-4" />
                  Signos Vitales
                </p>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                  <div>
                    <Label className="flex items-center gap-1">
                      <Heart className="h-4 w-4" />TAS
                    </Label>
                    <Input 
                      type="number"
                      value={presionSistolica}
                      onChange={(e) => setPresionSistolica(e.target.value)}
                      placeholder="120"
                    />
                  </div>
                  <div>
                    <Label className="flex items-center gap-1">
                      <Heart className="h-4 w-4" />TAD
                    </Label>
                    <Input 
                      type="number"
                      value={presionDiastolica}
                      onChange={(e) => setPresionDiastolica(e.target.value)}
                      placeholder="80"
                    />
                  </div>
                  <div>
                    <Label className="flex items-center gap-1">
                      <Activity className="h-4 w-4" />FC
                    </Label>
                    <Input 
                      type="number"
                      value={frecuenciaCardiaca}
                      onChange={(e) => setFrecuenciaCardiaca(e.target.value)}
                      placeholder="72"
                    />
                  </div>
                  <div>
                    <Label className="flex items-center gap-1">
                      <Wind className="h-4 w-4" />FR
                    </Label>
                    <Input 
                      type="number"
                      value={frecuenciaRespiratoria}
                      onChange={(e) => setFrecuenciaRespiratoria(e.target.value)}
                      placeholder="16"
                    />
                  </div>
                  <div>
                    <Label className="flex items-center gap-1">
                      <Thermometer className="h-4 w-4" />T°
                    </Label>
                    <Input 
                      type="number"
                      step="0.1"
                      value={temperatura}
                      onChange={(e) => setTemperatura(e.target.value)}
                      placeholder="36.5"
                    />
                  </div>
                  <div>
                    <Label className="flex items-center gap-1">
                      <Droplets className="h-4 w-4" />SatO2
                    </Label>
                    <Input 
                      type="number"
                      value={saturacionO2}
                      onChange={(e) => setSaturacionO2(e.target.value)}
                      placeholder="98"
                    />
                  </div>
                </div>
              </div>

              <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                <p className="text-sm font-bold text-green-800 mb-3 flex items-center gap-2">
                  <FileText className="h-4 w-4" />
                  Examen Físico
                </p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label>SNC</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={snc} onChange={(e) => setSnc(e.target.value)} placeholder="Estado neurológico" />
                  </div>
                  <div>
                    <Label>Cardiovascular</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={cardiovascular} onChange={(e) => setCardiovascular(e.target.value)} placeholder="Hallazgos cardiovasculares" />
                  </div>
                  <div>
                    <Label>Respiratorio</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={respiratorio} onChange={(e) => setRespiratorio(e.target.value)} placeholder="Hallazgos respiratorios" />
                  </div>
                  <div>
                    <Label>Abdominal</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={abdominal} onChange={(e) => setAbdominal(e.target.value)} placeholder="Hallazgos abdominales" />
                  </div>
                  <div>
                    <Label>Genitourinario</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={genitourinario} onChange={(e) => setGenitourinario(e.target.value)} placeholder="Hallazgos genitourinarios" />
                  </div>
                  <div>
                    <Label>Piel y anexos</Label>
                    <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={pielAnexos} onChange={(e) => setPielAnexos(e.target.value)} placeholder="Estado de piel y anexos" />
                  </div>
                  <div>
                    <Label>SOMA</Label>
                    <Input value={soma} onChange={(e) => setSoma(e.target.value)} placeholder="Estado SOMA" />
                  </div>
                </div>
              </div>

              <div>
                <Label>Novedades</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                  value={novedades}
                  onChange={(e) => setNovedades(e.target.value)}
                  placeholder="Novedades..."
                />
              </div>

              <div>
                <Label>Comentario</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                  value={comentario}
                  onChange={(e) => setComentario(e.target.value)}
                  placeholder="Comentarios adicionales..."
                />
              </div>

              <div>
                <Label>Pendientes</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                  value={pendientes}
                  onChange={(e) => setPendientes(e.target.value)}
                  placeholder="Pendientes..."
                />
              </div>

              <div>
                <Label>Médico *</Label>
                <Input 
                  value={medico}
                  onChange={(e) => setMedico(e.target.value)}
                  placeholder="Nombre del médico"
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 mt-4">
              <Button variant="outline" onClick={() => { resetFormulario(); setDialogoAbierto(false); }}>
                Cancelar
              </Button>
              <Button 
                onClick={handleGuardar}
                disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)}
              >
                <Plus className="h-4 w-4 mr-2" />
                Guardar Evolución
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <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 paciente..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      <div className="space-y-4">
        {evolucionesFiltradas.map((evolucion) => {
          const internacion = internaciones.find(i => i.id === evolucion.internacionId);
          const paciente = internacion ? getPacienteById(internacion.pacienteId) : null;
          const signosTexto = getSignosVitalesTexto(evolucion.signosVitales);
          const estaExpandida = evolucionExpandida === evolucion.id;
          
          return (
            <Card key={evolucion.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 bg-blue-100 rounded-full flex items-center justify-center">
                        <FileText className="h-5 w-5 text-blue-600" />
                      </div>
                      <div>
                        <h3 className="font-bold">
                          {paciente ? `${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" />
                            {evolucion.fecha}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {evolucion.hora}
                          </span>
                          <Badge variant="outline">{evolucion.medico}</Badge>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button 
                        size="sm" 
                        variant="outline"
                        onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)}
                      >
                        {estaExpandida ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                      </Button>
                      {onActualizarEvolucion && (
                        <Button size="sm" variant="outline" onClick={() => abrirEditar(evolucion)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                      )}
                      <Button 
                        variant="ghost" 
                        size="sm" 
                        className="text-red-600 hover:bg-red-50"
                        onClick={() => onEliminarEvolucion(evolucion.id)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  
                  {signosTexto && (
                    <div className="bg-blue-50 p-2 rounded-lg">
                      <p className="text-sm font-medium text-blue-800 flex items-center gap-2">
                        <Activity className="h-4 w-4" />
                        Signos Vitales: {signosTexto}
                      </p>
                    </div>
                  )}
                  
                  {estaExpandida && (
                    <>
                      {evolucion.examenFisico && (
                        <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                          <p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p>
                          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
                            {evolucion.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {evolucion.examenFisico.SNC}</div>}
                            {evolucion.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {evolucion.examenFisico.Cardiovascular}</div>}
                            {evolucion.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {evolucion.examenFisico.Respiratorio}</div>}
                            {evolucion.examenFisico.Abdominal && <div><span className="font-medium">Abd:</span> {evolucion.examenFisico.Abdominal}</div>}
                            {evolucion.examenFisico.Genitourinario && <div><span className="font-medium">GU:</span> {evolucion.examenFisico.Genitourinario}</div>}
                            {evolucion.examenFisico.PielAnexos && <div><span className="font-medium">Piel:</span> {evolucion.examenFisico.PielAnexos}</div>}
                            {evolucion.examenFisico.SOMA && <div><span className="font-medium">SOMA:</span> {evolucion.examenFisico.SOMA}</div>}
                          </div>
                        </div>
                      )}
                      
                      {evolucion.novedades && (
                        <div className="bg-red-50 p-3 rounded-lg border border-red-200 mt-3">
                          <p className="text-sm font-medium text-red-800 mb-1">Novedades:</p>
                          <p className="text-sm text-gray-800 whitespace-pre-wrap">{evolucion.novedades}</p>
                        </div>
                      )}
                      
{evolucion.comentario && (
                        <div>
                          <p className="text-sm font-medium text-gray-700">Comentario:</p>
                          <p className="text-sm text-gray-600 whitespace-pre-wrap">{evolucion.comentario}</p>
                        </div>
                      )}
                      
                      {evolucion.pendientes && (
                        <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
                          <p className="text-sm font-medium text-amber-800 mb-1">Pendientes:</p>
                          <p className="text-sm text-amber-700 whitespace-pre-wrap">{evolucion.pendientes}</p>
                        </div>
                      )}
                    </>
                  )}
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {evolucionesFiltradas.length === 0 && (
        <div className="text-center py-12 text-gray-400">
          <FileText className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg">
            {busqueda ? 'No se encontraron evoluciones con esa búsqueda' : 'No hay evoluciones registradas'}
          </p>
        </div>
      )}
    </div>
  );
}