// @ts-nocheck

'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { CiCalendar } from 'react-icons/ci';
import { formattedDate, toWeekDay } from '@/utils/helpers';
import { createClient } from '@/utils/supabase/client';
import { Event } from '@/types/types';

export default function Events() {
  const supabase = createClient();
  const router = useRouter();
  const [events, setEvents] = useState<Event[]>([]);

  useEffect(() => {
    const fetchEvents = async () => {
      const { data, error } = await supabase
        .from('events')
        .select('*')
        .order('from_date', { ascending: true });

      if (error) {
        console.error('Error fetching events:', error.message);
        return;
      }

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // Filter events to only show future ones or those happening today
      const filteredEvents = data.filter((event) => {
        const eventDate = new Date(event.from_date);
        eventDate.setHours(0, 0, 0, 0);
        return eventDate >= today;
      });

      setEvents(filteredEvents);
    };

    fetchEvents();
  }, [supabase]);

  const handleEventReservation = (event: Event) => {
    // Store event data in sessionStorage for retrieval on the reservations page
    sessionStorage.setItem('selectedEvent', JSON.stringify(event));
    router.push('/reservations');
  };

  return (
    <div className="max-w-6xl mx-auto">
      <h1 className="text-3xl font-bold text-center">Събития</h1>
      <div className="h-4" />
      <div className="flex flex-col max-w-xl mx-auto">
        {events.map((event, index) => (
          <div
            key={index}
            className="flex bg-orange-100 rounded-lg shadow-lg mb-2 overflow-hidden"
          >
            <div className="text-xl bg-orange-200 p-2 py-4 text-center">
              <CiCalendar className="mx-auto" />
              <span className="font-bold text-nowrap">
                {formattedDate(new Date(event.from_date))}
              </span>
              <br />
              {toWeekDay(new Date(event.from_date))}
              <br />
              <span className="font-base">{new Date(event.from_date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
            </div>
            <div className="card-body py-3 px-3">
              <h2 className="card-title text-base md:text-xl">{event.title}</h2>
              <p className="text-sm md:text-md">{event.description}</p>
              <div className="card-actions justify-center align-center items-center ">
                <p>{event.price} лв. на човек</p>
                <button
                  className="btn btn-error btn-outline btn-sm"
                  onClick={() => handleEventReservation(event)}
                >
                  Запиши се!
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="h-10" />
    </div>
  );
}