/**
 * Editor de Protocolo Completo
 * 
 * Permite crear y editar protocolos operativos con:
 * - Pasos rápidos estructurados
 * - Checklist integrado
 * - Dosis inline
 * - Herramientas de contexto
 * - Fuentes clínicas
 * - Vista previa "modo TES"
 */

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Save,
  Plus,
  Trash2,
  GripVertical,
  AlertCircle,
  Eye,
  ArrowLeft,
  Pill,
  BookOpen,
  Calculator,
  CheckSquare,
} from 'lucide-react';
import { contentService } from '../services/content';
import { useAuth } from '../contexts/AuthContext';
import ResourcesManager from '../components/content/ResourcesManager';
import ValidationHistory from '../components/content/ValidationHistory';
import type {
  Protocol,
  ProtocolStep,
  ProtocolChecklistItem,
  InlineDose,
  ProtocolContextTool,
  ClinicalSource,
} from '../../shared/types/content';

export default function ProtocolEditorPage() {
  const { id } = useParams<{ id?: string }>();
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const isEdit = !!id;

  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [activeTab, setActiveTab] = useState<'basic' | 'steps' | 'checklist' | 'doses' | 'tools' | 'sources' | 'resources'>('basic');
  const [associatedResources, setAssociatedResources] = useState<any[]>([]);
  const [showResourceSelector, setShowResourceSelector] = useState(false);

  // Estado del protocolo
  const [protocol, setProtocol] = useState<Partial<Protocol>>({
    id: id || '',
    type: 'protocol',
    level: 'operativo',
    title: '',
    shortTitle: '',
    description: '',
    category: 'soporte_vital',
    subcategory: '',
    priority: 'critico',
    ageGroup: 'adulto',
    status: 'draft',
    content: {
      pasosRapidos: [],
      warnings: [],
      keyPoints: [],
      equipment: [],
      drugs: [],
      version: 1,
      lastUpdated: new Date().toISOString(),
    },
  });

  // Cargar protocolo existente
  useEffect(() => {
    if (isEdit && id) {
      setIsLoading(true);
      contentService
        .getById(id)
        .then((data: any) => {
          setProtocol({
            ...data,
            content: data.content || {
              pasosRapidos: [],
              warnings: [],
              keyPoints: [],
              equipment: [],
              drugs: [],
              version: 1,
              lastUpdated: new Date().toISOString(),
            },
          });
        })
        .catch((error) => {
          console.error('Error cargando protocolo:', error);
          setErrors({ general: 'Error al cargar el protocolo' });
        })
        .finally(() => setIsLoading(false));
    }
  }, [id, isEdit]);

  // Validación
  const validate = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!protocol.id?.trim()) {
      newErrors.id = 'ID es requerido';
    }
    if (!protocol.title?.trim()) {
      newErrors.title = 'Título es requerido';
    }
    if (!protocol.content?.pasosRapidos || protocol.content.pasosRapidos.length === 0) {
      newErrors.pasosRapidos = 'Debe tener al menos un paso';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Guardar
  const handleSave = async () => {
    if (!validate()) {
      return;
    }

    if (!hasPermission('content:write:protocol')) {
      setErrors({ general: 'No tienes permisos para editar protocolos' });
      return;
    }

    setIsSaving(true);
    try {
      const payload = {
        id: protocol.id,
        type: 'protocol',
        level: 'operativo',
        title: protocol.title,
        shortTitle: protocol.shortTitle,
        description: protocol.description,
        category: protocol.category,
        subcategory: protocol.subcategory,
        priority: protocol.priority,
        ageGroup: protocol.ageGroup,
        content: protocol.content,
        status: protocol.status || 'draft',
      };

      if (isEdit) {
        await contentService.update(id!, payload);
      } else {
        await contentService.create(payload);
      }

      navigate('/content');
    } catch (error: any) {
      console.error('Error guardando protocolo:', error);
      setErrors({ general: error.response?.data?.error || 'Error al guardar' });
    } finally {
      setIsSaving(false);
    }
  };

  // Gestión de pasos rápidos
  const addStep = () => {
    const newStep: ProtocolStep = {
      order: (protocol.content?.pasosRapidos?.length || 0) + 1,
      text: '',
      critical: false,
    };
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        pasosRapidos: [...(protocol.content?.pasosRapidos || []), newStep],
      },
    });
  };

  const removeStep = (order: number) => {
    const steps = protocol.content?.pasosRapidos?.filter((s) => s.order !== order) || [];
    steps.forEach((step, index) => {
      step.order = index + 1;
    });
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        pasosRapidos: steps,
      },
    });
  };

  const updateStep = (order: number, updates: Partial<ProtocolStep>) => {
    const steps = protocol.content?.pasosRapidos?.map((step) =>
      step.order === order ? { ...step, ...updates } : step
    ) || [];
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        pasosRapidos: steps,
      },
    });
  };

  // Gestión de warnings
  const addWarning = () => {
    const warnings = [...(protocol.content?.warnings || []), ''];
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        warnings,
      },
    });
  };

  const updateWarning = (index: number, value: string) => {
    const warnings = [...(protocol.content?.warnings || [])];
    warnings[index] = value;
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        warnings: warnings.filter((w) => w.trim()),
      },
    });
  };

  // Gestión de dosis inline
  const addDose = () => {
    const newDose: InlineDose = {
      drugId: '',
      drugName: '',
      adultDose: '',
      route: 'IV',
    };
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        dosisInline: [...(protocol.content?.dosisInline || []), newDose],
      },
    });
  };

  const removeDose = (index: number) => {
    const doses = protocol.content?.dosisInline?.filter((_, i) => i !== index) || [];
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        dosisInline: doses,
      },
    });
  };

  const updateDose = (index: number, updates: Partial<InlineDose>) => {
    const doses = [...(protocol.content?.dosisInline || [])];
    doses[index] = { ...doses[index], ...updates };
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        dosisInline: doses,
      },
    });
  };

  // Gestión de fuentes clínicas
  const addSource = () => {
    const newSource: ClinicalSource = {
      organization: '',
      guideline: '',
      year: new Date().getFullYear(),
    };
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        fuentes: [...(protocol.content?.fuentes || []), newSource],
      },
    });
  };

  const removeSource = (index: number) => {
    const sources = protocol.content?.fuentes?.filter((_, i) => i !== index) || [];
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        fuentes: sources,
      },
    });
  };

  const updateSource = (index: number, updates: Partial<ClinicalSource>) => {
    const sources = [...(protocol.content?.fuentes || [])];
    sources[index] = { ...sources[index], ...updates };
    setProtocol({
      ...protocol,
      content: {
        ...protocol.content!,
        fuentes: sources,
      },
    });
  };

  if (isLoading) {
    return (
      <div className="p-6">
        <div className="text-muted-foreground">Cargando protocolo...</div>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <button
            onClick={() => navigate('/content')}
            className="flex items-center gap-2 text-muted-foreground hover:text-foreground mb-2"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Volver</span>
          </button>
          <h1 className="text-3xl font-bold text-foreground">
            {isEdit ? 'Editar Protocolo' : 'Nuevo Protocolo'}
          </h1>
          <p className="text-muted-foreground mt-1">
            Crea y edita protocolos operativos con checklist, dosis y fuentes
          </p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => setShowPreview(!showPreview)}
            className="px-4 py-2 border border-border rounded-lg hover:bg-muted transition-colors flex items-center gap-2"
          >
            <Eye className="w-4 h-4" />
            {showPreview ? 'Ocultar' : 'Vista'} Previa
          </button>
          <button
            onClick={handleSave}
            disabled={isSaving}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 disabled:opacity-50"
          >
            <Save className="w-4 h-4" />
            {isSaving ? 'Guardando...' : 'Guardar'}
          </button>
        </div>
      </div>

      {errors.general && (
        <div className="bg-destructive/10 border border-destructive/30 rounded-lg p-4 flex items-center gap-2 text-destructive">
          <AlertCircle className="w-5 h-5" />
          <span>{errors.general}</span>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Formulario */}
        <div className="space-y-6">
          {/* Tabs */}
          <div className="bg-card border border-border rounded-xl p-2">
            <div className="flex gap-2 overflow-x-auto">
              {[
                { id: 'basic', label: 'Básico' },
                { id: 'steps', label: 'Pasos' },
                { id: 'checklist', label: 'Checklist' },
                { id: 'doses', label: 'Dosis' },
                { id: 'tools', label: 'Herramientas' },
                { id: 'resources', label: 'Recursos' },
                { id: 'sources', label: 'Fuentes' },
              ].map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id as any)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${
                    activeTab === tab.id
                      ? 'bg-primary text-primary-foreground'
                      : 'text-muted-foreground hover:bg-muted'
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>

          {/* Tab: Básico */}
          {activeTab === 'basic' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <h2 className="text-xl font-semibold text-foreground">Información Básica</h2>

              <div>
                <label className="block text-sm font-medium mb-1">
                  ID <span className="text-destructive">*</span>
                </label>
                <input
                  type="text"
                  value={protocol.id || ''}
                  onChange={(e) => setProtocol({ ...protocol, id: e.target.value })}
                  disabled={isEdit}
                  className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                  placeholder="rcp-adulto-svb"
                />
                {errors.id && <p className="text-sm text-destructive mt-1">{errors.id}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium mb-1">
                  Título <span className="text-destructive">*</span>
                </label>
                <input
                  type="text"
                  value={protocol.title || ''}
                  onChange={(e) => setProtocol({ ...protocol, title: e.target.value })}
                  className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                  placeholder="RCP Adulto - Soporte Vital Básico"
                />
                {errors.title && <p className="text-sm text-destructive mt-1">{errors.title}</p>}
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1">Categoría</label>
                  <select
                    value={protocol.category || 'soporte_vital'}
                    onChange={(e) => setProtocol({ ...protocol, category: e.target.value as any })}
                    className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                  >
                    <option value="soporte_vital">Soporte Vital</option>
                    <option value="patologias">Patologías</option>
                    <option value="escena">Escena</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium mb-1">Prioridad</label>
                  <select
                    value={protocol.priority || 'critico'}
                    onChange={(e) => setProtocol({ ...protocol, priority: e.target.value as any })}
                    className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                  >
                    <option value="critico">Crítico</option>
                    <option value="alto">Alto</option>
                    <option value="medio">Medio</option>
                    <option value="bajo">Bajo</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-1">Grupo de Edad</label>
                <select
                  value={protocol.ageGroup || 'adulto'}
                  onChange={(e) => setProtocol({ ...protocol, ageGroup: e.target.value as any })}
                  className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                >
                  <option value="adulto">Adulto</option>
                  <option value="pediatrico">Pediátrico</option>
                  <option value="neonatal">Neonatal</option>
                  <option value="todos">Todos</option>
                </select>
              </div>
            </div>
          )}

          {/* Tab: Pasos */}
          {activeTab === 'steps' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Pasos Rápidos</h2>
                <button
                  onClick={addStep}
                  className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm"
                >
                  <Plus className="w-4 h-4" />
                  Añadir Paso
                </button>
              </div>

              {errors.pasosRapidos && (
                <p className="text-sm text-destructive">{errors.pasosRapidos}</p>
              )}

              <div className="space-y-3">
                {protocol.content?.pasosRapidos?.map((step) => (
                  <div
                    key={step.order}
                    className="bg-muted/50 border border-border rounded-lg p-4 space-y-3"
                  >
                    <div className="flex items-start gap-3">
                      <div className="pt-2">
                        <span className="text-sm text-muted-foreground">#{step.order}</span>
                      </div>
                      <div className="flex-1 space-y-2">
                        <textarea
                          value={step.text}
                          onChange={(e) => updateStep(step.order, { text: e.target.value })}
                          rows={2}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                          placeholder="Texto del paso..."
                        />
                        <div className="flex items-center gap-4">
                          <label className="flex items-center gap-2 text-sm">
                            <input
                              type="checkbox"
                              checked={step.critical || false}
                              onChange={(e) => updateStep(step.order, { critical: e.target.checked })}
                              className="rounded"
                            />
                            <span className="text-muted-foreground">Crítico</span>
                          </label>
                          <input
                            type="text"
                            value={step.timeEstimate || ''}
                            onChange={(e) => updateStep(step.order, { timeEstimate: e.target.value })}
                            className="px-3 py-1.5 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                            placeholder="Tiempo estimado (ej: 30-60s)"
                          />
                        </div>
                      </div>
                      <button
                        onClick={() => removeStep(step.order)}
                        className="p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}

                {(!protocol.content?.pasosRapidos || protocol.content.pasosRapidos.length === 0) && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No hay pasos. Haz clic en "Añadir Paso" para comenzar.</p>
                  </div>
                )}
              </div>

              {/* Warnings */}
              <div className="mt-6 pt-6 border-t border-border">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-foreground">Advertencias</h3>
                  <button
                    onClick={addWarning}
                    className="px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors"
                  >
                    <Plus className="w-4 h-4 inline mr-1" />
                    Añadir
                  </button>
                </div>
                <div className="space-y-2">
                  {protocol.content?.warnings?.map((warning, index) => (
                    <input
                      key={index}
                      type="text"
                      value={warning}
                      onChange={(e) => updateWarning(index, e.target.value)}
                      className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                      placeholder="Advertencia importante..."
                    />
                  ))}
                </div>
              </div>

              {/* Key Points */}
              <div className="mt-6 pt-6 border-t border-border">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-foreground">Puntos Clave</h3>
                  <button
                    onClick={() => {
                      const keyPoints = [...(protocol.content?.keyPoints || []), ''];
                      setProtocol({
                        ...protocol,
                        content: {
                          ...protocol.content!,
                          keyPoints,
                        },
                      });
                    }}
                    className="px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors"
                  >
                    <Plus className="w-4 h-4 inline mr-1" />
                    Añadir
                  </button>
                </div>
                <div className="space-y-2">
                  {protocol.content?.keyPoints?.map((point, index) => (
                    <input
                      key={index}
                      type="text"
                      value={point}
                      onChange={(e) => {
                        const keyPoints = [...(protocol.content?.keyPoints || [])];
                        keyPoints[index] = e.target.value;
                        setProtocol({
                          ...protocol,
                          content: {
                            ...protocol.content!,
                            keyPoints: keyPoints.filter((p) => p.trim()),
                          },
                        });
                      }}
                      className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                      placeholder="Punto clave importante..."
                    />
                  ))}
                </div>
              </div>

              {/* Equipment */}
              <div className="mt-6 pt-6 border-t border-border">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-foreground">Equipamiento</h3>
                  <button
                    onClick={() => {
                      const equipment = [...(protocol.content?.equipment || []), ''];
                      setProtocol({
                        ...protocol,
                        content: {
                          ...protocol.content!,
                          equipment,
                        },
                      });
                    }}
                    className="px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors"
                  >
                    <Plus className="w-4 h-4 inline mr-1" />
                    Añadir
                  </button>
                </div>
                <div className="space-y-2">
                  {protocol.content?.equipment?.map((item, index) => (
                    <input
                      key={index}
                      type="text"
                      value={item}
                      onChange={(e) => {
                        const equipment = [...(protocol.content?.equipment || [])];
                        equipment[index] = e.target.value;
                        setProtocol({
                          ...protocol,
                          content: {
                            ...protocol.content!,
                            equipment: equipment.filter((e) => e.trim()),
                          },
                        });
                      }}
                      className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                      placeholder="DEA, Bolsa-mascarilla..."
                    />
                  ))}
                </div>
              </div>

              {/* Drugs (Referencias) */}
              <div className="mt-6 pt-6 border-t border-border">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-foreground">Fármacos (Referencias)</h3>
                  <button
                    onClick={() => {
                      const drugs = [...(protocol.content?.drugs || []), ''];
                      setProtocol({
                        ...protocol,
                        content: {
                          ...protocol.content!,
                          drugs,
                        },
                      });
                    }}
                    className="px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors"
                  >
                    <Plus className="w-4 h-4 inline mr-1" />
                    Añadir
                  </button>
                </div>
                <div className="space-y-2">
                  {protocol.content?.drugs?.map((drug, index) => (
                    <input
                      key={index}
                      type="text"
                      value={drug}
                      onChange={(e) => {
                        const drugs = [...(protocol.content?.drugs || [])];
                        drugs[index] = e.target.value;
                        setProtocol({
                          ...protocol,
                          content: {
                            ...protocol.content!,
                            drugs: drugs.filter((d) => d.trim()),
                          },
                        });
                      }}
                      className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                      placeholder="Adrenalina, Amiodarona..."
                    />
                  ))}
                </div>
                <p className="text-xs text-muted-foreground mt-2">
                  Referencias a fármacos. Las dosis detalladas se añaden en el tab "Dosis".
                </p>
              </div>
            </div>
          )}

          {/* Tab: Dosis */}
          {activeTab === 'doses' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Dosis Inline</h2>
                <button
                  onClick={addDose}
                  className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm"
                >
                  <Plus className="w-4 h-4" />
                  Añadir Dosis
                </button>
              </div>

              <div className="space-y-4">
                {protocol.content?.dosisInline?.map((dose, index) => (
                  <div
                    key={index}
                    className="bg-muted/50 border border-border rounded-lg p-4 space-y-3"
                  >
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Fármaco</label>
                        <input
                          type="text"
                          value={dose.drugName}
                          onChange={(e) => updateDose(index, { drugName: e.target.value })}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                          placeholder="Adrenalina"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Vía</label>
                        <select
                          value={dose.route}
                          onChange={(e) => updateDose(index, { route: e.target.value as any })}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        >
                          <option value="IV">IV</option>
                          <option value="IM">IM</option>
                          <option value="IO">IO</option>
                          <option value="SC">SC</option>
                          <option value="Nebulizado">Nebulizado</option>
                        </select>
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs text-muted-foreground mb-1">Dosis Adulto</label>
                      <input
                        type="text"
                        value={dose.adultDose}
                        onChange={(e) => updateDose(index, { adultDose: e.target.value })}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        placeholder="1 mg IV cada 3-5 min"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-muted-foreground mb-1">Contexto</label>
                      <input
                        type="text"
                        value={dose.context || ''}
                        onChange={(e) => updateDose(index, { context: e.target.value })}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        placeholder="En PCR, una vez establecida vía IV/IO"
                      />
                    </div>
                    <button
                      onClick={() => removeDose(index)}
                      className="w-full px-3 py-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors text-sm"
                    >
                      <Trash2 className="w-4 h-4 inline mr-1" />
                      Eliminar
                    </button>
                  </div>
                ))}

                {(!protocol.content?.dosisInline || protocol.content.dosisInline.length === 0) && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No hay dosis. Haz clic en "Añadir Dosis" para comenzar.</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Tab: Checklist */}
          {activeTab === 'checklist' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Checklist Integrado</h2>
              </div>

              <div className="space-y-4">
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={protocol.content?.checklist?.enabled || false}
                    onChange={(e) =>
                      setProtocol({
                        ...protocol,
                        content: {
                          ...protocol.content!,
                          checklist: {
                            ...protocol.content?.checklist,
                            enabled: e.target.checked,
                            items: protocol.content?.checklist?.items || [],
                            title: protocol.content?.checklist?.title || 'Checklist',
                          } as any,
                        },
                      })
                    }
                    className="rounded"
                  />
                  <span className="text-foreground font-medium">Habilitar checklist integrado</span>
                </label>

                {protocol.content?.checklist?.enabled && (
                  <div className="space-y-4 pl-6 border-l-2 border-primary">
                    <div>
                      <label className="block text-sm font-medium mb-1">Título del Checklist</label>
                      <input
                        type="text"
                        value={protocol.content.checklist.title || ''}
                        onChange={(e) =>
                          setProtocol({
                            ...protocol,
                            content: {
                              ...protocol.content!,
                              checklist: {
                                ...protocol.content?.checklist,
                                title: e.target.value,
                                items: protocol.content?.checklist?.items || [],
                              } as any,
                            },
                          })
                        }
                        className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="Checklist RCP SVB"
                      />
                    </div>

                    <div>
                      <p className="text-sm text-muted-foreground mb-4">
                        Los items del checklist se pueden crear desde el editor de checklists reutilizables
                        y luego referenciarlos aquí, o crear items específicos para este protocolo.
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Funcionalidad completa de gestión de items pendiente de implementación.
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Tab: Herramientas */}
          {activeTab === 'tools' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Herramientas de Contexto</h2>
                <button
                  onClick={() => {
                    const newTool: ProtocolContextTool = {
                      id: `tool-${Date.now()}`,
                      name: '',
                      type: 'calculator',
                    };
                    setProtocol({
                      ...protocol,
                      content: {
                        ...protocol.content!,
                        herramientasContexto: [
                          ...(protocol.content?.herramientasContexto || []),
                          newTool,
                        ],
                      },
                    });
                  }}
                  className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm"
                >
                  <Plus className="w-4 h-4" />
                  Añadir Herramienta
                </button>
              </div>

              <div className="space-y-4">
                {protocol.content?.herramientasContexto?.map((tool, index) => (
                  <div
                    key={tool.id}
                    className="bg-muted/50 border border-border rounded-lg p-4 space-y-3"
                  >
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Nombre</label>
                        <input
                          type="text"
                          value={tool.name}
                          onChange={(e) => {
                            const tools = [...(protocol.content?.herramientasContexto || [])];
                            tools[index] = { ...tools[index], name: e.target.value };
                            setProtocol({
                              ...protocol,
                              content: {
                                ...protocol.content!,
                                herramientasContexto: tools,
                              },
                            });
                          }}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                          placeholder="Calculadora de Dosis Pediátrica"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Tipo</label>
                        <select
                          value={tool.type}
                          onChange={(e) => {
                            const tools = [...(protocol.content?.herramientasContexto || [])];
                            tools[index] = { ...tools[index], type: e.target.value as any };
                            setProtocol({
                              ...protocol,
                              content: {
                                ...protocol.content!,
                                herramientasContexto: tools,
                              },
                            });
                          }}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        >
                          <option value="calculator">Calculadora</option>
                          <option value="algorithm">Algoritmo</option>
                          <option value="reference">Referencia</option>
                          <option value="checklist">Checklist</option>
                        </select>
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs text-muted-foreground mb-1">Descripción</label>
                      <input
                        type="text"
                        value={tool.description || ''}
                        onChange={(e) => {
                          const tools = [...(protocol.content?.herramientasContexto || [])];
                          tools[index] = { ...tools[index], description: e.target.value };
                          setProtocol({
                            ...protocol,
                            content: {
                              ...protocol.content!,
                              herramientasContexto: tools,
                            },
                          });
                        }}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        placeholder="Calcula dosis por peso para pacientes pediátricos"
                      />
                    </div>
                    <button
                      onClick={() => {
                        const tools = protocol.content?.herramientasContexto?.filter(
                          (_, i) => i !== index
                        ) || [];
                        setProtocol({
                          ...protocol,
                          content: {
                            ...protocol.content!,
                            herramientasContexto: tools,
                          },
                        });
                      }}
                      className="w-full px-3 py-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors text-sm"
                    >
                      <Trash2 className="w-4 h-4 inline mr-1" />
                      Eliminar
                    </button>
                  </div>
                ))}

                {(!protocol.content?.herramientasContexto ||
                  protocol.content.herramientasContexto.length === 0) && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No hay herramientas. Haz clic en "Añadir Herramienta" para comenzar.</p>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Tab: Recursos */}
          {activeTab === 'resources' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Recursos Multimedia</h2>
                <button
                  onClick={() => setShowResourceSelector(true)}
                  className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm"
                >
                  <Plus className="w-4 h-4" />
                  Asociar Recurso
                </button>
              </div>

              <ResourcesManager
                contentId={id || ''}
                resources={associatedResources}
                onResourcesChange={setAssociatedResources}
                showSelector={showResourceSelector}
                onCloseSelector={() => setShowResourceSelector(false)}
              />
            </div>
          )}

          {/* Tab: Fuentes */}
          {activeTab === 'sources' && (
            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold text-foreground">Fuentes Clínicas</h2>
                <button
                  onClick={addSource}
                  className="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm"
                >
                  <Plus className="w-4 h-4" />
                  Añadir Fuente
                </button>
              </div>

              <div className="space-y-4">
                {protocol.content?.fuentes?.map((source, index) => (
                  <div
                    key={index}
                    className="bg-muted/50 border border-border rounded-lg p-4 space-y-3"
                  >
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Organización</label>
                        <input
                          type="text"
                          value={source.organization}
                          onChange={(e) => updateSource(index, { organization: e.target.value })}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                          placeholder="ERC"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-muted-foreground mb-1">Año</label>
                        <input
                          type="number"
                          value={source.year}
                          onChange={(e) => updateSource(index, { year: parseInt(e.target.value) || new Date().getFullYear() })}
                          className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs text-muted-foreground mb-1">Guía</label>
                      <input
                        type="text"
                        value={source.guideline}
                        onChange={(e) => updateSource(index, { guideline: e.target.value })}
                        className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                        placeholder="European Resuscitation Council Guidelines 2021"
                      />
                    </div>
                    <button
                      onClick={() => removeSource(index)}
                      className="w-full px-3 py-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors text-sm"
                    >
                      <Trash2 className="w-4 h-4 inline mr-1" />
                      Eliminar
                    </button>
                  </div>
                ))}

                {(!protocol.content?.fuentes || protocol.content.fuentes.length === 0) && (
                  <div className="text-center py-8 text-muted-foreground">
                    <p>No hay fuentes. Haz clic en "Añadir Fuente" para comenzar.</p>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Vista Previa "Modo TES" */}
        {showPreview && (
          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
            <h2 className="text-xl font-semibold text-foreground">Vista Previa - Modo TES</h2>

            <div className="space-y-4">
              {/* Header */}
              <div>
                <h3 className="text-2xl font-bold text-foreground mb-2">
                  {protocol.title || 'Título del Protocolo'}
                </h3>
                {protocol.shortTitle && (
                  <p className="text-muted-foreground">{protocol.shortTitle}</p>
                )}
                <div className="flex gap-2 mt-2">
                  <span className="px-2 py-1 bg-red-500/20 text-red-600 dark:text-red-400 rounded text-xs font-medium">
                    {protocol.priority || 'Crítico'}
                  </span>
                  <span className="px-2 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded text-xs font-medium">
                    {protocol.ageGroup || 'Adulto'}
                  </span>
                </div>
              </div>

              {/* Pasos */}
              {protocol.content?.pasosRapidos && protocol.content.pasosRapidos.length > 0 && (
                <div>
                  <h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
                    <AlertCircle className="w-4 h-4 text-yellow-500" />
                    Pasos del Protocolo
                  </h4>
                  <ol className="space-y-2 list-decimal list-inside">
                    {protocol.content.pasosRapidos.map((step) => (
                      <li
                        key={step.order}
                        className={`text-foreground pl-2 ${
                          step.critical ? 'font-semibold text-red-600 dark:text-red-400' : ''
                        }`}
                      >
                        {step.text || 'Paso sin texto'}
                        {step.timeEstimate && (
                          <span className="text-xs text-muted-foreground ml-2">
                            ({step.timeEstimate})
                          </span>
                        )}
                      </li>
                    ))}
                  </ol>
                </div>
              )}

              {/* Dosis Inline */}
              {protocol.content?.dosisInline && protocol.content.dosisInline.length > 0 && (
                <div className="pt-4 border-t border-border">
                  <h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
                    <Pill className="w-4 h-4 text-primary" />
                    Dosis de Fármacos
                  </h4>
                  <div className="space-y-2">
                    {protocol.content.dosisInline.map((dose, index) => (
                      <div key={index} className="bg-muted/50 rounded-lg p-3">
                        <div className="font-medium text-foreground">{dose.drugName || 'Fármaco'}</div>
                        <div className="text-sm text-muted-foreground">
                          {dose.adultDose} ({dose.route})
                        </div>
                        {dose.context && (
                          <div className="text-xs text-muted-foreground mt-1">{dose.context}</div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Fuentes */}
              {protocol.content?.fuentes && protocol.content.fuentes.length > 0 && (
                <div className="pt-4 border-t border-border">
                  <h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
                    <BookOpen className="w-4 h-4" />
                    Fuentes Clínicas
                  </h4>
                  <div className="space-y-1 text-sm text-muted-foreground">
                    {protocol.content.fuentes.map((source, index) => (
                      <div key={index}>
                        {source.organization} - {source.guideline} ({source.year})
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Warnings */}
              {protocol.content?.warnings && protocol.content.warnings.length > 0 && (
                <div className="pt-4 border-t border-border">
                  <h4 className="font-semibold text-foreground mb-3">Advertencias</h4>
                  <ul className="space-y-1">
                    {protocol.content.warnings.map((warning, index) => (
                      <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
                        <span className="text-orange-500 mt-1">•</span>
                        <span>{warning}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Key Points */}
              {protocol.content?.keyPoints && protocol.content.keyPoints.length > 0 && (
                <div className="pt-4 border-t border-border">
                  <h4 className="font-semibold text-foreground mb-3">Puntos Clave</h4>
                  <ul className="space-y-1">
                    {protocol.content.keyPoints.map((point, index) => (
                      <li key={index} className="text-sm text-muted-foreground flex items-start gap-2">
                        <span className="text-primary mt-1">✓</span>
                        <span>{point}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Equipment */}
              {protocol.content?.equipment && protocol.content.equipment.length > 0 && (
                <div className="pt-4 border-t border-border">
                  <h4 className="font-semibold text-foreground mb-3">Equipamiento</h4>
                  <div className="flex flex-wrap gap-2">
                    {protocol.content.equipment.map((item, index) => (
                      <span
                        key={index}
                        className="px-3 py-1 bg-muted rounded-full text-sm text-foreground"
                      >
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {/* Herramientas de Contexto */}
              {protocol.content?.herramientasContexto &&
                protocol.content.herramientasContexto.length > 0 && (
                  <div className="pt-4 border-t border-border">
                    <h4 className="font-semibold text-foreground mb-3 flex items-center gap-2">
                      <Calculator className="w-4 h-4" />
                      Herramientas de Contexto
                    </h4>
                    <div className="space-y-2">
                      {protocol.content.herramientasContexto.map((tool, index) => (
                        <div key={tool.id} className="bg-muted/50 rounded-lg p-3">
                          <div className="font-medium text-foreground">{tool.name || 'Herramienta'}</div>
                          {tool.description && (
                            <div className="text-sm text-muted-foreground mt-1">{tool.description}</div>
                          )}
                          <span className="text-xs text-muted-foreground mt-1 inline-block">
                            Tipo: {tool.type}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}