import React, { useState } from 'react';
import { invokeSeedDatabaseFunction } from '../services/supabaseClient';
import { SparklesIcon } from './icons/SparklesIcon';
import { LoadingSpinner } from './LoadingSpinner';

interface DatabaseSeederProps {
    onSuccess: () => void;
}

export const DatabaseSeeder: React.FC<DatabaseSeederProps> = ({ onSuccess }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [message, setMessage] = useState<string | null>(null);

    const handleSeed = async () => {
        setIsLoading(true);
        setError(null);
        setMessage(null);

        try {
            const result = await invokeSeedDatabaseFunction();
            setMessage(result.message);
            // Wait a moment for the success message to be readable, then trigger re-check
            setTimeout(() => {
                onSuccess();
            }, 2500);
        } catch (e: any) {
            setError(e.message);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4">
            <div className="flex">
                <div className="flex-shrink-0">
                    <SparklesIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
                </div>
                <div className="ml-3">
                    <p className="text-sm text-yellow-700 dark:text-yellow-300">
                        It looks like the development users are missing. Use this tool to create them.
                    </p>
                    <div className="mt-4">
                        <button
                            onClick={handleSeed}
                            disabled={isLoading || !!message}
                            className="w-full bg-yellow-500 hover:bg-yellow-600 disabled:bg-yellow-300 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
                        >
                            {isLoading ? (
                                <>
                                    <div className="w-5 h-5 mr-2"><LoadingSpinner /></div>
                                    Seeding...
                                </>
                            ) : 'Seed Dev Users'}
                        </button>
                        {error && (
                            <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>
                        )}
                        {message && (
                            <p className="mt-2 text-sm text-green-600 dark:text-green-400">{message}</p>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};