import { useState } from 'react';
import { createPortal } from 'react-dom';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Plus, Pencil, Trash2, X } from 'lucide-react';
import type { Indicacion, IndicacionTipo, ViaAdministracion, TipoPlanHidratacion, TipoInsulina, ATB } from '@/types';
import { useHospitalStore } from '@/hooks/useHospitalStore';
import { getNombreProfesional, getLocalToday } from '@/lib/utils';

export function SeccionIndicaciones({ recomendaciones, internacionId, pacienteId, add, update, del, movimientos, onAgregarMovimiento, canEdit, atbList = [], addATB, updateATB, portalNode}: {
  recomendaciones: Indicacion[];
  internacionId: string;
  pacienteId?: string;
  add: (i: Omit<Indicacion, 'id'>) => Promise<unknown>;
  update: (id: string, datos: Partial<Indicacion>) => void;
  del: (id: string) => void;
  movimientos?: unknown[];
  onAgregarMovimiento?: (m: unknown) => void;
  canEdit?: boolean;
  portalNode?: HTMLDivElement | null;
  atbList?: ATB[];
  addATB?: (a: Omit<ATB, 'id'>) => Promise<unknown>;
  updateATB?: (id: string, datos: Partial<ATB>) => void;
}) {
  const { currentUser } = useHospitalStore();
  const list: Indicacion[] = Array.isArray(recomendaciones) ? recomendaciones : [];
  const movs = Array.isArray(movimientos) ? movimientos : [];
  const [dialog, setDialog] = useState(false);
  const [edit, setEdit] = useState<Indicacion | null>(null);
  const [deleteConfirmInd, setDeleteConfirmInd] = useState<Indicacion | null>(null);
  const effectiveDeleteMedico = getNombreProfesional(currentUser);

  const formatIndicacion = (i: Indicacion): string => {
    if (i.tipo === 'Farmacologica' || i.tipo === 'Farmacologica Profilactica' || i.tipo === 'Farmacologica Antibiótico') return `${i.droga || ''} ${i.dosis || ''} ${i.frecuenciaHoras ? `c/${i.frecuenciaHoras}hs` : ''} ${i.via || ''}`.trim();
    if (i.tipo === 'Farmacologica Insulina') return `${i.tipoInsulina || ''}${i.unidadesDesayuno ? ` - PreDesayuno: ${i.unidadesDesayuno}U` : ''}${i.unidadesAlmuerzo ? ` - PreAlmuerzo: ${i.unidadesAlmuerzo}U` : ''}${i.unidadesNoche ? ` - 23hs: ${i.unidadesNoche}U` : ''}`.trim();
    if (i.tipo === 'No Farmacologica') return i.indicacionNoFco || '';
    if (i.tipo === 'PHP' || i.tipo === 'PHP Paralelo') return `${i.tipoPlan || ''} ${i.cantidadMl || ''}ml en ${i.tiempoHoras || ''}hs`;
    if (i.tipo === 'PHP Alterno') return `${i.tipoPlan || ''} ${i.cantidadMl || ''}ml + ${i.tipoPlan2 || ''} ${i.cantidadMl2 || ''}ml en ${i.tiempoHoras || ''}hs`;
    return '';
  };
  const [tipo, setTipo] = useState<IndicacionTipo>('Farmacologica');
  const [sortField, setSortField] = useState<'fecha' | 'profesional' | 'tipo'>('fecha');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');

  const handleSort = (field: 'fecha' | 'profesional' | 'tipo') => {
    if (sortField === field) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDir('desc');
    }
  };

  const sortedMovs = [...movs].sort((a, b) => {
    const recordA = a as Record<string, unknown>;
    const recordB = b as Record<string, unknown>;
    const aVal = String(recordA[sortField] || '');
    const bVal = String(recordB[sortField] || '');
    if (sortField === 'fecha') {
      const timeA = new Date(aVal.replace(' ', 'T')).getTime();
      const timeB = new Date(bVal.replace(' ', 'T')).getTime();
      return sortDir === 'asc' ? timeA - timeB : timeB - timeA;
    }
    return sortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
  });
  const [droga, setDroga] = useState('');
  const [dosis, setDosis] = useState('');
  const [frecuenciaHoras, setFrecuenciaHoras] = useState<number | ''>('');
  const [via, setVia] = useState<ViaAdministracion>('EV');
  const [indicacionNoFco, setIndicacionNoFco] = useState('');
  const [tipoPlan, setTipoPlan] = useState<TipoPlanHidratacion>('SF 0.9%');
  const [tipoPlan2, setTipoPlan2] = useState<TipoPlanHidratacion>('Ringer Lactato');
  const [cantidadMl, setCantidadMl] = useState<number | ''>('');
  const [cantidadMl2, setCantidadMl2] = useState<number | ''>('');
  const [tiempoHoras, setTiempoHoras] = useState<number | ''>(24);
  const [tipoInsulina, setTipoInsulina] = useState<TipoInsulina>('NPH');
  const [unidadesDesayuno, setUnidadesDesayuno] = useState<number | ''>('');
  const [unidadesAlmuerzo, setUnidadesAlmuerzo] = useState<number | ''>('');
  const [unidadesNoche, setUnidadesNoche] = useState<number | ''>('');
  const effectiveMedico = getNombreProfesional(currentUser);
  const [showHistorial, setShowHistorial] = useState(false);

  const vias: ViaAdministracion[] = ['Via Oral', 'EV', 'IM', 'SC', 'Por GGT', 'Por SNG'];
  const planes: TipoPlanHidratacion[] = ['SF 0.9%', 'Dextrosa 5%', 'Dextrosa 10%', 'Dextrosa 25%', 'Ringer Lactato'];
  const tiposInsulina: TipoInsulina[] = ['NPH', 'Glargina'];
  const tipos: IndicacionTipo[] = ['Farmacologica', 'Farmacologica Antibiótico', 'Farmacologica Profilactica', 'Farmacologica Insulina', 'No Farmacologica', 'PHP', 'PHP Paralelo', 'PHP Alterno'];

  const reset = () => {
    setEdit(null);
    setTipo('Farmacologica');
    setDroga('');
    setDosis('');
    setFrecuenciaHoras('');
    setVia('EV');
    setIndicacionNoFco('');
    setTipoPlan('SF 0.9%');
    setTipoPlan2('Ringer Lactato');
    setCantidadMl('');
    setCantidadMl2('');
    setTiempoHoras(24);
    setTipoInsulina('NPH');
    setUnidadesDesayuno('');
    setUnidadesAlmuerzo('');
    setUnidadesNoche('');
  };

  const loadEdit = (i: Indicacion) => {
    setEdit(i);
    setTipo(i.tipo);
    setDroga(i.droga || '');
    setDosis(i.dosis || '');
    setFrecuenciaHoras(i.frecuenciaHoras || '');
    setVia(i.via || 'EV');
    setIndicacionNoFco(i.indicacionNoFco || '');
    setTipoPlan(i.tipoPlan || 'SF 0.9%');
    setTipoPlan2(i.tipoPlan2 || 'Ringer Lactato');
    setCantidadMl(i.cantidadMl || '');
    setCantidadMl2(i.cantidadMl2 || '');
    setTiempoHoras(i.tiempoHoras || 24);
    setTipoInsulina(i.tipoInsulina || 'NPH');
    setUnidadesDesayuno(i.unidadesDesayuno || '');
    setUnidadesAlmuerzo(i.unidadesAlmuerzo || '');
    setUnidadesNoche(i.unidadesNoche || '');
    setDialog(true);
  };

  const handleGuardar = async () => {
    if (!effectiveMedico.trim()) return;
    if ((tipo === 'Farmacologica' || tipo === 'Farmacologica Profilactica' || tipo === 'Farmacologica Antibiótico') && (!droga.trim() || !dosis.trim())) return;
    if (tipo === 'Farmacologica Insulina' && (!unidadesDesayuno && !unidadesAlmuerzo && !unidadesNoche)) return;
    if (tipo === 'No Farmacologica' && !indicacionNoFco.trim()) return;
    if ((tipo === 'PHP' || tipo === 'PHP Paralelo') && !cantidadMl) return;
    if (tipo === 'PHP Alterno' && (!cantidadMl || !cantidadMl2)) return;

    const data: Partial<Indicacion> = {
      internacionId,
      tipo,
      estado: 'Activa',
      medicoCrea: effectiveMedico,
      fechaCrea: getLocalToday(),
    };

    if (tipo === 'Farmacologica' || tipo === 'Farmacologica Profilactica' || tipo === 'Farmacologica Antibiótico') {
      data.droga = droga;
      data.dosis = dosis;
      data.frecuenciaHoras = frecuenciaHoras || undefined;
      data.via = via;
    } else if (tipo === 'Farmacologica Insulina') {
      data.tipoInsulina = tipoInsulina;
      data.unidadesDesayuno = unidadesDesayuno || undefined;
      data.unidadesAlmuerzo = unidadesAlmuerzo || undefined;
      data.unidadesNoche = unidadesNoche || undefined;
    } else if (tipo === 'No Farmacologica') {
      data.indicacionNoFco = indicacionNoFco;
    } else if (tipo === 'PHP' || tipo === 'PHP Paralelo') {
      data.tipoPlan = tipoPlan;
      data.cantidadMl = cantidadMl;
      data.tiempoHoras = tiempoHoras;
    } else if (tipo === 'PHP Alterno') {
      data.tipoPlan = tipoPlan;
      data.cantidadMl = cantidadMl;
      data.tipoPlan2 = tipoPlan2;
      data.cantidadMl2 = cantidadMl2;
      data.tiempoHoras = tiempoHoras;
    }

    const now = new Date();
    const fecha = getLocalToday() + ' ' + now.toTimeString().split(' ')[0].substring(0, 5);
    if (edit) {
      if (edit.tipo === 'Farmacologica Antibiótico' && updateATB && addATB && atbList && pacienteId) {
        const oldDrug = edit.droga || '';
        const newDrug = droga || '';
        if (oldDrug.toLowerCase() !== newDrug.toLowerCase()) {
          const activeATB = atbList.find(a => 
            a.internacionId === internacionId && 
            a.antibiotico.toLowerCase() === oldDrug.toLowerCase() && 
            !a.fechaFinalizacion
          );
          if (activeATB) {
            const todayStr = getLocalToday();
            try {
              await updateATB(activeATB.id, { fechaFinalizacion: todayStr });
              await addATB({
                pacienteId,
                internacionId,
                antibiotico: newDrug,
                fechaInicio: todayStr,
              });
            } catch (atbErr) {
              console.error('Error al actualizar ATB en modificación de indicación:', atbErr);
            }
          }
        }
      }

      if (onAgregarMovimiento) {
        await onAgregarMovimiento({
          indicacionId: edit.id,
          internacionId,
          tipo: 'Modificacion',
          fecha,
          profesional: effectiveMedico,
          indicacionPrevia: formatIndicacion(edit),
          indicacionNueva: formatIndicacion({ ...edit, ...data } as Indicacion),
        });
      }
      await update(edit.id, data);
    } else {
      const newId = await add(data);
      if (tipo === 'Farmacologica Antibiótico' && addATB && pacienteId) {
        try {
          await addATB({
            pacienteId,
            internacionId,
            antibiotico: droga,
            fechaInicio: data.fechaCrea,
          });
        } catch (atbErr) {
          console.error('Error al agregar ATB automáticamente:', atbErr);
        }
      }
      if (onAgregarMovimiento) {
        await onAgregarMovimiento({
          indicacionId: typeof newId === 'string' ? newId : '',
          internacionId,
          tipo: 'Nueva',
          fecha,
          profesional: effectiveMedico,
          indicacionNueva: formatIndicacion({ ...data, id: newId } as Indicacion),
        });
      }
    }
    setDialog(false);
    reset();
  };

  const handleSuspender = async (i: Indicacion, suspendioMedico: string) => {
    const now = new Date();
    const fecha = getLocalToday() + ' ' + now.toTimeString().split(' ')[0].substring(0, 5);
    try {
      if (onAgregarMovimiento) {
        await onAgregarMovimiento({
          indicacionId: i.id,
          internacionId,
          tipo: 'Suspencion',
          fecha,
          profesional: suspendioMedico,
          indicacionPrevia: formatIndicacion(i),
        });
      }

      if (i.tipo === 'Farmacologica Antibiótico' && updateATB && atbList) {
        const fechaFin = getLocalToday();
        const activeATB = atbList.find(a => 
          a.internacionId === internacionId && 
          a.antibiotico.toLowerCase() === (i.droga || '').toLowerCase() && 
          !a.fechaFinalizacion
        );
        if (activeATB) {
          try {
            await updateATB(activeATB.id, { fechaFinalizacion: fechaFin });
          } catch (atbErr) {
            console.error('Error al finalizar ATB automáticamente:', atbErr);
          }
        }
      }

      await del(i.id);
      toast.success('Indicación eliminada correctamente');
    } catch (err) {
      console.error('Error al eliminar indicación:', err);
      toast.error('Error al eliminar la indicación');
    }
  };

  const indsFilter = list.filter(ind => ind.internacionId === internacionId);
  const activas = indsFilter.filter(ind => ind.estado === 'Activa');

  return (
    <div className="space-y-2.5">
      {portalNode ? createPortal(
    <>
      {canEdit && <Button size="sm" variant="outline" onClick={() => { reset(); setDialog(true); }}>
        <Plus className="h-4 w-4 mr-1.5" />Nueva Indicación
      </Button>}
      <Button size="sm" variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
        {showHistorial ? 'Ocultar Historial' : `Ver Historial (${movs.length})`}
      </Button>
    </>,
    portalNode
  ) : (
    <div className="flex justify-between items-center mb-4">
      {canEdit && <Button size="sm" variant="outline" onClick={() => { reset(); setDialog(true); }}>
        <Plus className="h-4 w-4 mr-1.5" />Nueva Indicación
      </Button>}
      <Button size="sm" variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
        {showHistorial ? 'Ocultar Historial' : `Ver Historial (${movs.length})`}
      </Button>
    </div>
  )}

      <Dialog open={dialog} onOpenChange={setDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>{edit ? 'Editar' : 'Nueva'} Indicación</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Tipo de Indicación</Label>
              <Select value={tipo} onValueChange={(v: IndicacionTipo) => setTipo(v)}>
                <SelectTrigger><SelectValue placeholder="Seleccionar tipo" /></SelectTrigger>
                <SelectContent>
                  {tipos.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label>Médico *</Label>
              <Input value={getNombreProfesional(currentUser)} disabled placeholder="Nombre del médico" />
            </div>

            {(tipo === 'Farmacologica' || tipo === 'Farmacologica Antibiótico') && (
              <>
                <div><Label>Droga *</Label><Input value={droga} onChange={e => setDroga(e.target.value)} placeholder="Nombre del medicamento" /></div>
                <div><Label>Dosis *</Label><Input value={dosis} onChange={e => setDosis(e.target.value)} placeholder="Ej: 500mg, 1g, 10ml" /></div>
                <div className="grid grid-cols-2 gap-4">
                  <div><Label>Frecuencia (hs)</Label><Input type="number" value={frecuenciaHoras} onChange={e => setFrecuenciaHoras(e.target.value ? parseInt(e.target.value) : '')} placeholder="Cada X horas" /></div>
                  <div><Label>Vía</Label><Select value={via} onValueChange={(v: ViaAdministracion) => setVia(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{vias.map(v => <SelectItem key={v} value={v}>{v}</SelectItem>)}</SelectContent></Select></div>
                </div>
              </>
            )}
            {tipo === 'Farmacologica Profilactica' && (
              <>
                <div><Label>Droga *</Label><Input value={droga} onChange={e => setDroga(e.target.value)} placeholder="Nombre del medicamento" /></div>
                <div><Label>Dosis *</Label><Input value={dosis} onChange={e => setDosis(e.target.value)} placeholder="Ej: 500mg, 1g, 10ml" /></div>
                <div className="grid grid-cols-2 gap-4">
                  <div><Label>Frecuencia (hs)</Label><Input type="number" value={frecuenciaHoras} onChange={e => setFrecuenciaHoras(e.target.value ? parseInt(e.target.value) : '')} placeholder="Cada X horas" /></div>
                  <div><Label>Vía</Label><Select value={via} onValueChange={(v: ViaAdministracion) => setVia(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{vias.map(v => <SelectItem key={v} value={v}>{v}</SelectItem>)}</SelectContent></Select></div>
                </div>
              </>
            )}
            {tipo === 'Farmacologica Insulina' && (
              <>
                <div><Label>Tipo de Insulina</Label><Select value={tipoInsulina} onValueChange={(v: TipoInsulina) => setTipoInsulina(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{tiposInsulina.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}</SelectContent></Select></div>
                <div className="grid grid-cols-3 gap-2">
                  <div className="flex flex-col justify-end space-y-1.5">
                    <Label className="text-xs sm:text-sm">Pre Desayuno (U)</Label>
                    <Input type="number" value={unidadesDesayuno} onChange={e => setUnidadesDesayuno(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
                  </div>
                  <div className="flex flex-col justify-end space-y-1.5">
                    <Label className="text-xs sm:text-sm">Pre Almuerzo (U)</Label>
                    <Input type="number" value={unidadesAlmuerzo} onChange={e => setUnidadesAlmuerzo(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
                  </div>
                  <div className="flex flex-col justify-end space-y-1.5">
                    <Label className="text-xs sm:text-sm">23hs (U)</Label>
                    <Input type="number" value={unidadesNoche} onChange={e => setUnidadesNoche(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
                  </div>
                </div>
              </>
            )}

            {tipo === 'No Farmacologica' && (
              <div><Label>Indicacionión *</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={indicacionNoFco} onChange={e => setIndicacionNoFco(e.target.value)} placeholder="Ej: Control de signos vitales, Dieta, etc." /></div>
            )}

            {(tipo === 'PHP' || tipo === 'PHP Paralelo') && (
              <>
                <div><Label>Tipo de Plan</Label><Select value={tipoPlan} onValueChange={(v: TipoPlanHidratacion) => setTipoPlan(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{planes.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}</SelectContent></Select></div>
                <div className="grid grid-cols-2 gap-4">
                  <div><Label>Cantidad (ml) *</Label><Input type="number" value={cantidadMl} onChange={e => setCantidadMl(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
                  <div><Label>Tiempo (hs)</Label><Input type="number" value={tiempoHoras} onChange={e => setTiempoHoras(e.target.value ? parseInt(e.target.value) : 24)} placeholder="24" /></div>
                </div>
              </>
            )}

            {tipo === 'PHP Alterno' && (
              <>
                <div><Label>Plan 1</Label><Select value={tipoPlan} onValueChange={(v: TipoPlanHidratacion) => setTipoPlan(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{planes.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}</SelectContent></Select></div>
                <div className="grid grid-cols-2 gap-4">
                  <div><Label>Cantidad Plan 1 (ml) *</Label><Input type="number" value={cantidadMl} onChange={e => setCantidadMl(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
                </div>
                <div><Label>Plan 2</Label><Select value={tipoPlan2} onValueChange={(v: TipoPlanHidratacion) => setTipoPlan2(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{planes.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}</SelectContent></Select></div>
                <div className="grid grid-cols-2 gap-4">
                  <div><Label>Cantidad Plan 2 (ml) *</Label><Input type="number" value={cantidadMl2} onChange={e => setCantidadMl2(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
                  <div><Label>Tiempo Total (hs)</Label><Input type="number" value={tiempoHoras} onChange={e => setTiempoHoras(e.target.value ? parseInt(e.target.value) : 24)} placeholder="24" /></div>
                </div>
              </>
            )}
          </div>
          <div className="flex justify-end gap-2 mt-4">
            <Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
            <Button onClick={handleGuardar} disabled={!effectiveMedico.trim()}>Guardar</Button>
          </div>
        </DialogContent>
      </Dialog>

      {activas.length === 0 ? (
        <div className="text-center py-6 text-gray-500 text-sm">No hay indicaciones activas</div>
      ) : (
        <div className="space-y-1.5">
          {activas.map(ind => (
            <Card key={ind.id}>
              <CardContent className="py-2 px-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-1.5 mb-0.5">
                    <Badge variant="outline" className="text-xs py-0 px-1.5 h-5">{ind.tipo}</Badge>
                    {ind.medicoCrea && <span className="text-xs text-muted-foreground">Dr: {ind.medicoCrea}</span>}
                  </div>
                  {ind.tipo === 'Farmacologica' && (
                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via}</div>
                  )}
                  {ind.tipo === 'Farmacologica Antibiótico' && (
                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via} <Badge className="ml-1.5 py-0 px-1.5 h-5 text-xs bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-300 hover:bg-purple-100">Antibiótico</Badge></div>
                  )}
                  {ind.tipo === 'Farmacologica Profilactica' && (
                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via}</div>
                  )}
                  {ind.tipo === 'Farmacologica Insulina' && (
                    <div className="font-medium text-sm leading-tight">{ind.tipoInsulina}
                      {ind.unidadesDesayuno && ` - PreDesayuno: ${ind.unidadesDesayuno}U`}
                      {ind.unidadesAlmuerzo && ` - PreAlmuerzo: ${ind.unidadesAlmuerzo}U`}
                      {ind.unidadesNoche && ` - 23hs: ${ind.unidadesNoche}U`}
                    </div>
                  )}
                  {ind.tipo === 'No Farmacologica' && (
                    <div className="font-medium text-sm leading-tight">{ind.indicacionNoFco}</div>
                  )}
                  {(ind.tipo === 'PHP' || ind.tipo === 'PHP Paralelo') && (
                    <div className="font-medium text-sm leading-tight">{ind.tipoPlan} {ind.cantidadMl}ml en {ind.tiempoHoras}hs</div>
                  )}
                  {ind.tipo === 'PHP Alterno' && (
                    <div className="font-medium text-sm leading-tight">{ind.tipoPlan} {ind.cantidadMl}ml + {ind.tipoPlan2} {ind.cantidadMl2}ml en {ind.tiempoHoras}hs</div>
                  )}
                </div>
                <div className="flex gap-1 shrink-0">
                  {canEdit && <Button size="sm" variant="outline" className="h-7 w-7 p-0" title="Editar" onClick={() => loadEdit(ind)}>
                    <Pencil className="h-3.5 w-3.5" />
                  </Button>}
                  {canEdit && <Button size="sm" variant="outline" className="h-7 w-7 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30" title="Eliminar" onClick={() => {
                    setDeleteConfirmInd(ind);
                  }}>
                    <Trash2 className="h-3.5 w-3.5" />
                  </Button>}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {deleteConfirmInd && (
        <Dialog open={!!deleteConfirmInd} onOpenChange={(open) => { if (!open) setDeleteConfirmInd(null); }}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle className="text-red-600 flex items-center gap-2">
                <Trash2 className="h-5 w-5" />
                Confirmar eliminación de indicación
              </DialogTitle>
            </DialogHeader>
            <div className="space-y-4 py-2">
              <p className="text-sm text-muted-foreground">
                ¿Está seguro de que desea suspender/eliminar esta indicación? Se registrará la baja en el historial.
              </p>
              <div className="p-3 bg-muted rounded-md text-sm font-medium">
                <span className="text-xs text-muted-foreground block mb-1">Indicación:</span>
                {formatIndicacion(deleteConfirmInd)}
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="delete-medico">Médico que suspende / elimina *</Label>
                <Input
                  id="delete-medico"
                  value={getNombreProfesional(currentUser)}
                  disabled
                  placeholder="Nombre del profesional..."
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 mt-2">
              <Button variant="outline" onClick={() => setDeleteConfirmInd(null)}>
                Cancelar
              </Button>
              <Button
                variant="destructive"
                onClick={async () => {
                  const med = effectiveDeleteMedico.trim() || deleteConfirmInd.medicoCrea || 'Médico';
                  const indToDel = deleteConfirmInd;
                  setDeleteConfirmInd(null);
                  await handleSuspender(indToDel, med);
                }}
              >
                Eliminar
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      )}

      {showHistorial && (
        <Dialog open={showHistorial} onOpenChange={setShowHistorial}>
          <DialogContent className="max-w-4xl max-h-[80vh] overflow-auto">
            <DialogHeader>
              <DialogTitle>Historial de Indicaciones</DialogTitle>
            </DialogHeader>
            {movs.length === 0 ? (
              <p className="text-gray-500 py-4">Sin movimientos registrados</p>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('fecha')}>
                      Fecha {sortField === 'fecha' && (sortDir === 'asc' ? '↑' : '↓')}
                    </TableHead>
                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('profesional')}>
                      Profesional {sortField === 'profesional' && (sortDir === 'asc' ? '↑' : '↓')}
                    </TableHead>
                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('tipo')}>
                      Tipo {sortField === 'tipo' && (sortDir === 'asc' ? '↑' : '↓')}
                    </TableHead>
                    <TableHead>Indicación</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sortedMovs.map(mov => (
                    <TableRow key={mov.id}>
                      <TableCell>{mov.fecha}</TableCell>
                      <TableCell>{mov.profesional}</TableCell>
                      <TableCell>
                        <Badge className={
                          mov.tipo === 'Nueva' || mov.tipo === 'Indicacion'
                            ? 'bg-green-600 hover:bg-green-700 text-white'
                            : mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion'
                            ? 'bg-red-600 hover:bg-red-700 text-white'
                            : 'bg-orange-500 hover:bg-orange-600 text-white'
                        }>
                          {mov.tipo === 'Nueva' || mov.tipo === 'Indicacion' ? 'Nueva' : mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion' ? 'Suspensión' : 'Modificación'}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {mov.tipo === 'Modificacion' ? (
                          <div className="text-sm">
                            <div className="text-red-500 line-through">{mov.indicacionPrevia}</div>
                            <div className="text-green-500">{mov.indicacionNueva}</div>
                          </div>
                        ) : (mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion') ? mov.indicacionPrevia : mov.indicacionNueva || mov.indicacionPrevia}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
}