import React, { useState } from 'react';
import { Download, Copy, Check, X, FileCode, Server, Database, Smartphone, BookOpen } from 'lucide-react';
import { OVH_FILES, downloadOVHZipArchive, OVHFile } from '../ovhPackage';

interface ExportOvhModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const ExportOvhModal: React.FC<ExportOvhModalProps> = ({ isOpen, onClose }) => {
  const [selectedFileIdx, setSelectedFileIdx] = useState(0);
  const [copied, setCopied] = useState(false);
  const [downloading, setDownloading] = useState(false);

  if (!isOpen) return null;

  const currentFile: OVHFile = OVH_FILES[selectedFileIdx] || OVH_FILES[0];

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(currentFile.content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      console.error(e);
    }
  };

  const handleDownloadZip = async () => {
    try {
      setDownloading(true);
      await downloadOVHZipArchive();
    } catch (e) {
      console.error(e);
    } finally {
      setDownloading(false);
    }
  };

  const getCategoryIcon = (category: OVHFile['category']) => {
    switch (category) {
      case 'db':
        return <Database className="w-3.5 h-3.5 text-amber-400" />;
      case 'api':
        return <Server className="w-3.5 h-3.5 text-sky-400" />;
      case 'frontend':
        return <FileCode className="w-3.5 h-3.5 text-emerald-400" />;
      case 'pwa':
        return <Smartphone className="w-3.5 h-3.5 text-purple-400" />;
      case 'doc':
        return <BookOpen className="w-3.5 h-3.5 text-rose-400" />;
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/80 backdrop-blur-xs">
      <div className="w-full max-w-4xl max-h-[92vh] bg-[var(--surface)] border border-[var(--border)] rounded-[22px] p-5 sm:p-6 shadow-2xl flex flex-col gap-4 overflow-hidden animate-in fade-in zoom-in-95">
        {/* Header */}
        <div className="flex items-start justify-between border-b border-[var(--border)] pb-3">
          <div>
            <div className="flex items-center gap-2">
              <span className="px-2.5 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider bg-blue-950 text-blue-300 border border-blue-800">
                Pack Déploiement OVH Starter
              </span>
              <span className="text-xs text-[var(--ink-soft)]">
                PHP • MySQL • Vanilla HTML/CSS/JS • PWA
              </span>
            </div>
            <h2 className="text-xl sm:text-2xl font-bold text-[var(--ink)] m-0 mt-1 leading-tight">
              Fichiers prêts pour votre hébergement web
            </h2>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleDownloadZip}
              disabled={downloading}
              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs sm:text-sm shadow-md transition-all cursor-pointer"
            >
              <Download className="w-4 h-4" />
              <span>{downloading ? 'Génération...' : 'Télécharger le ZIP (complet)'}</span>
            </button>
            <button
              onClick={onClose}
              className="w-9 h-9 rounded-xl bg-[var(--surface-alt)] flex items-center justify-center text-[var(--ink-soft)] hover:text-[var(--ink)] transition-colors cursor-pointer"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Layout 2 colonnes : Explorateur de fichiers à gauche + Code viewer à droite */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1 min-h-[420px] max-h-[60vh] overflow-hidden">
          {/* Liste des fichiers */}
          <div className="flex flex-col gap-1.5 overflow-y-auto pr-1">
            <span className="text-xs font-bold text-[var(--ink-soft)] uppercase tracking-wider px-1">
              Fichiers du projet ({OVH_FILES.length})
            </span>
            {OVH_FILES.map((file, idx) => (
              <button
                key={file.path}
                onClick={() => setSelectedFileIdx(idx)}
                className={`p-2.5 rounded-xl text-left flex items-start gap-2.5 border transition-all cursor-pointer ${
                  selectedFileIdx === idx
                    ? 'bg-[var(--accent)] text-white border-transparent shadow-sm'
                    : 'bg-[var(--surface-alt)] border-[var(--border)] text-[var(--ink)] hover:border-[var(--ink-soft)]'
                }`}
              >
                <div className="mt-0.5 shrink-0">{getCategoryIcon(file.category)}</div>
                <div className="truncate">
                  <p className="text-xs font-bold font-mono truncate m-0">{file.name}</p>
                  <p
                    className={`text-[10px] truncate m-0 mt-0.5 ${
                      selectedFileIdx === idx ? 'text-white/80' : 'text-[var(--ink-soft)]'
                    }`}
                  >
                    {file.description}
                  </p>
                </div>
              </button>
            ))}
          </div>

          {/* Visualiseur de code */}
          <div className="md:col-span-2 flex flex-col rounded-xl bg-[#0e110f] border border-[var(--border)] overflow-hidden">
            {/* Barre supérieure du fichier */}
            <div className="flex items-center justify-between p-2.5 px-4 bg-white/5 border-b border-white/10">
              <div className="flex items-center gap-2">
                <FileCode className="w-4 h-4 text-sky-400" />
                <span className="text-xs font-mono font-bold text-white">
                  {currentFile.path}
                </span>
              </div>
              <button
                onClick={handleCopy}
                className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-xs font-medium text-white transition-colors cursor-pointer"
              >
                {copied ? (
                  <>
                    <Check className="w-3.5 h-3.5 text-emerald-400" />
                    <span>Copié !</span>
                  </>
                ) : (
                  <>
                    <Copy className="w-3.5 h-3.5" />
                    <span>Copier</span>
                  </>
                )}
              </button>
            </div>

            {/* Zone de code scrollable */}
            <pre className="p-4 text-xs font-mono text-emerald-300/90 overflow-auto flex-1 leading-relaxed selection:bg-emerald-900 selection:text-white m-0">
              <code>{currentFile.content}</code>
            </pre>
          </div>
        </div>

        {/* Notice bas de page */}
        <div className="pt-2 border-t border-[var(--border)] text-xs text-[var(--ink-soft)] flex items-center justify-between">
          <span>
            💡 Il vous suffit de décompresser ce ZIP et d'envoyer son contenu dans le dossier <code className="font-mono bg-[var(--surface-alt)] px-1 rounded">www/</code> de votre hébergement OVH.
          </span>
          <span className="font-semibold text-sky-400">
            100% compatible OVH Starter
          </span>
        </div>
      </div>
    </div>
  );
};