"use client";

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { X, Save, AlertCircle } from 'lucide-react';
import RichTextEditor from './RichTextEditor';

interface StatusData {
  status_top_text: string;
  status_middle_text: string;
  status_bottom_text: string;
  status_top_color: string;
  status_middle_color: string;
  status_bottom_color: string;
  status_top_description?: string;
  status_middle_description?: string;
  status_bottom_description?: string;
}

interface StatusEditModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (data: StatusData) => Promise<void>;
  initialData?: Partial<StatusData>;
}

const AVAILABLE_COLORS = [
  { value: 'emerald', label: 'Vert (Emerald)', class: 'bg-emerald-500' },
  { value: 'red', label: 'Rouge (Red)', class: 'bg-red-500' },
  { value: 'yellow', label: 'Jaune (Yellow)', class: 'bg-yellow-500' },
  { value: 'orange', label: 'Orange', class: 'bg-orange-500' },
  { value: 'sky', label: 'Bleu ciel (Sky)', class: 'bg-sky-500' },
  { value: 'blue', label: 'Bleu (Blue)', class: 'bg-blue-500' },
  { value: 'purple', label: 'Violet (Purple)', class: 'bg-purple-500' },
  { value: 'pink', label: 'Rose (Pink)', class: 'bg-pink-500' },
  { value: 'gray', label: 'Gris (Gray)', class: 'bg-gray-500' }
];

export default function StatusEditModal({ 
  isOpen, 
  onClose, 
  onSave, 
  initialData 
}: StatusEditModalProps) {
  const [formData, setFormData] = useState<StatusData>({
    status_top_text: '',
    status_middle_text: '',
    status_bottom_text: '',
    status_top_color: 'emerald',
    status_middle_color: 'blue',
    status_bottom_color: 'sky',
    status_top_description: '',
    status_middle_description: '',
    status_bottom_description: ''
  });
  
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'top' | 'middle' | 'bottom'>('top');
  const [mounted, setMounted] = useState(false);

  // S'assurer que le composant est monté côté client
  useEffect(() => {
    setMounted(true);
  }, []);

  // Initialiser le formulaire avec les données reçues
  useEffect(() => {
    if (initialData) {
      setFormData({
        status_top_text: initialData.status_top_text || '',
        status_middle_text: initialData.status_middle_text || '',
        status_bottom_text: initialData.status_bottom_text || '',
        status_top_color: initialData.status_top_color || 'emerald',
        status_middle_color: initialData.status_middle_color || 'blue',
        status_bottom_color: initialData.status_bottom_color || 'sky',
        status_top_description: initialData.status_top_description || '',
        status_middle_description: initialData.status_middle_description || '',
        status_bottom_description: initialData.status_bottom_description || ''
      });
    }
  }, [initialData]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);

    try {
      await onSave(formData);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Une erreur est survenue');
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (field: keyof StatusData, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const getColorPreview = (color: string) => {
    const colorInfo = AVAILABLE_COLORS.find(c => c.value === color);
    return colorInfo?.class || 'bg-gray-500';
  };

  if (!isOpen || !mounted) return null;

  const modalContent = (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b">
          <h2 className="text-xl font-semibold text-slate-900">
            Modifier les statuts du header
          </h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
            disabled={isLoading}
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <form onSubmit={handleSubmit} className="flex flex-col h-full">
          {error && (
            <div className="flex items-center gap-2 p-3 mx-6 mt-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
              <AlertCircle className="w-5 h-5 flex-shrink-0" />
              <span className="text-sm">{error}</span>
            </div>
          )}

          {/* Preview */}
          <div className="p-6 space-y-3">
            <h3 className="font-medium text-slate-900">Aperçu</h3>
            <div className="border rounded-lg p-4 bg-slate-50">
              <div className="grid grid-rows-3 rounded-lg border bg-white overflow-hidden">
                <div className="px-3 py-2 text-sm flex items-center gap-2 border-b border-slate-200">
                  <span 
                    className={`inline-block w-2.5 h-2.5 rounded-full ${getColorPreview(formData.status_top_color)} ring-2 ring-white/70`} 
                  />
                  <span className="text-slate-700 truncate">
                    {formData.status_top_text && `Services Odentas : ${formData.status_top_text}`}
                  </span>
                </div>
                <div className="px-3 py-2 text-sm flex items-center gap-2 border-b border-slate-200">
                  <span 
                    className={`inline-block w-2.5 h-2.5 rounded-full ${getColorPreview(formData.status_middle_color)} ring-2 ring-white/70`} 
                  />
                  <span className="text-slate-700 truncate">
                    {formData.status_middle_text && `Caisses & orga. : ${formData.status_middle_text}`}
                  </span>
                </div>
                <div className="px-3 py-2 text-sm flex items-center gap-2">
                  <span 
                    className={`inline-block w-2.5 h-2.5 rounded-full ${getColorPreview(formData.status_bottom_color)} ring-2 ring-white/70`} 
                  />
                  <span className="text-slate-700 truncate">
                    {formData.status_bottom_text && `Actus : ${formData.status_bottom_text}`}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div className="px-6">
            <div className="flex border-b border-slate-200">
              <button
                type="button"
                onClick={() => setActiveTab('top')}
                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === 'top'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                Services Odentas
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('middle')}
                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === 'middle'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                Caisses & orga.
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('bottom')}
                className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === 'bottom'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                Actus
              </button>
            </div>
          </div>

          {/* Tab Content */}
          <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
            {activeTab === 'top' && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Titre (Services Odentas)
                  </label>
                  <input
                    type="text"
                    value={formData.status_top_text || ''}
                    onChange={(e) => handleInputChange('status_top_text', e.target.value)}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-white text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Ex: Aucun incident à signaler"
                    maxLength={200}
                    required
                  />
                  <p className="text-xs text-slate-500">
                    {(formData.status_top_text || '').length}/200 caractères - Affiché dans la card du header
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Description détaillée (affichée au survol)
                  </label>
                  <RichTextEditor
                    value={formData.status_top_description || ''}
                    onChange={(value) => handleInputChange('status_top_description', value)}
                    placeholder="Ajoutez des détails, des liens, etc. Supporte le markdown (gras, italique, liens, listes)."
                    maxLength={1000}
                  />
                  <p className="text-xs text-slate-500">
                    Cette description sera affichée dans le tooltip au survol de la ligne
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Couleur du voyant (Services Odentas)
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {AVAILABLE_COLORS.map((color) => (
                      <button
                        key={color.value}
                        type="button"
                        onClick={() => handleInputChange('status_top_color', color.value)}
                        className={`flex items-center gap-2 p-2 rounded-lg border text-sm transition-colors ${
                          formData.status_top_color === color.value
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-slate-300 hover:bg-slate-50'
                        }`}
                      >
                        <span className={`w-4 h-4 rounded-full ${color.class}`} />
                        <span className="text-slate-700">{color.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'middle' && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Titre (Caisses & orga.)
                  </label>
                  <input
                    type="text"
                    value={formData.status_middle_text || ''}
                    onChange={(e) => handleInputChange('status_middle_text', e.target.value)}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-white text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Ex: Tous nos services sont opérationnels"
                    maxLength={200}
                    required
                  />
                  <p className="text-xs text-slate-500">
                    {(formData.status_middle_text || '').length}/200 caractères - Affiché dans la card du header
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Description détaillée (affichée au survol)
                  </label>
                  <RichTextEditor
                    value={formData.status_middle_description || ''}
                    onChange={(value) => handleInputChange('status_middle_description', value)}
                    placeholder="Ajoutez des détails, des liens, etc. Supporte le markdown (gras, italique, liens, listes)."
                    maxLength={1000}
                  />
                  <p className="text-xs text-slate-500">
                    Cette description sera affichée dans le tooltip au survol de la ligne
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Couleur du voyant (Caisses & orga.)
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {AVAILABLE_COLORS.map((color) => (
                      <button
                        key={color.value}
                        type="button"
                        onClick={() => handleInputChange('status_middle_color', color.value)}
                        className={`flex items-center gap-2 p-2 rounded-lg border text-sm transition-colors ${
                          formData.status_middle_color === color.value
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-slate-300 hover:bg-slate-50'
                        }`}
                      >
                        <span className={`w-4 h-4 rounded-full ${color.class}`} />
                        <span className="text-slate-700">{color.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {activeTab === 'bottom' && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Titre (Actus)
                  </label>
                  <input
                    type="text"
                    value={formData.status_bottom_text || ''}
                    onChange={(e) => handleInputChange('status_bottom_text', e.target.value)}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-white text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Ex: Nous serons fermés le..."
                    maxLength={200}
                    required
                  />
                  <p className="text-xs text-slate-500">
                    {(formData.status_bottom_text || '').length}/200 caractères - Affiché dans la card du header
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Description détaillée (affichée au survol)
                  </label>
                  <RichTextEditor
                    value={formData.status_bottom_description || ''}
                    onChange={(value) => handleInputChange('status_bottom_description', value)}
                    placeholder="Ajoutez des détails, des liens, etc. Supporte le markdown (gras, italique, liens, listes)."
                    maxLength={1000}
                  />
                  <p className="text-xs text-slate-500">
                    Cette description sera affichée dans le tooltip au survol de la ligne
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-700">
                    Couleur du voyant (Actus)
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {AVAILABLE_COLORS.map((color) => (
                      <button
                        key={color.value}
                        type="button"
                        onClick={() => handleInputChange('status_bottom_color', color.value)}
                        className={`flex items-center gap-2 p-2 rounded-lg border text-sm transition-colors ${
                          formData.status_bottom_color === color.value
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-slate-300 hover:bg-slate-50'
                        }`}
                      >
                        <span className={`w-4 h-4 rounded-full ${color.class}`} />
                        <span className="text-slate-700">{color.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </form>

        {/* Footer */}
        <div className="flex justify-end gap-3 p-6 border-t">
          <button
            type="button"
            onClick={onClose}
            disabled={isLoading}
            className="px-4 py-2 text-slate-700 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
          >
            Annuler
          </button>
          <button
            type="submit"
            onClick={handleSubmit}
            disabled={isLoading}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
          >
            {isLoading ? (
              <>
                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                Sauvegarde...
              </>
            ) : (
              <>
                <Save className="w-4 h-4" />
                Sauvegarder
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );

  // Utiliser createPortal pour rendre le modal dans le body
  return createPortal(modalContent, document.body);
}