import React, { useState, useEffect } from 'react';
import {
  X,
  Upload,
  GitBranch,
  Server,
  Database,
  Globe,
  Package,
  FileText,
  CheckCircle,
  AlertCircle,
  Loader2,
  ChevronDown,
} from 'lucide-react';
import { getAvailableStacks, createApp, getGiteaRepos } from '../utils/api';

const STEPS = [
  { id: 1, title: 'Informations', icon: FileText },
  { id: 2, title: 'Source', icon: GitBranch },
  { id: 3, title: 'Stack & Options', icon: Server },
  { id: 4, title: 'Confirmation', icon: CheckCircle },
];

export default function AddAppModal({ isOpen, onClose, onSuccess }) {
  const [currentStep, setCurrentStep] = useState(1);
  const [stacks, setStacks] = useState([]);
  const [giteaRepos, setGiteaRepos] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState(null);
  const [errors, setErrors] = useState({});

  const [formData, setFormData] = useState({
    name: '',
    description: '',
    subdomain: '',
    sourceType: 'zip',
    zipFile: null,
    giteaRepoUrl: '',
    stack: 'nodejs',
    port: '',
    needsDb: false,
    dbType: 'mysql',
  });

  useEffect(() => {
    if (isOpen) {
      getAvailableStacks()
        .then((res) => setStacks(res.data))
        .catch(console.error);
      getGiteaRepos()
        .then((res) => setGiteaRepos(res.data))
        .catch(console.error);
      // Reset
      setCurrentStep(1);
      setSubmitResult(null);
      setErrors({});
      setFormData({
        name: '',
        description: '',
        subdomain: '',
        sourceType: 'zip',
        zipFile: null,
        giteaRepoUrl: '',
        stack: 'nodejs',
        port: '',
        needsDb: false,
        dbType: 'mysql',
      });
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const updateField = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    setErrors((prev) => ({ ...prev, [field]: null }));
  };

  const autoSubdomain = (name) => {
    return name
      .toLowerCase()
      .replace(/[^a-z0-9\s-]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '');
  };

  const handleNameChange = (value) => {
    updateField('name', value);
    if (!formData.subdomain || formData.subdomain === autoSubdomain(formData.name)) {
      updateField('subdomain', autoSubdomain(value));
    }
  };

  const validateStep = (step) => {
    const newErrors = {};
    if (step === 1) {
      if (!formData.name.trim()) newErrors.name = 'Le nom est requis';
      if (!formData.subdomain.trim()) newErrors.subdomain = 'Le sous-domaine est requis';
      else if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
        newErrors.subdomain = 'Lettres minuscules, chiffres et tirets uniquement';
      }
    }
    if (step === 2) {
      if (formData.sourceType === 'zip' && !formData.zipFile) {
        newErrors.zipFile = 'Un fichier ZIP est requis';
      }
      if (formData.sourceType === 'gitea' && !formData.giteaRepoUrl) {
        newErrors.giteaRepoUrl = 'Sélectionnez un dépôt Gitea';
      }
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const nextStep = () => {
    if (validateStep(currentStep)) {
      setCurrentStep((prev) => Math.min(prev + 1, 4));
    }
  };

  const prevStep = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1));
  };

  const handleSubmit = async () => {
    setIsSubmitting(true);
    setSubmitResult(null);

    try {
      const fd = new FormData();
      fd.append('name', formData.name);
      fd.append('description', formData.description);
      fd.append('subdomain', formData.subdomain);
      fd.append('stack', formData.stack);
      fd.append('sourceType', formData.sourceType);
      fd.append('needsDb', formData.needsDb.toString());
      fd.append('dbType', formData.dbType);
      if (formData.port) fd.append('port', formData.port);

      if (formData.sourceType === 'zip' && formData.zipFile) {
        fd.append('zipFile', formData.zipFile);
      }
      if (formData.sourceType === 'gitea') {
        fd.append('giteaRepoUrl', formData.giteaRepoUrl);
      }

      const res = await createApp(fd);
      setSubmitResult({ success: true, data: res.data });

      // Rafraîchir après un délai
      setTimeout(() => {
        if (onSuccess) onSuccess();
      }, 3000);
    } catch (err) {
      setSubmitResult({
        success: false,
        error: err.response?.data?.error || err.message,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const selectedStack = stacks.find((s) => s.id === formData.stack);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />

      {/* Modal */}
      <div className="relative bg-dark-800 border border-dark-600 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
          <div>
            <h2 className="text-xl font-bold text-white flex items-center gap-2">
              <Package className="w-5 h-5 text-primary-400" />
              Ajouter une application
            </h2>
            <p className="text-sm text-gray-400 mt-0.5">
              Déployez une nouvelle application sur le serveur de recette
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 text-gray-400 hover:text-white hover:bg-dark-600 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Steps indicator */}
        <div className="px-6 py-3 border-b border-dark-600 bg-dark-900/50">
          <div className="flex items-center justify-between">
            {STEPS.map((step, idx) => (
              <div key={step.id} className="flex items-center">
                <div
                  className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
                    currentStep === step.id
                      ? 'bg-primary-500/20 text-primary-400 border border-primary-500/30'
                      : currentStep > step.id
                      ? 'bg-green-500/20 text-green-400'
                      : 'text-gray-500'
                  }`}
                >
                  <step.icon className="w-4 h-4" />
                  <span className="hidden sm:inline">{step.title}</span>
                </div>
                {idx < STEPS.length - 1 && (
                  <div
                    className={`w-8 h-0.5 mx-1 ${
                      currentStep > step.id ? 'bg-green-500' : 'bg-dark-600'
                    }`}
                  />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Content */}
        <div className="px-6 py-5 overflow-y-auto max-h-[55vh]">
          {/* Step 1: Informations */}
          {currentStep === 1 && (
            <div className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1.5">
                  Nom de l'application <span className="text-red-400">*</span>
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => handleNameChange(e.target.value)}
                  placeholder="Mon Application"
                  className={`w-full px-4 py-2.5 bg-dark-700 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
                    errors.name ? 'border-red-500' : 'border-dark-500'
                  }`}
                />
                {errors.name && (
                  <p className="text-red-400 text-xs mt-1">{errors.name}</p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1.5">
                  Description
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => updateField('description', e.target.value)}
                  placeholder="Description de l'application..."
                  rows={3}
                  className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1.5">
                  Sous-domaine <span className="text-red-400">*</span>
                </label>
                <div className="flex items-center gap-0">
                  <input
                    type="text"
                    value={formData.subdomain}
                    onChange={(e) => updateField('subdomain', e.target.value.toLowerCase())}
                    placeholder="mon-app"
                    className={`flex-1 px-4 py-2.5 bg-dark-700 border rounded-l-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
                      errors.subdomain ? 'border-red-500' : 'border-dark-500'
                    }`}
                  />
                  <span className="px-3 py-2.5 bg-dark-600 border border-dark-500 border-l-0 rounded-r-lg text-gray-400 text-sm whitespace-nowrap">
                    .recette.santinova-soft.org
                  </span>
                </div>
                {errors.subdomain && (
                  <p className="text-red-400 text-xs mt-1">{errors.subdomain}</p>
                )}
                {formData.subdomain && !errors.subdomain && (
                  <p className="text-gray-500 text-xs mt-1 flex items-center gap-1">
                    <Globe className="w-3 h-3" />
                    URL: https://{formData.subdomain}.recette.santinova-soft.org
                  </p>
                )}
              </div>
            </div>
          )}

          {/* Step 2: Source */}
          {currentStep === 2 && (
            <div className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-3">
                  Source du code
                </label>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    onClick={() => updateField('sourceType', 'zip')}
                    className={`p-4 rounded-xl border-2 text-left transition-all ${
                      formData.sourceType === 'zip'
                        ? 'border-primary-500 bg-primary-500/10'
                        : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                    }`}
                  >
                    <Upload className={`w-6 h-6 mb-2 ${formData.sourceType === 'zip' ? 'text-primary-400' : 'text-gray-400'}`} />
                    <div className={`font-medium ${formData.sourceType === 'zip' ? 'text-white' : 'text-gray-300'}`}>
                      Upload ZIP
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Uploadez une archive ZIP contenant les sources
                    </div>
                  </button>

                  <button
                    onClick={() => updateField('sourceType', 'gitea')}
                    className={`p-4 rounded-xl border-2 text-left transition-all ${
                      formData.sourceType === 'gitea'
                        ? 'border-primary-500 bg-primary-500/10'
                        : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                    }`}
                  >
                    <GitBranch className={`w-6 h-6 mb-2 ${formData.sourceType === 'gitea' ? 'text-primary-400' : 'text-gray-400'}`} />
                    <div className={`font-medium ${formData.sourceType === 'gitea' ? 'text-white' : 'text-gray-300'}`}>
                      Dépôt Gitea
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Utilisez un dépôt Gitea existant
                    </div>
                  </button>
                </div>
              </div>

              {formData.sourceType === 'zip' && (
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-1.5">
                    Fichier ZIP <span className="text-red-400">*</span>
                  </label>
                  <div
                    className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
                      formData.zipFile
                        ? 'border-green-500/50 bg-green-500/5'
                        : errors.zipFile
                        ? 'border-red-500/50 bg-red-500/5'
                        : 'border-dark-500 hover:border-dark-400 bg-dark-700'
                    }`}
                  >
                    <input
                      type="file"
                      accept=".zip"
                      onChange={(e) => updateField('zipFile', e.target.files[0])}
                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                    />
                    {formData.zipFile ? (
                      <div>
                        <CheckCircle className="w-8 h-8 text-green-400 mx-auto mb-2" />
                        <p className="text-green-400 font-medium">{formData.zipFile.name}</p>
                        <p className="text-gray-500 text-sm mt-1">
                          {(formData.zipFile.size / 1024 / 1024).toFixed(2)} MB
                        </p>
                      </div>
                    ) : (
                      <div>
                        <Upload className="w-8 h-8 text-gray-500 mx-auto mb-2" />
                        <p className="text-gray-400">Cliquez ou glissez un fichier ZIP ici</p>
                        <p className="text-gray-600 text-sm mt-1">Maximum 500 MB</p>
                      </div>
                    )}
                  </div>
                  {errors.zipFile && (
                    <p className="text-red-400 text-xs mt-1">{errors.zipFile}</p>
                  )}
                </div>
              )}

              {formData.sourceType === 'gitea' && (
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-1.5">
                    Dépôt Gitea <span className="text-red-400">*</span>
                  </label>
                  <div className="space-y-2">
                    {giteaRepos.length === 0 ? (
                      <div className="p-4 bg-dark-700 rounded-lg text-center text-gray-500">
                        <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
                        Chargement des dépôts...
                      </div>
                    ) : (
                      <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                        {giteaRepos.map((repo) => (
                          <button
                            key={repo.id}
                            onClick={() => updateField('giteaRepoUrl', repo.cloneUrl)}
                            className={`w-full p-3 rounded-lg border text-left transition-all ${
                              formData.giteaRepoUrl === repo.cloneUrl
                                ? 'border-primary-500 bg-primary-500/10'
                                : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                            }`}
                          >
                            <div className="flex items-center justify-between">
                              <div>
                                <div className="font-medium text-white text-sm">{repo.name}</div>
                                {repo.description && (
                                  <div className="text-xs text-gray-500 mt-0.5">{repo.description}</div>
                                )}
                              </div>
                              {repo.language && (
                                <span className="text-xs px-2 py-0.5 bg-dark-600 rounded text-gray-400">
                                  {repo.language}
                                </span>
                              )}
                            </div>
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                  {errors.giteaRepoUrl && (
                    <p className="text-red-400 text-xs mt-1">{errors.giteaRepoUrl}</p>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Step 3: Stack & Options */}
          {currentStep === 3 && (
            <div className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-3">
                  Type de stack <span className="text-red-400">*</span>
                </label>
                <div className="grid grid-cols-3 gap-2">
                  {stacks.map((s) => (
                    <button
                      key={s.id}
                      onClick={() => updateField('stack', s.id)}
                      className={`p-3 rounded-lg border text-center transition-all ${
                        formData.stack === s.id
                          ? 'border-primary-500 bg-primary-500/10'
                          : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                      }`}
                    >
                      <div className={`text-sm font-medium ${formData.stack === s.id ? 'text-white' : 'text-gray-300'}`}>
                        {s.name}
                      </div>
                    </button>
                  ))}
                </div>
                {selectedStack && (
                  <p className="text-gray-500 text-xs mt-2">{selectedStack.description}</p>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-300 mb-1.5">
                  Port de l'application (optionnel)
                </label>
                <input
                  type="number"
                  value={formData.port}
                  onChange={(e) => updateField('port', e.target.value)}
                  placeholder="Auto-détecté selon la stack"
                  className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                />
              </div>

              <div className="border border-dark-500 rounded-xl p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Database className={`w-5 h-5 ${formData.needsDb ? 'text-primary-400' : 'text-gray-500'}`} />
                    <div>
                      <div className="text-sm font-medium text-white">Base de données</div>
                      <div className="text-xs text-gray-500">Ajouter un conteneur de base de données</div>
                    </div>
                  </div>
                  <button
                    onClick={() => updateField('needsDb', !formData.needsDb)}
                    className={`relative w-12 h-6 rounded-full transition-colors ${
                      formData.needsDb ? 'bg-primary-500' : 'bg-dark-600'
                    }`}
                  >
                    <span
                      className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
                        formData.needsDb ? 'translate-x-6' : 'translate-x-0.5'
                      }`}
                    />
                  </button>
                </div>

                {formData.needsDb && (
                  <div className="mt-4 pt-4 border-t border-dark-500">
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      Type de base de données
                    </label>
                    <div className="grid grid-cols-2 gap-2">
                      <button
                        onClick={() => updateField('dbType', 'mysql')}
                        className={`p-3 rounded-lg border text-center transition-all ${
                          formData.dbType === 'mysql'
                            ? 'border-primary-500 bg-primary-500/10'
                            : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                        }`}
                      >
                        <div className={`text-sm font-medium ${formData.dbType === 'mysql' ? 'text-white' : 'text-gray-300'}`}>
                          MySQL 8.0
                        </div>
                      </button>
                      <button
                        onClick={() => updateField('dbType', 'postgres')}
                        className={`p-3 rounded-lg border text-center transition-all ${
                          formData.dbType === 'postgres'
                            ? 'border-primary-500 bg-primary-500/10'
                            : 'border-dark-500 bg-dark-700 hover:border-dark-400'
                        }`}
                      >
                        <div className={`text-sm font-medium ${formData.dbType === 'postgres' ? 'text-white' : 'text-gray-300'}`}>
                          PostgreSQL 16
                        </div>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Step 4: Confirmation */}
          {currentStep === 4 && (
            <div className="space-y-5">
              {submitResult ? (
                <div
                  className={`p-6 rounded-xl border ${
                    submitResult.success
                      ? 'border-green-500/30 bg-green-500/10'
                      : 'border-red-500/30 bg-red-500/10'
                  }`}
                >
                  {submitResult.success ? (
                    <div className="text-center">
                      <CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-3" />
                      <h3 className="text-lg font-bold text-green-400">
                        Création lancée avec succès !
                      </h3>
                      <p className="text-gray-400 mt-2 text-sm">
                        L'application est en cours de déploiement. Suivez la progression dans l'onglet Déploiements.
                      </p>
                      <p className="text-gray-500 mt-2 text-xs">
                        URL: https://{formData.subdomain}.recette.santinova-soft.org
                      </p>
                    </div>
                  ) : (
                    <div className="text-center">
                      <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
                      <h3 className="text-lg font-bold text-red-400">Erreur</h3>
                      <p className="text-gray-400 mt-2 text-sm">{submitResult.error}</p>
                    </div>
                  )}
                </div>
              ) : (
                <>
                  <h3 className="text-lg font-semibold text-white">Récapitulatif</h3>
                  <div className="bg-dark-700 rounded-xl divide-y divide-dark-600">
                    <div className="flex justify-between items-center px-4 py-3">
                      <span className="text-gray-400 text-sm">Nom</span>
                      <span className="text-white font-medium">{formData.name}</span>
                    </div>
                    {formData.description && (
                      <div className="flex justify-between items-center px-4 py-3">
                        <span className="text-gray-400 text-sm">Description</span>
                        <span className="text-white text-sm text-right max-w-xs truncate">{formData.description}</span>
                      </div>
                    )}
                    <div className="flex justify-between items-center px-4 py-3">
                      <span className="text-gray-400 text-sm">URL</span>
                      <span className="text-primary-400 text-sm">
                        https://{formData.subdomain}.recette.santinova-soft.org
                      </span>
                    </div>
                    <div className="flex justify-between items-center px-4 py-3">
                      <span className="text-gray-400 text-sm">Source</span>
                      <span className="text-white text-sm">
                        {formData.sourceType === 'zip'
                          ? `ZIP: ${formData.zipFile?.name || '-'}`
                          : `Gitea: ${formData.giteaRepoUrl.split('/').pop()}`}
                      </span>
                    </div>
                    <div className="flex justify-between items-center px-4 py-3">
                      <span className="text-gray-400 text-sm">Stack</span>
                      <span className="text-white text-sm">
                        {selectedStack?.name || formData.stack}
                      </span>
                    </div>
                    {formData.port && (
                      <div className="flex justify-between items-center px-4 py-3">
                        <span className="text-gray-400 text-sm">Port</span>
                        <span className="text-white text-sm">{formData.port}</span>
                      </div>
                    )}
                    <div className="flex justify-between items-center px-4 py-3">
                      <span className="text-gray-400 text-sm">Base de données</span>
                      <span className="text-white text-sm">
                        {formData.needsDb
                          ? formData.dbType === 'mysql'
                            ? 'MySQL 8.0'
                            : 'PostgreSQL 16'
                          : 'Aucune'}
                      </span>
                    </div>
                  </div>

                  <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
                    <div className="flex items-start gap-3">
                      <AlertCircle className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
                      <div>
                        <p className="text-yellow-400 text-sm font-medium">
                          Le déploiement peut prendre plusieurs minutes
                        </p>
                        <p className="text-gray-400 text-xs mt-1">
                          Le build Docker et le démarrage des conteneurs seront exécutés en arrière-plan.
                          Vous pourrez suivre la progression dans l'onglet Déploiements.
                        </p>
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between px-6 py-4 border-t border-dark-600 bg-dark-900/50">
          <div>
            {currentStep > 1 && !submitResult && (
              <button
                onClick={prevStep}
                className="px-4 py-2 text-gray-400 hover:text-white transition-colors text-sm"
              >
                Retour
              </button>
            )}
          </div>
          <div className="flex items-center gap-3">
            {submitResult ? (
              <button
                onClick={onClose}
                className="btn-primary px-6"
              >
                Fermer
              </button>
            ) : currentStep < 4 ? (
              <button onClick={nextStep} className="btn-primary px-6">
                Suivant
              </button>
            ) : (
              <button
                onClick={handleSubmit}
                disabled={isSubmitting}
                className="btn-primary px-6 flex items-center gap-2"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Création en cours...
                  </>
                ) : (
                  <>
                    <Package className="w-4 h-4" />
                    Créer et déployer
                  </>
                )}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
