function SupabaseConfig({ onConnect }) {
    const [url, setUrl] = React.useState('');
    const [key, setKey] = React.useState('');
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');

    React.useEffect(() => {
        const config = window.SupabaseUtils.getSupabaseConfig();
        if (config.url) setUrl(config.url);
        if (config.key) setKey(config.key);
    }, []);

    const handleConnect = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        try {
            if (!url || !key) {
                throw new Error("URL dan Key harus diisi");
            }

            // Init client
            const client = window.SupabaseUtils.initClient(url, key);
            
            // Check connection
            const check = await window.SupabaseUtils.checkConnection();
            if (!check.success) {
                // If there's a specific message, show it
                if (check.message) {
                    throw new Error(check.message);
                }
                // If it's a warning (like table missing), we can proceed but maybe warn?
                if (check.warning) {
                    // For now, we consider it connected, but the app will show errors on list
                    console.warn(check.warning);
                }
            }
            
            onConnect();
        } catch (err) {
            setError(window.SupabaseUtils.formatError(err));
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4" data-name="supabase-config" data-file="components/SupabaseConfig.js">
            <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
                <div className="flex justify-center mb-6">
                    <img 
                        src={window.AppAssets.logo} 
                        alt="Logo Pondok" 
                        className="w-20 h-20 object-contain" 
                    />
                </div>
                <h2 className="text-2xl font-bold text-center text-gray-800 mb-2">Konfigurasi Database</h2>
                <p className="text-center text-gray-500 mb-6 text-sm">
                    Kredensial database telah terdeteksi. Silakan klik hubungkan.
                </p>

                {error && (
                    <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm border border-red-200 break-words">
                        <strong>Error:</strong> {error}
                    </div>
                )}

                <form onSubmit={handleConnect} className="space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Supabase URL</label>
                        <input 
                            type="text" 
                            className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none bg-gray-50"
                            placeholder="https://xyz.supabase.co"
                            value={url}
                            onChange={(e) => setUrl(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Supabase Anon Key</label>
                        <input 
                            type="password" 
                            className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none bg-gray-50"
                            placeholder="eyJhbGciOiJIUzI1NiIsInR..."
                            value={key}
                            onChange={(e) => setKey(e.target.value)}
                        />
                    </div>
                    
                    <button 
                        type="submit" 
                        disabled={loading}
                        className="w-full bg-[var(--primary-color)] hover:bg-[var(--primary-hover)] text-white py-2 rounded transition-colors flex justify-center items-center gap-2"
                    >
                        {loading ? 'Menghubungkan...' : 'Hubungkan Database'}
                        {!loading && <div className="icon-arrow-right text-lg"></div>}
                    </button>
                </form>

                <div className="mt-6 p-4 bg-blue-50 rounded-md text-xs text-blue-800 border border-blue-100">
                    <strong>Status Project:</strong>
                    <ul className="list-disc pl-4 mt-2 space-y-1">
                        <li>URL Project: {url ? 'Terisi' : 'Kosong'}</li>
                        <li>Kunci API: {key ? 'Terisi' : 'Kosong'}</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}