// @ts-nocheck
'use client';
import { createContext, useContext, useState, useEffect, useCallback, Suspense } from 'react';
import { createClient } from '@/utils/supabase/client';
import { useSyncedDate } from '@/hooks/useSyncedDate';
import { Event } from '@/types/event';

type EventsContextType = {
  events: Event[];
  selectedDate: Date | null;
  setSelectedDate: (date: Date | null) => void;
  fetchEvents: (date: Date) => void;
  updateEvent: (id: string, updatedFields: Partial<Event>) => void;
  createEvent: () => Promise<string | null>;
  deleteEvent: (id: string) => void;
};

const EventsContext = createContext<EventsContextType | null>(null);

// Client component that uses useSyncedDate (uses searchParams)
function EventsProviderClient({ children }: { children: React.ReactNode }) {
  const supabase = createClient();
  const [events, setEvents] = useState<Event[]>([]);
  const [selectedDate, setSelectedDate] = useSyncedDate();

  const fetchEvents = useCallback(async (date: Date) => {
    const dateStart = new Date(date);
    dateStart.setHours(0, 0, 0, 0);
    const dateEnd = new Date(date);
    dateEnd.setHours(23, 59, 59, 999);

    const { data, error } = await supabase
      .from('events')
      .select('*')
      .gte('from_date', dateStart.toISOString())
      .lte('from_date', dateEnd.toISOString())
      .order('from_date', { ascending: true });

    if (error) {
      console.error('Error fetching events:', error.message);
      return;
    }
    setEvents(data || []);
  }, [supabase]);

  useEffect(() => {
    if (selectedDate) fetchEvents(selectedDate);
  }, [selectedDate, fetchEvents]);

  const updateEvent = useCallback(async (id: string, updatedFields: Partial<Event>) => {
    if (!supabase) {
      console.error('Supabase client is not available');
      return;
    }

    const { error } = await supabase
      .from('events')
      .update(updatedFields)
      .eq('id', id);

    if (error) {
      console.error('Error updating event:', error.message);
      return;
    }

    setEvents((prevEvents) =>
      prevEvents.map((event) =>
        event.id === id ? { ...event, ...updatedFields } : event
      )
    );
  }, [supabase]);

  const createEvent = useCallback(async (): Promise<string | null> => {
    if (!selectedDate) return null;

    const fromDate = new Date(selectedDate);
    fromDate.setHours(20, 0, 0, 0);

    const toDate = new Date(fromDate);
    toDate.setHours(22, 0, 0, 0);

    const { data, error } = await supabase
      .from('events')
      .insert({
        title: 'New Event',
        description: 'No description',
        from_date: fromDate.toISOString(),
        to_date: toDate.toISOString(),
        price: 0
      })
      .select();

    if (error) {
      console.error('Error creating event:', error.message);
      return null;
    }

    const createdEvent = data?.[0];
    setEvents((prevEvents) => [...prevEvents, createdEvent]);
    return createdEvent?.id || null;
  }, [supabase, selectedDate]);

  const deleteEvent = useCallback(async (id: string) => {
    const { error } = await supabase.from('events').delete().eq('id', id);

    if (error) {
      console.error('Error deleting event:', error.message);
      return;
    }

    setEvents((prevEvents) => prevEvents.filter((event) => event.id !== id));
  }, [supabase]);

  return (
    <EventsContext.Provider
      value={{
        events,
        selectedDate,
        setSelectedDate,
        fetchEvents,
        updateEvent,
        createEvent,
        deleteEvent
      }}
    >
      {children}
    </EventsContext.Provider>
  );
}

// Main provider component that uses Suspense
export function EventsProvider({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<div>Loading events...</div>}>
      <EventsProviderClient>{children}</EventsProviderClient>
    </Suspense>
  );
}

export function useEvents() {
  const context = useContext(EventsContext);
  if (context === null) {
    throw new Error('useEvents must be used within an EventsProvider');
  }
  return context;
}