espace-paie-odentas/components/staff/amendments/UploadSignedPdfModal.tsx

"use client";

import { Upload, X, FileText, AlertCircle } from "lucide-react";
import { useState, useRef } from "react";

interface UploadSignedPdfModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (file: File) => Promise<void>;
  numeroAvenant: string;
  isUploading: boolean;
}

export default function UploadSignedPdfModal({
  isOpen,
  onClose,
  numeroAvenant,
  onConfirm,
  isUploading,
}: UploadSignedPdfModalProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  if (!isOpen) return null;

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // Vérifier que c'est bien un PDF
    if (file.type !== "application/pdf") {
      setError("Le fichier doit être un PDF");
      setSelectedFile(null);
      return;
    }

    // Vérifier la taille (max 10MB)
    if (file.size > 10 * 1024 * 1024) {
      setError("Le fichier ne doit pas dépasser 10 MB");
      setSelectedFile(null);
      return;
    }

    setError(null);
    setSelectedFile(file);
  };

  const handleUpload = async () => {
    if (!selectedFile) return;
    
    try {
      await onConfirm(selectedFile);
      setSelectedFile(null);
      setError(null);
    } catch (err: any) {
      setError(err.message || "Erreur lors de l'upload");
    }
  };

  const handleClose = () => {
    if (!isUploading) {
      setSelectedFile(null);
      setError(null);
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b">
          <div>
            <h2 className="text-xl font-semibold text-slate-900">
              Ajouter un PDF signé
            </h2>
            <p className="text-sm text-slate-600 mt-1">
              Avenant {numeroAvenant}
            </p>
          </div>
          <button
            onClick={handleClose}
            disabled={isUploading}
            className="p-2 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
          >
            <X className="h-5 w-5 text-slate-600" />
          </button>
        </div>

        {/* Body */}
        <div className="p-6 space-y-4">
          <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <div className="flex gap-3">
              <AlertCircle className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-blue-900">
                <p className="font-medium mb-1">Upload manuel d'un PDF signé</p>
                <p className="text-blue-800">
                  Utilisez cette fonctionnalité pour ajouter un avenant qui a été signé
                  en dehors du système (signature papier, autre plateforme, etc.).
                </p>
              </div>
            </div>
          </div>

          {/* Zone de sélection de fichier */}
          <div className="space-y-3">
            <label className="block text-sm font-medium text-slate-700">
              Sélectionner le PDF signé
            </label>
            
            {!selectedFile ? (
              <div
                onClick={() => fileInputRef.current?.click()}
                className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-indigo-400 hover:bg-indigo-50/50 transition-colors cursor-pointer"
              >
                <Upload className="h-12 w-12 text-slate-400 mx-auto mb-3" />
                <p className="text-sm font-medium text-slate-700 mb-1">
                  Cliquer pour sélectionner un fichier
                </p>
                <p className="text-xs text-slate-500">
                  PDF uniquement, max 10 MB
                </p>
              </div>
            ) : (
              <div className="border border-slate-300 rounded-lg p-4 bg-slate-50">
                <div className="flex items-center gap-3">
                  <div className="flex-shrink-0 w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
                    <FileText className="h-5 w-5 text-indigo-600" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-slate-900 truncate">
                      {selectedFile.name}
                    </p>
                    <p className="text-xs text-slate-500">
                      {(selectedFile.size / 1024).toFixed(2)} KB
                    </p>
                  </div>
                  <button
                    onClick={() => setSelectedFile(null)}
                    disabled={isUploading}
                    className="p-2 hover:bg-slate-200 rounded-lg transition-colors disabled:opacity-50"
                  >
                    <X className="h-4 w-4 text-slate-600" />
                  </button>
                </div>
              </div>
            )}

            <input
              ref={fileInputRef}
              type="file"
              accept="application/pdf"
              onChange={handleFileSelect}
              className="hidden"
            />
          </div>

          {error && (
            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">
              {error}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 p-6 border-t bg-slate-50">
          <button
            onClick={handleClose}
            disabled={isUploading}
            className="px-4 py-2 text-slate-700 hover:bg-slate-200 rounded-lg transition-colors font-medium disabled:opacity-50"
          >
            Annuler
          </button>
          <button
            onClick={handleUpload}
            disabled={!selectedFile || isUploading}
            className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Upload className="h-4 w-4" />
            {isUploading ? "Upload en cours..." : "Uploader le PDF"}
          </button>
        </div>
      </div>
    </div>
  );
}