import { useState } from 'react';
import { Activity, Plus, Search, Calendar, Clock } 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 type { AcidoBase, Paciente } from '@/types';

interface AcidoBaseProps {
  acidosBase: AcidoBase[];
  pacientes: Paciente[];
  onAgregarAcidoBase: (acidoBase: Omit<AcidoBase, 'id'>) => void;
  onEliminarAcidoBase: (id: string) => void;
  getPacienteById: (id: string) => Paciente | undefined;
}

const REFERENCIAS = {
  ph: { min: 7.35, max: 7.45, unidad: '' },
  pco2: { min: 35, max: 45, unidad: 'mmHg' },
  po2: { min: 80, max: 100, unidad: 'mmHg' },
  hco3: { min: 22, max: 26, unidad: 'mEq/L' },
  be: { min: -2, max: 2, unidad: 'mEq/L' },
  sato2: { min: 95, max: 100, unidad: '%' },
  lactato: { min: 0.5, max: 2.2, unidad: 'mmol/L' },
};

export function AcidoBaseSection({ 
  acidosBase, 
  pacientes,
  onAgregarAcidoBase, 
  onEliminarAcidoBase,
  getPacienteById,
}: AcidoBaseProps) {
  const [busqueda, setBusqueda] = useState('');
  const [dialogoAbierto, setDialogoAbierto] = useState(false);
  
  // Formulario
  const [pacienteSeleccionado, setPacienteSeleccionado] = useState('');
  const [busquedaPaciente, setBusquedaPaciente] = useState('');
  const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
  const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
  const [ph, setPh] = useState('');
  const [pco2, setPco2] = useState('');
  const [po2, setPo2] = useState('');
  const [hco3, setHco3] = useState('');
  const [be, setBe] = useState('');
  const [sato2, setSato2] = useState('');
  const [lactato, setLactato] = useState('');
  const [interpretacion, setInterpretacion] = useState('');

  const resetFormulario = () => {
    setPacienteSeleccionado('');
    setBusquedaPaciente('');
    setFecha(new Date().toISOString().split('T')[0]);
    setHora(new Date().toTimeString().slice(0, 5));
    setPh('');
    setPco2('');
    setPo2('');
    setHco3('');
    setBe('');
    setSato2('');
    setLactato('');
    setInterpretacion('');
  };

  const getEstadoParametro = (parametro: keyof typeof REFERENCIAS, valor: number) => {
    const ref = REFERENCIAS[parametro];
    if (valor < ref.min) return { estado: 'Bajo', color: 'text-blue-600' };
    if (valor > ref.max) return { estado: 'Alto', color: 'text-red-600' };
    return { estado: 'Normal', color: 'text-green-600' };
  };

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

  const interpretarGasometria = () => {
    const phVal = parseFloat(ph);
    const pco2Val = parseFloat(pco2);
    const hco3Val = parseFloat(hco3);
    const beVal = parseFloat(be);
    
    if (!phVal || !pco2Val || !hco3Val) return '';
    
    let interpretacion = '';
    
    // Determinar acidosis o alcalosis
    if (phVal < 7.35) {
      interpretacion += 'Acidemia - ';
      if (pco2Val > 45) interpretacion += 'Acidosis Respiratoria';
      else if (hco3Val < 22) interpretacion += 'Acidosis Metabólica';
      else interpretacion += 'Acidosis Mixta';
    } else if (phVal > 7.45) {
      interpretacion += 'Alcalemia - ';
      if (pco2Val < 35) interpretacion += 'Alcalosis Respiratoria';
      else if (hco3Val > 26) interpretacion += 'Alcalosis Metabólica';
      else interpretacion += 'Alcalosis Mixta';
    } else {
      interpretacion += 'pH Normal - ';
      if (pco2Val > 45 || hco3Val < 22) interpretacion += 'Compensación en curso';
      else interpretacion += 'Equilibrio Ácido-Base';
    }
    
    // Agregar información sobre compensación
    if (beVal && Math.abs(beVal) > 2) {
      interpretacion += beVal > 0 ? ' (Exceso de bases elevado)' : ' (Déficit de bases)';
    }
    
    return interpretacion;
  };

  const handleGuardar = () => {
    if (!pacienteSeleccionado || !ph || !pco2 || !po2 || !hco3 || !be || !sato2) return;

    const interpretacionAuto = interpretarGasometria();

    onAgregarAcidoBase({
      pacienteId: pacienteSeleccionado,
      fecha,
      hora,
      ph: parseFloat(ph),
      pco2: parseFloat(pco2),
      po2: parseFloat(po2),
      hco3: parseFloat(hco3),
      be: parseFloat(be),
      sato2: parseFloat(sato2),
      lactato: lactato ? parseFloat(lactato) : undefined,
      interpretacion: interpretacion || interpretacionAuto,
    });

    resetFormulario();
    setDialogoAbierto(false);
  };

  const acidosBaseFiltrados = acidosBase
    .filter(ab => {
      const paciente = getPacienteById(ab.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 getColorPh = (ph: number) => {
    if (ph < 7.2 || ph > 7.6) return 'bg-red-100 text-red-800';
    if (ph < 7.35 || ph > 7.45) return 'bg-amber-100 text-amber-800';
    return 'bg-green-100 text-green-800';
  };

  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">Estados Ácido-Base</h1>
          <p className="text-gray-500">Gasometrías y análisis de equilibrio ácido-base</p>
        </div>
        <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
          <DialogTrigger asChild>
            <Button onClick={resetFormulario}>
              <Plus className="h-4 w-4 mr-2" />
              Nueva Gasometría
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Nueva Gasometría Arterial</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="sm:col-span-3">
                  {!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 flex-wrap">
                      <Badge className="bg-green-100 text-green-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>
                <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="grid grid-cols-7 gap-2">
                <div>
                  <Label>pH *</Label>
                  <Input 
                    type="number"
                    step="0.01"
                    value={ph}
                    onChange={(e) => setPh(e.target.value)}
                    placeholder="7.40"
                  />
                </div>
                <div>
                  <Label>pCO2 *</Label>
                  <Input 
                    type="number"
                    value={pco2}
                    onChange={(e) => setPco2(e.target.value)}
                    placeholder="40"
                  />
                </div>
                <div>
                  <Label>pO2 *</Label>
                  <Input 
                    type="number"
                    value={po2}
                    onChange={(e) => setPo2(e.target.value)}
                    placeholder="85"
                  />
                </div>
                <div>
                  <Label>HCO3- *</Label>
                  <Input 
                    type="number"
                    step="0.1"
                    value={hco3}
                    onChange={(e) => setHco3(e.target.value)}
                    placeholder="24"
                  />
                </div>
                <div>
                  <Label>BE *</Label>
                  <Input 
                    type="number"
                    step="0.1"
                    value={be}
                    onChange={(e) => setBe(e.target.value)}
                    placeholder="0"
                  />
                </div>
                <div>
                  <Label>SatO2 *</Label>
                  <Input 
                    type="number"
                    value={sato2}
                    onChange={(e) => setSato2(e.target.value)}
                    placeholder="97"
                  />
                </div>
                <div>
                  <Label>Lactato</Label>
                  <Input 
                    type="number"
                    step="0.1"
                    value={lactato}
                    onChange={(e) => setLactato(e.target.value)}
                    placeholder="1.0"
                  />
                </div>
              </div>
              
              {ph && pco2 && hco3 && (
                <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                  <p className="text-sm font-medium text-blue-800 flex items-center gap-2">
                    <Activity className="h-4 w-4" />
                    Interpretación automática: {interpretarGasometria()}
                  </p>
                </div>
              )}
              
              <div>
                <Label>Interpretación / Comentarios</Label>
                <textarea
                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                  value={interpretacion}
                  onChange={(e) => setInterpretacion(e.target.value)}
                  placeholder="Interpretación clínica..."
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 mt-4">
              <Button variant="outline" onClick={() => {
                resetFormulario();
                setDialogoAbierto(false);
              }}>
                Cancelar
              </Button>
              <Button 
                onClick={handleGuardar}
                disabled={!pacienteSeleccionado || !ph || !pco2 || !po2 || !hco3 || !be || !sato2}
              >
                <Plus className="h-4 w-4 mr-2" />
                Guardar Gasometría
              </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 paciente..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      {/* Lista de Gasometrías */}
      <div className="space-y-4">
        {acidosBaseFiltrados.map((ab) => {
          const paciente = getPacienteById(ab.pacienteId);
          const phEstado = getEstadoParametro('ph', ab.ph);
          
          return (
            <Card key={ab.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-teal-100 rounded-full flex items-center justify-center">
                        <Activity className="h-5 w-5 text-teal-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" />
                            {ab.fecha}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {ab.hora}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge className={getColorPh(ab.ph)}>
                        pH: {ab.ph}
                      </Badge>
                      <Button 
                        variant="ghost" 
                        size="sm" 
                        className="text-red-600 hover:bg-red-50"
                        onClick={() => onEliminarAcidoBase(ab.id)}
                      >
                        Eliminar
                      </Button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-3 sm:grid-cols-7 gap-2">
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">pH</p>
                      <p className={`font-bold ${phEstado.color}`}>{ab.ph}</p>
                    </div>
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">pCO2</p>
                      <p className="font-bold">{ab.pco2}</p>
                    </div>
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">pO2</p>
                      <p className="font-bold">{ab.po2}</p>
                    </div>
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">HCO3</p>
                      <p className="font-bold">{ab.hco3}</p>
                    </div>
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">BE</p>
                      <p className="font-bold">{ab.be}</p>
                    </div>
                    <div className="bg-gray-50 p-2 rounded text-center">
                      <p className="text-xs text-gray-500">SatO2</p>
                      <p className="font-bold">{ab.sato2}%</p>
                    </div>
                    {ab.lactato && (
                      <div className="bg-gray-50 p-2 rounded text-center">
                        <p className="text-xs text-gray-500">Lactato</p>
                        <p className="font-bold">{ab.lactato}</p>
                      </div>
                    )}
                  </div>
                  
                  {ab.interpretacion && (
                    <div className="bg-teal-50 p-3 rounded-lg border border-teal-200">
                      <p className="text-sm font-medium text-teal-800 flex items-center gap-2">
                        Interpretación: {ab.interpretacion}
                      </p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

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