import React, { useRef } from 'react';

interface AssetUploadProps {
    onFileUpload: (file: File) => void;
    isLoading: boolean;
    isUploadDisabled?: boolean;
}

export const AssetUpload: React.FC<AssetUploadProps> = ({ onFileUpload, isLoading, isUploadDisabled }) => {
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            onFileUpload(file);
        }
    };

    const handleClick = () => {
        fileInputRef.current?.click();
    };
    
    const isDisabled = isLoading || isUploadDisabled;

    return (
        <div className="flex flex-col items-center">
            <input
                type="file"
                ref={fileInputRef}
                onChange={handleFileChange}
                className="hidden"
                accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
                disabled={isDisabled}
            />
            <button
                onClick={handleClick}
                disabled={isDisabled}
                title={isUploadDisabled ? "Please complete all selections above" : "Upload a proof for review"}
                className="w-full bg-oliver-azure text-oliver-black font-bold py-3 px-6 rounded-full hover:bg-white transition-all duration-300 disabled:bg-gray-500 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
            >
                {isLoading ? (
                    <>
                        <svg className="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Processing...
                    </>
                ) : 'Upload Proof'}
            </button>
            <p className="text-xs text-gray-400 mt-4">Supports PNG, JPG, GIF, WEBP, MP4, PDF.</p>
        </div>
    );
};