SME-Web/src/components/process/processStepOne/SelectedDocuments.tsx

import { useState, useRef } from 'react';
import { ReactSortable } from 'react-sortablejs';
import { RiDraggable } from "react-icons/ri";
import { FaFileAlt, FaPlus, FaGoogleDrive, FaDropbox, FaMicrosoft, FaCloudUploadAlt } from "react-icons/fa";
import { useDispatch, useSelector } from 'react-redux';
// import { setSelectedDocuments } from '../../../store/slices/selectedDocsSlice';
import { setDocuments, uploadDocuments } from '../../../store/slices/documentSlice';
import { RootState, AppDispatch } from '../../../store/store';
import { IoMdClose } from 'react-icons/io';
import { Bounce, toast } from "react-toastify";
import api from '../../../config/api';
import DocumentCard from './DocumentCard';
import { useParams } from 'react-router-dom';

const SelectedDocuments = () => {
    const dispatch = useDispatch<AppDispatch>();
    const documents = useSelector((state: RootState) => state.documents.documents);

    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
    if (!accountId || !transactionId) {
        window.location.href = "/";
        return null;
    }

    const [isModalOpen, setModalOpen] = useState(false);
    const [activeTab, setActiveTab] = useState('Upload');
    const [files, setFiles] = useState<File[]>([]);
    const fileInputRef = useRef<HTMLInputElement>(null);

    const tabs = [
        { name: 'Upload', icon: <FaPlus /> },
        { name: 'Google Drive', icon: <FaGoogleDrive /> },
        { name: 'OneDrive', icon: <FaMicrosoft /> },
        { name: 'Dropbox', icon: <FaDropbox /> },
    ];

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
        if (selectedFiles.length > 0) {
            setFiles((prev) => [...prev, ...selectedFiles]);
            handleUpload(selectedFiles);
        }
    };

    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        const droppedFiles = Array.from(e.dataTransfer.files);
        if (droppedFiles.length > 0) {
            setFiles((prev) => [...prev, ...droppedFiles]);
            handleUpload(droppedFiles);
        }
    };

    const handleUpload = (filesToUpload: File[]) => {
        const formData = new FormData();
        formData.append("file", filesToUpload[0])
        console.log(formData, "Line 59")
        // filesToUpload.forEach((file) => formData.append("document", file));
        dispatch(uploadDocuments({ formData, accountId, transactionId }))
            .unwrap()
            .then((res) => {
                toast.dismiss();
                // toast.info("📄 Documents uploaded!", {
                //     position: "bottom-right",
                //     autoClose: 5000,
                //     hideProgressBar: false,
                //     closeOnClick: false,
                //     pauseOnHover: true,
                //     draggable: true,
                //     progress: undefined,
                //     theme: "light",
                //     transition: Bounce,
                // });

                // Update selected documents after upload
                // dispatch(setSelectedDocuments([...documents, ...res]));

                setFiles([]);
                setModalOpen(false);
            })
            .catch((err) => {
                console.error("Upload failed", err);
            });
    };

    return (
        <>
            {/* Upload Card First */}
            <div className="flex flex-wrap gap-3">
                {/* Uploaded documents */}
                <ReactSortable
                    className="flex flex-wrap gap-3"
                    list={documents.map(doc => ({ ...doc }))}
                    setList={(newState) => dispatch(setDocuments(newState))}
                    handle=".drag-handle"
                    animation={200}
                    ghostClass="sortable-ghost"
                    disabled={false}
                >
                    {documents.map((doc) => (
                        <DocumentCard key={doc.id} id={doc.id} name={doc.name} isCompleted={("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) ? true : false} />
                    ))}
                </ReactSortable>

                <div
                    onClick={() => setModalOpen(true)}
                    className="cursor-pointer w-[160px] h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md"
                >
                    <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
                    <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
                </div>
            </div>

            {/* Modal */}
            {isModalOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-100/60 backdrop-blur-sm px-4">
                    <div className="bg-white w-full max-w-5xl h-[500px] rounded-xl shadow-lg flex overflow-hidden relative">
                        {/* Close Button */}
                        <button
                            className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
                            onClick={() => setModalOpen(false)}
                        >
                            <IoMdClose />
                        </button>

                        {/* Sidebar Tabs */}
                        <div className="w-1/4 bg-gray-100 p-4 flex flex-col gap-2 border-r border-gray-200">
                            {tabs.map(tab => (
                                <button
                                    key={tab.name}
                                    className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition ${activeTab === tab.name
                                        ? 'bg-white shadow text-[var(--primary)]'
                                        : 'hover:bg-gray-200 text-gray-600'
                                        }`}
                                    onClick={() => setActiveTab(tab.name)}
                                >
                                    {tab.icon} {tab.name}
                                </button>
                            ))}
                        </div>

                        {/* Modal Content */}
                        <div className="w-3/4 p-6 overflow-y-auto">
                            {activeTab === 'Upload' && (
                                <div
                                    onClick={() => fileInputRef.current?.click()}
                                    onDragOver={(e) => e.preventDefault()}
                                    onDrop={handleDrop}
                                    className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50"
                                >
                                    <FaCloudUploadAlt className="text-5xl text-[var(--primary)] mb-4" />
                                    <p className="text-sm text-gray-500 mb-2">Drag & drop files here or</p>
                                    <button className="px-5 py-2 text-sm bg-[var(--primary)] text-white rounded-md hover:scale-103 cursor-pointer transition-all">
                                        Browse Files
                                    </button>
                                    <input
                                        type="file"
                                        ref={fileInputRef}
                                        className="hidden"
                                        onChange={handleFileChange}
                                        accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
                                        multiple
                                    />
                                </div>
                            )}
                            {activeTab !== 'Upload' && (
                                <div className="flex items-center justify-center h-full text-gray-400 text-sm">
                                    <p>{activeTab} integration coming soon...</p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default SelectedDocuments;