import React from 'react';
import { themeColors } from './colorExtractor';
import { colors } from './colors';

const ToastContainer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
    <div
        className={[
            'fixed bottom-6 right-6 bg-gray-700 border border-gray-600 shadow-2xl p-4 z-50 min-w-[320px]',
            className,
        ]
            .filter(Boolean)
            .join(' ')}
        style={{ borderRadius: themeColors.borderRadius.component, animation: 'slideIn 0.3s ease-out' }}
        {...props}
    >
        <style>{`
            @keyframes slideIn {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        `}</style>
        {children}
    </div>
);

const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => (
    <div
        className="w-full bg-gray-700 h-2 overflow-hidden mt-3"
        style={{ borderRadius: themeColors.borderRadius.component }}
    >
        <div
            className="h-full transition-[width] duration-300"
            style={{ width: `${progress}%`, background: colors.primary.default }}
        />
    </div>
);

interface ProgressToastProps {
    message: string;
    progress?: number;
    showProgress?: boolean;
}

const ProgressToast: React.FC<ProgressToastProps> = ({ message, progress = 0, showProgress = false }) => {
    return (
        <ToastContainer>
            <div className="flex items-center gap-3">
                <div className="animate-spin">
                    <svg className="w-5 h-5 text-primary-500" 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>
                </div>
                <div className="flex-1">
                    <p className="text-neutral-300 font-medium">{message}</p>
                    {showProgress && (
                        <p className="text-neutral-300 text-sm mt-1">{progress}% complete</p>
                    )}
                </div>
            </div>
            {showProgress && <ProgressBar progress={progress} />}
        </ToastContainer>
    );
};

export default ProgressToast;