'use client';
import { useEvents } from './EventsProvider';
import Calendar from 'react-calendar';
import EventsList from './EventsList';
import { useEffect } from 'react';
import { createClient } from '@/utils/supabase/client';
import { FaPlus } from 'react-icons/fa';

export default function Events() {
  const supabase = createClient();
  const {
    selectedDate,
    setSelectedDate,
    fetchEvents,
    createEvent
  } = useEvents();

  const handleCreateEvent = async () => {
    const newEventId = await createEvent();
    if (newEventId) {
      const element = document.getElementById(newEventId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
        element.classList.add('highlight');
        setTimeout(() => {
          element.classList.remove('highlight');
        }, 1000);
      }
    }
  };

  // Real-time subscription to Supabase changes
  useEffect(() => {
    const subscription = supabase
      .channel('events')
      .on(
        'postgres_changes',
        { event: '*', schema: 'public', table: 'events' },
        (payload) => {
          if (selectedDate) fetchEvents(selectedDate); // Refresh if there are changes
        }
      )
      .subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, [selectedDate, fetchEvents, supabase]);

  return (
    <div className="flex flex-col lg:flex-row lg:gap-8">
      {/* Calendar Column */}
      <div className="lg:w-1/3 lg:sticky top-0 lg:h-screen lg:overflow-y-auto flex flex-col">
        <Calendar
          onChange={(value) => setSelectedDate(value as Date)}
          value={selectedDate}
        />
      </div>

      {/* Events List */}
      <div className="lg:w-2/3 display-flex flex-col">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl">
            <span style={{ fontFamily: 'arial' }}>
              {selectedDate?.toLocaleDateString('bg-BG')}
            </span>
          </h2>
          <button
            onClick={handleCreateEvent}
            className="text-white px-4 py-2 rounded btn btn-sm btn-primary"
          >
            <FaPlus className="inline-block mr-2" />
            Добави
          </button>
        </div>
        <div className="h-px mb-4"></div>
        <EventsList />
        <div className="h-px mt-20"></div>
      </div>
    </div>
  );
}