"use client";

import { useEffect, useState } from "react";

import FormModal from "@/components/FormModal";
import Image from "next/image";
import { getEventById } from "../../../../../../lib/api";
import { useRouter } from "next/router";

interface Event {
  eventId: number;
  title: string;
  description: string;
  date: string;
  venue: string;
  startTime: string;
  endTime: string;
  image?: string;
}

const SingleEventPage = () => {
  const router = useRouter();
  const { eventId } = router.query;

  const [event, setEvent] = useState<Event | null>(null);
  const [loading, setLoading] = useState(true);
  const [role, setRole] = useState<string>("");

  useEffect(() => {
    if (eventId) {
      const fetchEventData = async () => {
        try {
          const data = await getEventById(Number(eventId));  // Fetch event by ID
          setEvent(data);
        } catch (error) {
          console.error("Error fetching event data:", error);
        } finally {
          setLoading(false);
        }
      };

      fetchEventData();
    //   setRole("admin"); 
    }
  }, [eventId]);

  if (loading) {
    return <p>Loading event...</p>;
  }

  if (!event) {
    return <p>Event not found.</p>;
  }

  return (
    <div className='flex-1 p-4 flex flex-col gap-4 xl:flex-row w-full'>
      <div className="w-full">
        {/* TOP */}
        <div className="flex flex-col lg:flex-row gap-4 w-full">
          {/* USER INFO CARD */}
          <div className="bg-slate-400 py-6 px-4 rounded-md flex gap-4 w-full h-48 mt-4">
            <div className="w-1/3">
            <Image src={event.image || '/singleEvent.png'} alt="Event Image" width={100} height={100} />
            </div>
            <div className="w-2/3 flex flex-col justify-between gap-2">
              <div className="flex items-center gap-4">
                <h1 className="text-xl font-semibold">{event.title}</h1>
                <FormModal table="Events" type="update" />
              </div>
              <div className="flex items-center justify-between gap-2 flex-wrap text-xs font-medium">
                <div className="w-full md:w-1/3 flex items-center gap-2">
                  <Image src='/role.png' alt="" width={18} height={18} />
                  <span className="text-lg font-medium text-gray-700">Event ID: {event.eventId}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* EVENT DESCRIPTION */}
        <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
          <h2 className="text-lg font-semibold mb-4">Description</h2>
          <div className="bg-white p-6 rounded-lg shadow w-full">
            <h3 className="text-xl font-semibold mb-2">{event.title}</h3>
            <p className="text-gray-700 text-base">{event.description}</p>
          </div>
        </div>
        {/* EVENT INFORMATION */}
        <div className="mt-4 bg-slate-300 py-6 px-4 rounded-md w-full">
          <h2 className="text-lg font-semibold mb-4">Event Information</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
            {/* EVENT DATE */}
            <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
              <Image src='/date_joined.png' alt="" width={18} height={18} />
              <span className="font-medium">{event.date}</span>
            </div>
            {/* EVENT LOCATION */}
            <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
              <Image src='/location.png' alt="" width={18} height={18} />
              <span className="font-medium">{event.venue}</span>
            </div>
            {/* START TIME */}
            <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
              <Image src='/time.png' alt="" width={18} height={18} />
              <span className="font-medium">{event.startTime}</span>
            </div>
            {/* END TIME */}
            <div className="bg-white p-4 rounded-lg shadow flex items-center gap-4">
              <Image src='/time.png' alt="" width={18} height={18} />
              <span className="font-medium">{event.endTime}</span>
            </div>
          </div>
        </div>
        {/* Notes */}
        <div className="bg-white p-4 rounded-lg shadow flex flex-col gap-2 col-span-full mt-4">
          <h3 className="text-md font-semibold">Notes</h3>
          <textarea
            className="w-full p-2 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-400"
            rows={4}
            placeholder="Leave a note about this event..."
          ></textarea>
        </div>
      </div>
    </div>
  );
};

export default SingleEventPage;
