'use client'
import React, { useState, useEffect } from 'react';
import { DocusealBuilder } from '@docuseal/react';
import Button from '@/components/Button';
import { BASE_URL } from '@/utils/Url';
import { generateToken } from '@/app/actions/registerFileGroupAction';
import logger from '@/utils/logger';
import { GraduationCap, CloudUpload } from 'lucide-react';
import FileUpload from '@/components/FileUpload';
import SectionHeader from '@/components/SectionHeader';

export default function ValidateSubscription({ studentId, firstName, lastName, paymentSepa, file, onAccept }) {
  const [token, setToken] = useState(null);
  const [uploadedFileName, setUploadedFileName] = useState('');
  const [selectedFile, setSelectedFile] = useState(null); // Nouvel état pour le fichier sélectionné
  const [pdfUrl, setPdfUrl] = useState(`${BASE_URL}/${file}`);
  const [isSepa, setIsSepa] = useState(paymentSepa); // Vérifie si le mode de paiement est SEPA
  const [currentPage, setCurrentPage] = useState(1); // Gestion des étapes

  useEffect(() => {
    if (isSepa) {
      generateToken('n3wt.school@gmail.com')
        .then((data) => {
          setToken(data.token);
        })
        .catch((error) => logger.error('Erreur lors de la génération du token:', error));
    }
  }, [isSepa]);

  const handleAccept = () => {
    if (!selectedFile && isSepa) {
      logger.error('Aucun fichier sélectionné pour le champ SEPA.');
      return;
    }

    const data = {
      status: 7,
      sepa_file: selectedFile, // Utilise le fichier sélectionné depuis l'état
    };

    // Appeler la fonction passée par le parent pour mettre à jour le RF
    onAccept(data);
  };

  const isValidateButtonDisabled = isSepa && !uploadedFileName;

  const goToNextPage = () => {
    if (currentPage < (isSepa ? 2 : 1)) {
      setCurrentPage(currentPage + 1);
    }
  };

  const goToPreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  return (
    <div className="space-y-6 p-6">
      <SectionHeader
        icon={GraduationCap}
        title={`Dossier scolaire de ${firstName} ${lastName}`}
        description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
      />

      {/* Contenu principal */}
      {currentPage === 1 && (
        <div className="p-6 items-center">
          <iframe
            src={pdfUrl}
            title="Aperçu du PDF"
            className="w-full h-[900px] border rounded-lg"
            style={{
              transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
              transformOrigin: 'top center',
              border: 'none',
            }}
          />
        </div>
      )}

      {currentPage === 2 && isSepa && (
        <FileUpload
          selectionMessage="Sélectionnez un mandat de prélèvement SEPA"
          onFileSelect={(file) => {
            setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
            setSelectedFile(file); // Stocke le fichier dans l'état
            logger.debug('Fichier sélectionné:', file.name);
          }}
          uploadedFileName={uploadedFileName}
        />
      )}

      {/* Boutons de navigation */}
      <div className="flex justify-end items-center mt-6 space-x-4">
        {currentPage > 1 && (
          <Button
            text="Précédent"
            onClick={goToPreviousPage}
            className="bg-gray-300 text-gray-700 hover:bg-gray-400 px-6 py-2"
          />
        )}
        {isSepa && currentPage === 1 && (
          <Button
            text="Suivant"
            onClick={goToNextPage}
            primary
            className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-2"
          />
        )}
        {currentPage === (isSepa ? 2 : 1) && (
          <Button
            text="Valider"
            onClick={handleAccept}
            primary
            className={`px-6 py-2 ${isValidateButtonDisabled ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-600 text-white hover:bg-emerald-700'}`}
            disabled={isValidateButtonDisabled}
          />
        )}
      </div>
    </div>
  );
}