/**
 * Editor de Fármaco (Vademécum TES)
 * 
 * Editor completo para crear/editar fármacos
 * Basado en: docs/VADEMECUM_COMPLETO_TES.md
 */

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Save, X, Send, CheckCircle, Plus, Trash2 } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';

interface DrugFormData {
  generic_name: string;
  trade_name?: string;
  category: string;
  line: 'first' | 'second';
  frequency: 'high' | 'medium' | 'low';
  presentation: string;
  adult_dose: string;
  pediatric_dose?: string;
  routes: string[];
  dilution?: string;
  indications: string[];
  contraindications: string[];
  side_effects?: string;
  antidote?: string;
  notes: string[];
  critical_points: string[];
  source?: string;
  status: 'draft' | 'in_review' | 'approved' | 'published' | 'archived';
}

const ROUTES_OPTIONS = ['IV', 'IO', 'IM', 'Subcutánea', 'Oral', 'Rectal', 'Intranasal', 'Nebulización', 'MDI'];
const CATEGORIES = [
  'cardiovascular',
  'respiratorio',
  'neurologico',
  'analgesico',
  'fluidos',
  'antidoto',
  'hemostatico',
  'diuretico',
  'corticosteroide',
  'antiepileptico',
  'anestesico',
  'metabolico',
  'antiagregante',
];

export default function DrugEditorPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const isNew = id === 'new';

  const [isLoading, setIsLoading] = useState(!isNew);
  const [isSaving, setIsSaving] = useState(false);
  const [formData, setFormData] = useState<DrugFormData>({
    generic_name: '',
    trade_name: '',
    category: 'cardiovascular',
    line: 'first',
    frequency: 'high',
    presentation: '',
    adult_dose: '',
    pediatric_dose: '',
    routes: [],
    dilution: '',
    indications: [],
    contraindications: [],
    side_effects: '',
    antidote: '',
    notes: [],
    critical_points: [],
    source: '',
    status: 'draft',
  });

  // Cargar fármaco si es edición
  useEffect(() => {
    if (!isNew && id) {
      loadDrug(id);
    }
  }, [id, isNew]);

  const loadDrug = async (drugId: string) => {
    setIsLoading(true);
    try {
      const token = localStorage.getItem('admin_token');
      const response = await fetch(`${API_URL}/api/drugs/${drugId}`, {
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      });

      if (response.ok) {
        const drug = await response.json();
        setFormData({
          generic_name: drug.generic_name || '',
          trade_name: drug.trade_name || '',
          category: drug.category || 'cardiovascular',
          line: drug.line || 'first',
          frequency: drug.frequency || 'high',
          presentation: drug.presentation || '',
          adult_dose: drug.adult_dose || '',
          pediatric_dose: drug.pediatric_dose || '',
          routes: drug.routes || [],
          dilution: drug.dilution || '',
          indications: drug.indications || [],
          contraindications: drug.contraindications || [],
          side_effects: drug.side_effects || '',
          antidote: drug.antidote || '',
          notes: drug.notes || [],
          critical_points: drug.critical_points || [],
          source: drug.source || '',
          status: drug.status || 'draft',
        });
      } else {
        alert('Error cargando fármaco');
        navigate('/drugs');
      }
    } catch (error) {
      console.error('Error cargando fármaco:', error);
      alert('Error cargando fármaco');
    } finally {
      setIsLoading(false);
    }
  };

  const handleSave = async () => {
    setIsSaving(true);
    try {
      const token = localStorage.getItem('admin_token');
      const url = isNew ? `${API_URL}/api/drugs` : `${API_URL}/api/drugs/${id}`;
      const method = isNew ? 'POST' : 'PUT';

      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        const data = await response.json();
        if (isNew) {
          navigate(`/drugs/${data.drug.id}/edit`);
        } else {
          alert('Fármaco guardado correctamente');
        }
      } else {
        const error = await response.json();
        alert(`Error: ${error.error || 'Error al guardar'}\n${error.details?.join('\n') || ''}`);
      }
    } catch (error) {
      console.error('Error guardando fármaco:', error);
      alert('Error al guardar fármaco');
    } finally {
      setIsSaving(false);
    }
  };

  const handleSubmit = async () => {
    if (!confirm('¿Enviar este fármaco a revisión?')) return;

    try {
      const token = localStorage.getItem('admin_token');
      const response = await fetch(`${API_URL}/api/drugs/${id}/submit`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
      });

      if (response.ok) {
        alert('Fármaco enviado a revisión');
        navigate('/drugs');
      } else {
        const error = await response.json();
        alert(`Error: ${error.error || 'Error al enviar a revisión'}`);
      }
    } catch (error) {
      console.error('Error enviando a revisión:', error);
      alert('Error al enviar a revisión');
    }
  };

  const addArrayItem = (field: 'routes' | 'indications' | 'contraindications' | 'notes' | 'critical_points') => {
    setFormData(prev => ({
      ...prev,
      [field]: [...prev[field], ''],
    }));
  };

  const updateArrayItem = (
    field: 'routes' | 'indications' | 'contraindications' | 'notes' | 'critical_points',
    index: number,
    value: string
  ) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].map((item, i) => i === index ? value : item),
    }));
  };

  const removeArrayItem = (
    field: 'routes' | 'indications' | 'contraindications' | 'notes' | 'critical_points',
    index: number
  ) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].filter((_, i) => i !== index),
    }));
  };

  if (isLoading) {
    return <div className="p-6">Cargando fármaco...</div>;
  }

  return (
    <div className="p-6 space-y-6 max-w-5xl mx-auto">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">
            {isNew ? 'Nuevo Fármaco' : `Editar: ${formData.generic_name}`}
          </h1>
          <p className="text-muted-foreground mt-1">
            {isNew ? 'Crear nuevo fármaco en el vademécum' : 'Editar información del fármaco'}
          </p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => navigate('/drugs')}
            className="px-4 py-2 bg-background border border-border rounded-lg hover:bg-muted transition-colors flex items-center gap-2"
          >
            <X className="w-4 h-4" />
            Cancelar
          </button>
          {!isNew && hasPermission('content:submit') && formData.status === 'draft' && (
            <button
              onClick={handleSubmit}
              className="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors flex items-center gap-2"
            >
              <Send className="w-4 h-4" />
              Enviar a Revisión
            </button>
          )}
          {!isNew && hasPermission('validation:approve') && formData.status === 'in_review' && (
            <button
              onClick={async () => {
                if (!confirm('¿Aprobar este fármaco?')) return;
                try {
                  const token = localStorage.getItem('admin_token');
                  const response = await fetch(`${API_URL}/api/drugs/${id}/approve`, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'Authorization': `Bearer ${token}`,
                    },
                    body: JSON.stringify({ notes: '' }),
                  });
                  if (response.ok) {
                    alert('Fármaco aprobado');
                    navigate('/drugs');
                  } else {
                    const error = await response.json();
                    alert(`Error: ${error.error || 'Error al aprobar'}`);
                  }
                } catch (error) {
                  console.error('Error aprobando fármaco:', error);
                  alert('Error al aprobar fármaco');
                }
              }}
              className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center gap-2"
            >
              <CheckCircle className="w-4 h-4" />
              Aprobar
            </button>
          )}
          {!isNew && hasPermission('content:publish') && formData.status === 'approved' && (
            <button
              onClick={async () => {
                if (!confirm('¿Publicar este fármaco? (Requiere pediatric_dose)')) return;
                try {
                  const token = localStorage.getItem('admin_token');
                  const response = await fetch(`${API_URL}/api/drugs/${id}/publish`, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      'Authorization': `Bearer ${token}`,
                    },
                  });
                  if (response.ok) {
                    alert('Fármaco publicado');
                    navigate('/drugs');
                  } else {
                    const error = await response.json();
                    alert(`Error: ${error.error || 'Error al publicar'}`);
                  }
                } catch (error) {
                  console.error('Error publicando fármaco:', error);
                  alert('Error al publicar fármaco');
                }
              }}
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2"
            >
              <CheckCircle className="w-4 h-4" />
              Publicar
            </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>

      {/* Información Básica */}
      <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 className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Nombre Genérico <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={formData.generic_name}
              onChange={(e) => setFormData(prev => ({ ...prev, generic_name: 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"
              placeholder="Ej: Adrenalina"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">Nombre Comercial</label>
            <input
              type="text"
              value={formData.trade_name}
              onChange={(e) => setFormData(prev => ({ ...prev, trade_name: 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"
              placeholder="Ej: Adrenalina 1mg/1ml"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Categoría <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.category}
              onChange={(e) => setFormData(prev => ({ ...prev, category: 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"
            >
              {CATEGORIES.map(cat => (
                <option key={cat} value={cat}>{cat}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Línea <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.line}
              onChange={(e) => setFormData(prev => ({ ...prev, line: e.target.value as 'first' | 'second' }))}
              className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="first">Primera línea</option>
              <option value="second">Segunda línea</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Frecuencia <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.frequency}
              onChange={(e) => setFormData(prev => ({ ...prev, frequency: e.target.value as 'high' | 'medium' | 'low' }))}
              className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="high">Alta</option>
              <option value="medium">Media</option>
              <option value="low">Baja</option>
            </select>
          </div>
        </div>
      </div>

      {/* Presentación y Dosificación */}
      <div className="bg-card border border-border rounded-xl p-6 space-y-4">
        <h2 className="text-xl font-semibold text-foreground">Presentación y Dosificación</h2>
        
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">
            Presentación <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={formData.presentation}
            onChange={(e) => setFormData(prev => ({ ...prev, presentation: 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"
            placeholder="Ej: 1mg/1ml ampolla"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Dosis Adulto <span className="text-red-500">*</span>
            </label>
            <textarea
              value={formData.adult_dose}
              onChange={(e) => setFormData(prev => ({ ...prev, adult_dose: 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"
              rows={2}
              placeholder="Ej: 1mg IV/IO cada 3-5 min"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              Dosis Pediátrica {formData.status === 'published' && <span className="text-red-500">*</span>}
            </label>
            <textarea
              value={formData.pediatric_dose}
              onChange={(e) => setFormData(prev => ({ ...prev, pediatric_dose: 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"
              rows={2}
              placeholder="Ej: 0.01mg/kg IV/IO"
            />
            {formData.status === 'published' && !formData.pediatric_dose && (
              <p className="text-xs text-red-500 mt-1">Obligatorio para publicar</p>
            )}
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-foreground mb-1">Vías de Administración</label>
          <div className="flex flex-wrap gap-2">
            {ROUTES_OPTIONS.map(route => (
              <label key={route} className="flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg cursor-pointer hover:bg-muted">
                <input
                  type="checkbox"
                  checked={formData.routes.includes(route)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setFormData(prev => ({ ...prev, routes: [...prev.routes, route] }));
                    } else {
                      setFormData(prev => ({ ...prev, routes: prev.routes.filter(r => r !== route) }));
                    }
                  }}
                  className="rounded"
                />
                <span className="text-sm">{route}</span>
              </label>
            ))}
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-foreground mb-1">Dilución</label>
          <input
            type="text"
            value={formData.dilution}
            onChange={(e) => setFormData(prev => ({ ...prev, dilution: 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"
            placeholder="Ej: Diluir en 20ml SF 0.9%"
          />
        </div>
      </div>

      {/* Indicaciones y Contraindicaciones */}
      <div className="bg-card border border-border rounded-xl p-6 space-y-4">
        <h2 className="text-xl font-semibold text-foreground">Indicaciones y Contraindicaciones</h2>
        
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-foreground">Indicaciones</label>
            <button
              onClick={() => addArrayItem('indications')}
              className="p-1 text-primary hover:bg-primary/10 rounded"
            >
              <Plus className="w-4 h-4" />
            </button>
          </div>
          {formData.indications.map((indication, index) => (
            <div key={index} className="flex gap-2 mb-2">
              <input
                type="text"
                value={indication}
                onChange={(e) => updateArrayItem('indications', index, e.target.value)}
                className="flex-1 px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Ej: Parada cardiorrespiratoria (RCP)"
              />
              <button
                onClick={() => removeArrayItem('indications', index)}
                className="p-2 text-red-500 hover:bg-red-500/10 rounded"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-foreground">Contraindicaciones</label>
            <button
              onClick={() => addArrayItem('contraindications')}
              className="p-1 text-primary hover:bg-primary/10 rounded"
            >
              <Plus className="w-4 h-4" />
            </button>
          </div>
          {formData.contraindications.map((contraindication, index) => (
            <div key={index} className="flex gap-2 mb-2">
              <input
                type="text"
                value={contraindication}
                onChange={(e) => updateArrayItem('contraindications', index, e.target.value)}
                className="flex-1 px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Ej: Hipertensión arterial severa"
              />
              <button
                onClick={() => removeArrayItem('contraindications', index)}
                className="p-2 text-red-500 hover:bg-red-500/10 rounded"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>

        <div>
          <label className="block text-sm font-medium text-foreground mb-1">Efectos Adversos</label>
          <textarea
            value={formData.side_effects}
            onChange={(e) => setFormData(prev => ({ ...prev, side_effects: 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"
            rows={3}
            placeholder="Ej: Taquicardia, hipertensión, arritmias..."
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-foreground mb-1">Antídoto</label>
          <input
            type="text"
            value={formData.antidote}
            onChange={(e) => setFormData(prev => ({ ...prev, antidote: 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"
            placeholder="Ej: Naloxona (para opioides)"
          />
        </div>
      </div>

      {/* Información Específica TES */}
      <div className="bg-card border border-border rounded-xl p-6 space-y-4">
        <h2 className="text-xl font-semibold text-foreground">Información Específica TES</h2>
        
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-foreground">Notas</label>
            <button
              onClick={() => addArrayItem('notes')}
              className="p-1 text-primary hover:bg-primary/10 rounded"
            >
              <Plus className="w-4 h-4" />
            </button>
          </div>
          {formData.notes.map((note, index) => (
            <div key={index} className="flex gap-2 mb-2">
              <textarea
                value={note}
                onChange={(e) => updateArrayItem('notes', index, e.target.value)}
                className="flex-1 px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                rows={2}
                placeholder="Ej: En RCP, administrar cada 3-5 minutos"
              />
              <button
                onClick={() => removeArrayItem('notes', index)}
                className="p-2 text-red-500 hover:bg-red-500/10 rounded"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-foreground">Puntos Críticos TES</label>
            <button
              onClick={() => addArrayItem('critical_points')}
              className="p-1 text-primary hover:bg-primary/10 rounded"
            >
              <Plus className="w-4 h-4" />
            </button>
          </div>
          {formData.critical_points.map((point, index) => (
            <div key={index} className="flex gap-2 mb-2">
              <textarea
                value={point}
                onChange={(e) => updateArrayItem('critical_points', index, e.target.value)}
                className="flex-1 px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                rows={2}
                placeholder="Ej: Verificar dosis según peso en pediatría"
              />
              <button
                onClick={() => removeArrayItem('critical_points', index)}
                className="p-2 text-red-500 hover:bg-red-500/10 rounded"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>

        <div>
          <label className="block text-sm font-medium text-foreground mb-1">Fuente</label>
          <input
            type="text"
            value={formData.source}
            onChange={(e) => setFormData(prev => ({ ...prev, source: 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"
            placeholder="Ej: Manual TES Digital, ERC 2021"
          />
        </div>
      </div>
    </div>
  );
}