import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../store/store";

import { FaCloudUploadAlt } from "react-icons/fa";
import { MdCancel } from "react-icons/md";
import { uploadDocuments } from "../../store/slices/documentSlice";

import { Bounce, toast } from "react-toastify";

const UploadDoc: React.FC = () => {
    const [files, setFiles] = useState<File[]>([]);
    const dispatch = useDispatch<AppDispatch>();

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

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

    const handleUpload = (filesToUpload: File[]) => {
        const formData = new FormData();
        filesToUpload.forEach((file) => formData.append("document", file));

        dispatch(uploadDocuments(formData))
            .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,
                // });
                setFiles([]);
            })
            .catch((err) => console.error("Failed to upload documents", err));
    };

    return (
        <>
            <div className="w-full bg-[var(--compBgCol)] rounded border border-gray-200 p-5 mb-2 shadow-sm">
                <div
                    className="w-full border-1 border-dashed border-gray-300 rounded p-6 text-center transition-all duration-200 hover:border-[var(--primary)] hover:bg-gray-50 cursor-pointer"
                    onClick={() => document.getElementById("file-input")?.click()}
                    onDragOver={(e) => e.preventDefault()}
                    onDrop={handleDrop}
                >
                    <input
                        type="file"
                        id="file-input"
                        className="hidden"
                        onChange={handleFileChange}
                        accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
                        multiple
                    />
                    <div className="flex flex-col items-center justify-center gap-2">
                        <FaCloudUploadAlt className="text-5xl text-[var(--primary)]" />
                        <p className="text-sm font-medium text-gray-700">Upload or drag & drop files</p>
                        <p className="text-xs text-gray-500">PDF, DOCX, JPG, PNG, TXT (max 10MB)</p>
                    </div>

                    {/* {files.length > 0 && (
                        <div className="mt-5 text-left">
                            <h3 className="text-sm font-semibold text-gray-700 mb-2">Files</h3>
                            <div className="space-y-2 max-h-40 overflow-y-auto pr-1">
                                {files.map((file, index) => (
                                    <div
                                        key={index}
                                        className="flex items-center justify-between bg-white border border-gray-200 rounded-md px-3 py-2 hover:shadow-sm transition"
                                    >
                                        <span className="truncate text-sm text-gray-800 max-w-[85%]">{file.name}</span>
                                        <MdCancel
                                            onClick={() => setFiles(files.filter((_, i) => i !== index))}
                                            className="text-gray-400 hover:text-red-500 cursor-pointer transition"
                                        />
                                    </div>
                                ))}
                            </div>
                        </div>
                    )} */}
                </div>
            </div>

        </>
    );
};

export default UploadDoc;