import { Upload, FileText, AlertTriangle } from "lucide-react";
import { SampleTextComponent } from "./SampleTextComponent";
import { SupportedDataTypes } from "./SupportedDataTypes";
import { AnonymizationInterface } from "./AnonymizationInterface";

interface FileUploadComponentProps {
  uploadedFile: File | null;
  handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  sourceText: string;
  setSourceText: (text: string) => void;
  setUploadedFile: (file: File | null) => void;
  setFileContent: (content: string) => void;
  onAnonymize?: () => void;
  isProcessing?: boolean;
  canAnonymize?: boolean;
  isLoadingFile?: boolean;
  onRestart?: () => void;
  outputText?: string;
}

export const FileUploadComponent = ({
  uploadedFile,
  handleFileChange,
  sourceText,
  setSourceText,
  setUploadedFile,
  setFileContent,
  onAnonymize,
  isProcessing = false,
  canAnonymize = false,
  isLoadingFile = false,
  onRestart,
  outputText,
}: FileUploadComponentProps) => {
  // Si un fichier est uploadé ou qu'il y a du texte d'exemple, on affiche le preview
  if (uploadedFile || (sourceText && sourceText.trim())) {
    return (
      <div className="w-full flex flex-col space-y-6">
        {/* Preview du document avec en-tête simple */}
        <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
          <div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                  <FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
                </div>
                <div className="min-w-0 flex-1">
                  {uploadedFile ? (
                    <p className="text-xs sm:text-sm text-orange-600 truncate">
                      {uploadedFile.name} •{" "}
                      {(uploadedFile.size / 1024).toFixed(1)} KB
                    </p>
                  ) : (
                    <p className="text-xs sm:text-sm text-orange-600">
                      Demo - Exemple de texte
                    </p>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className="p-4 sm:p-6">
            {/* Zone de texte avec limite de hauteur et scroll */}
            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
              {isLoadingFile ? (
                <div className="flex items-center justify-center py-8">
                  <div className="flex items-center space-x-3">
                    <div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
                    <span className="text-xs sm:text-sm text-gray-600">
                      Chargement du fichier en cours...
                    </span>
                  </div>
                </div>
              ) : (
                <pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
                  {sourceText || "Aucun contenu à afficher"}
                </pre>
              )}
            </div>

            {/* Disclaimer déplacé en dessous du texte */}
            <div className="mt-4">
              <div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
                <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
                <p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
                  Cet outil IA peut ne pas détecter toutes les informations
                  sensibles. Vérifiez le résultat avant de le partager.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Boutons d'action - Responsive mobile */}
        {canAnonymize && !isLoadingFile && (
          <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            {/* Bouton Anonymiser en premier */}
            {onAnonymize && (
              <button
                onClick={onAnonymize}
                disabled={isProcessing}
                className="w-full sm:w-auto bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-3 rounded-lg text-sm font-medium transition-colors duration-300 flex items-center justify-center space-x-3"
              >
                {isProcessing ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    <span>Anonymisation en cours...</span>
                  </>
                ) : (
                  <>
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                      />
                    </svg>
                    <span>Anonymiser mes données</span>
                  </>
                )}
              </button>
            )}

            {/* Bouton Recommencer */}
            {onRestart && (
              <button
                onClick={onRestart}
                className="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg text-sm font-medium transition-colors duration-300 flex items-center justify-center space-x-2"
              >
                <svg
                  className="w-4 h-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                  />
                </svg>
                <span>Recommencer</span>
              </button>
            )}
          </div>
        )}

        {/* Affichage conditionnel : Interface d'anonymisation OU Types de données supportées */}
        {isProcessing || outputText ? (
          <AnonymizationInterface
            isProcessing={isProcessing}
            outputText={outputText}
            sourceText={sourceText}
          />
        ) : (
          <SupportedDataTypes />
        )}
      </div>
    );
  }

  // Si pas de fichier ni de texte, on affiche la zone de drop
  return (
    <div className="w-full flex flex-col space-y-5">
      {/* Drop Zone - Responsive */}
      <div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
        {/* Zone cliquable pour le glisser-déposer */}
        <label className="flex flex-col items-center justify-center cursor-pointer group p-6 sm:p-8">
          {/* Upload Icon */}
          <div className="w-12 h-12 sm:w-16 sm:h-16 bg-[#f7ab6e] group-hover:bg-[#f7ab6e]/75 rounded-full flex items-center justify-center mb-4 transition-colors duration-300">
            <Upload className="h-6 w-6 sm:h-8 sm:w-8 text-white transition-colors duration-300" />
          </div>

          {/* Main Text */}
          <h3 className="text-base sm:text-lg font-semibold text-[#092727] mb-2 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
            Déposez votre fichier ici
          </h3>
          <p className="text-sm sm:text-base text-[#092727] opacity-80 mb-4 text-center group-hover:opacity-90 transition-opacity duration-300">
            ou cliquez pour sélectionner un fichier
          </p>

          {/* File Info */}
          <div className="flex flex-col sm:flex-row items-center gap-2 text-xs sm:text-sm text-[#092727] opacity-70">
            <span>📄 Fichiers TXT, PDF</span>
            <span className="hidden sm:inline">•</span>
            <span>Max 5MB</span>
          </div>

          {/* Hidden Input */}
          <input
            type="file"
            onChange={handleFileChange}
            accept=".txt,.pdf"
            className="hidden"
          />
        </label>

        {/* Démarcation avec trait horizontal - NON CLIQUABLE */}
        <div className="w-full flex items-center px-6 sm:px-8 py-4">
          <div className="flex-1 h-px bg-[#092727] opacity-30"></div>
          <span className="px-3 text-xs text-[#092727] opacity-60">ou</span>
          <div className="flex-1 h-px bg-[#092727] opacity-30"></div>
        </div>

        {/* Bouton d'exemple - NON CLIQUABLE pour le drag & drop */}
        <div className="flex justify-center pb-6 sm:pb-8">
          <SampleTextComponent
            setSourceText={setSourceText}
            setFileContent={setFileContent}
            setUploadedFile={setUploadedFile}
            variant="button"
          />
        </div>
      </div>

      {/* Supported Data Types */}
      <SupportedDataTypes />
    </div>
  );
};