import { useRef, useState } from 'react';
import { FiUpload } from 'react-icons/fi'
import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify';
import { useNavigate } from 'react-router-dom';
import { RootState } from '../../store/store';
import api from '../../config/api';


const StartNow = () => {
    const fileInputRef = useRef<HTMLInputElement>(null);
    const [files, setFiles] = useState<File[]>([]);

    const userData = useSelector((state: RootState) => state.user);

    const dispatch = useDispatch();
    const navigate = useNavigate();

    const handleUpload = async (filesToUpload: File[]) => {

        const accountId = userData.account?.id;
        const transactionRes = await api.post(`/api/accounts/${userData.account?.id}/transactions`);
        const transactionId = transactionRes.data.id

        const formData = new FormData();
        formData.append("file", filesToUpload[0]);

        dispatch(uploadDocuments({ formData, accountId, transactionId }))
            .unwrap()
            .then((res) => {
                // toast.dismiss();
                setFiles([]);
                navigate(`/process-step-one/${accountId}/${transactionId}`);
            })
            .catch((err) => {
                console.error("Upload failed", err);
            });
    };

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

    return (
        <>
            <div
                onClick={() => fileInputRef.current?.click()}
                id='start-now-upload-con'
                className="group col-span-1 cursor-pointer border-2 border-dashed border-slate-300 rounded-lg bg-[var(--documentUploadBg)] transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
                {/* Upload icon with subtle animation */}
                <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
                    <FiUpload className="text-lg" />
                </div>

                {/* Compact text */}
                <p className="text-xs text-gray-600">
                    <span className="text-blue-600 font-medium">Click to upload</span> or drag and drop
                </p>

                <button
                    className="mt-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400"
                >
                    Start Now
                </button>

                <p className="text-[0.65rem] text-gray-400 mt-0.5">
                    PDF, JPG, PNG (max. 10MB)
                </p>

                <input
                    type="file"
                    ref={fileInputRef}
                    className="hidden"
                    onChange={handleFileChange}
                    accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
                    multiple
                />

            </div>
        </>
    )
}

export default StartNow