/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from 'react';
import { Link, usePage } from '@inertiajs/react';
import { FaCalendarCheck, FaRegClock, FaMap } from "react-icons/fa6";
// import { BiSolidEdit } from "react-icons/bi";
// import { MdDelete } from "react-icons/md";
import { IoPricetags } from "react-icons/io5";
import { router } from '@inertiajs/react';

import styles from './event.module.scss';
import eventImg from "../../../../../public/event-img2.avif";

import CreateEventModal from '@/components/admin/Modals/CreateEventModal';
import DeleteConfirmationModal from '@/components/admin/Modals/DeleteConfirmationModal';
import { truncateText } from '@/lib/utils/truncate-text';
import { formatReadableDate } from '@/lib/utils/format-date-readable';
import { formatTimeToAMPM } from '@/lib/utils/format-time-to-am';
import { capitalizeFirstLetter } from '@/lib/utils/capitalise-first-letter';

const EventCard = ({ event }: any) => {
  const {
    id,
    name,
    status,
    date,
    time,
    location,
    description,
    reserved_slots,
    total_slots, 
    fee_type, 
    price
  } = event;

  const [isAdmin, setIsAdmin] = useState(false);
  const [eventModal, setEventModal] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);
  const [loading, setLoading] = useState(false)

  const { url } = usePage();

  useEffect(() => {
    setIsAdmin(url.startsWith('/admin/events'));
  }, [url]);

  const seatsRemaining = total_slots - reserved_slots;
  const progressPercent = (reserved_slots / total_slots) * 100;

   const handleBookSeat = () => {
    if (loading) return
    setLoading(true)
    router.post(
      route("events.subscribe", event.id),
      {},
      {
        preserveScroll: true,
        onFinish: () => setLoading(false)
      }
    )
  }

  return (
    <>
      {eventModal && (
        <CreateEventModal
          type="update"
          event={event}
          closeModal={() => setEventModal(false)}
        />
      )}

      {deleteModal && (
        <DeleteConfirmationModal
          deleteUrl={ route("admin_event_delete", id) }
          title="Delete Event"
          description="You are about to delete the selected event and it will no longer be available to users. Please be sure before you proceed."
          closeModal={() => setDeleteModal(false)}
        />
      )}

      <div className={styles["event"]}>
        {/* Top Section with Banner and Status */}
        <div className={styles["event--top"]}>
          <div className={styles["event--top--overlay"]}></div>
          <h3 className={styles["event--top--status"]}>
            {capitalizeFirstLetter(status)}
          </h3>
          <img src={eventImg} alt="thumbnail" />
        </div>

        {/* Event Details */}
        <div className={styles["event--body"]}>
          <h1>{name}</h1>
          <p>{truncateText(description)}</p>

          <span>
            <FaCalendarCheck color="#F79318" /> &nbsp;{formatReadableDate(date)}
          </span>
          <span>
            <FaRegClock color="#F79318" /> &nbsp;{formatTimeToAMPM(time)}
          </span>
          <span>
            <FaMap color="#F79318" /> &nbsp;{truncateText(location)}
          </span>
          <span>
            <IoPricetags color="#F79318" /> &nbsp; Fee - { fee_type === "free" ? "Free" : `$${price}` }
          </span>

          {/* Seat Booking Progress */}
          <div className={styles["event--body--progress"]}>
            <div className={styles["progress-bar"]}>
              <div
                className={styles["progress-bar__bought"]}
                style={{ width: `${progressPercent}%` }}
              ></div>
            </div>
            <div className={styles["progress-info"]}>
              <span>Booked: {reserved_slots}</span>
              <span>Remaining: {seatsRemaining}</span>
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        {!isAdmin ? (
          <div className={styles["event--buttons"]}>
            <button className={styles.event__bookButton} onClick={handleBookSeat} disabled={loading}>
          {loading ? "Processing..." : "Book A Seat"}
        </button>
            <Link href={`/dashboard/events/${id}`}>More Details</Link>
          </div>
        ) : (
          <div className={styles["event--buttons"]}>
            <div
              onClick={() => router.get(`/admin/events/${id}`)}
              className={styles["event--buttons--view"]}
            >
              View 
            </div>
            <div
              onClick={() => setEventModal(true)}
              className={styles["event--buttons--edit"]}
            >
              Update 
            </div>
            <div
              onClick={() => setDeleteModal(true)}
              className={styles["event--buttons--delete"]}
            >
              Delete
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default EventCard;