import React, { useState } from 'react';
import { initializeSupabase, testDatabaseConnection, disconnectSupabase } from '../services/supabaseClient';
import { PlugIcon } from './icons/PlugIcon';
import { LoadingSpinner } from './LoadingSpinner';

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

export const SupabaseConnector: React.FC<SupabaseConnectorProps> = ({ onSuccess }) => {
    const [url, setUrl] = useState('');
    const [anonKey, setAnonKey] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handleConnect = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        setError(null);

        const client = initializeSupabase(url, anonKey);
        if (!client) {
            setError("Failed to initialize client. Check credentials.");
            setIsLoading(false);
            return;
        }

        const { success, error: testError } = await testDatabaseConnection();

        if (success) {
            localStorage.setItem('supabaseUrl', url);
            localStorage.setItem('supabaseAnonKey', anonKey);
            onSuccess();
        } else {
            setError(testError || 'Connection failed. Please check your URL, Key, and RLS policies.');
            disconnectSupabase(); // Clear the invalid client
        }

        setIsLoading(false);
    };

    return (
        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
            <h3 className="text-lg font-bold text-gray-800 dark:text-white flex items-center mb-3">
                <PlugIcon className="w-6 h-6 mr-2 text-brand-primary" />
                Connect to Database
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                To save and view flyer history, connect to your Supabase project. This is optional.
            </p>
            <form onSubmit={handleConnect} className="space-y-4">
                <div>
                    <label htmlFor="supabase-url" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Supabase URL
                    </label>
                    <input
                        type="url"
                        id="supabase-url"
                        value={url}
                        onChange={(e) => setUrl(e.target.value)}
                        required
                        className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
                        placeholder="https://your-project.supabase.co"
                    />
                </div>
                <div>
                    <label htmlFor="supabase-key" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Supabase Anon Key
                    </label>
                    <input
                        type="text"
                        id="supabase-key"
                        value={anonKey}
                        onChange={(e) => setAnonKey(e.target.value)}
                        required
                        className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
                        placeholder="ey..."
                    />
                </div>
                <button
                    type="submit"
                    disabled={isLoading}
                    className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 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>
                            Connecting...
                        </>
                    ) : (
                        'Connect & Save'
                    )}
                </button>
                {error && (
                    <div className="mt-3 text-sm p-2 rounded bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300">
                        {error}
                    </div>
                )}
            </form>
        </div>
    );
};