// SupabaseRealtimeSubscription.jsx
import React, { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

// Replace with your Supabase URL and anon key
const supabaseUrl = 'https://your-project-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

const SupabaseRealtimeSubscription = () => {
  const [data, setData] = useState([]);
  const [status, setStatus] = useState('Connecting...');
  const tableName = 'your_table_name'; // Replace with your table name

  useEffect(() => {
    // Fetch initial data
    const fetchData = async () => {
      try {
        const { data, error } = await supabase
          .from(tableName)
          .select('*');

        if (error) {
          throw error;
        }

        setData(data);
        setStatus('Connected and listening for changes');
      } catch (error) {
        console.error('Error fetching data:', error);
        setStatus(`Error: ${error.message}`);
      }
    };

    fetchData();

    // Set up real-time subscription
    const subscription = supabase
      .channel('table-changes')
      .on(
        'postgres_changes',
        {
          event: '*', // Listen for all events (INSERT, UPDATE, DELETE)
          schema: 'public',
          table: tableName,
        },
        (payload) => {
          console.log('Change received:', payload);

          // Handle different event types
          switch (payload.eventType) {
            case 'INSERT':
              setData((currentData) => [...currentData, payload.new]);
              break;
            case 'UPDATE':
              setData((currentData) =>
                currentData.map((item) =>
                  item.id === payload.new.id ? payload.new : item
                )
              );
              break;
            case 'DELETE':
              setData((currentData) =>
                currentData.filter((item) => item.id !== payload.old.id)
              );
              break;
            default:
              break;
          }
        }
      )
      .subscribe((status) => {
        console.log('Subscription status:', status);

        if (status === 'SUBSCRIBED') {
          setStatus('Connected and listening for changes');
        } else if (status === 'CHANNEL_ERROR') {
          setStatus('Subscription error');
        }
      });

    // Cleanup subscription on component unmount
    return () => {
      supabase.removeChannel(subscription);
    };
  }, [tableName]);

  return (
    <div>
      <h2>Real-time Supabase Table: {tableName}</h2>
      <p>Status: {status}</p>
      <h3>Data:</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default SupabaseRealtimeSubscription;