'use client';

import { useState, useEffect } from 'react';
import { supabaseClient } from '@/lib/supabase/client';

export function SupabaseTest() {
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
  const [data, setData] = useState<any>(null);
  const [errorMsg, setErrorMsg] = useState<string>('');

  useEffect(() => {
    async function testConnection() {
      try {
        console.log('Testing Supabase connection...');
        const { data, error } = await supabaseClient
          .from('mission_control_documents')
          .select('count');
        
        if (error) {
          console.error('Supabase error:', error);
          setStatus('error');
          setErrorMsg(error.message);
        } else {
          console.log('Supabase success:', data);
          setStatus('success');
          setData(data);
        }
      } catch (err: any) {
        console.error('Exception:', err);
        setStatus('error');
        setErrorMsg(err.message || 'Unknown error');
      }
    }

    testConnection();
  }, []);

  if (status === 'loading') return <div>Testing Supabase...</div>;
  if (status === 'error') return <div className="text-red-500">Error: {errorMsg}</div>;
  return <div className="text-green-500">Connected! Count: {JSON.stringify(data)}</div>;
}