/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useState, useEffect } from "react"

import styles from "./event.module.scss"

import UserDashboardLayout from "@/layouts/user_dashboard_layout"

import Back from "@/components/shared/Back"

import {
  FaCalendarCheck,
  FaRegClock,
  FaMap,
} from "react-icons/fa6"

import { IoPricetags } from "react-icons/io5"

import { formatPrettyDate } from "@/lib/utils/format-pretty-date"

import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter"

import { router } from "@inertiajs/react"

import eventImg from "../../../../../public/event-img2.avif"

const EventSkeleton = ({
  fading,
}: {
  fading: boolean
}) => (
  <div
    className={`${styles.event} ${
      fading ? styles.fadeOut : ""
    }`}
  >
    <div className={styles.event__heroSkeleton} />

    <div className={styles.event__statsGrid}>
      {Array.from({ length: 4 }).map(
        (_, i) => (
          <div
            key={i}
            className={styles.skeletonStat}
          />
        )
      )}
    </div>

    <div
      className={styles.skeletonParagraph}
    />

    <div
      className={
        styles.skeletonParagraphSmall
      }
    />

    <div className={styles.event__gallery}>
      {Array.from({ length: 4 }).map(
        (_, i) => (
          <div
            key={i}
            className={
              styles.skeletonGalleryItem
            }
          />
        )
      )}
    </div>

    <div
      className={styles.skeletonNotice}
    />

    <div
      className={styles.skeletonButton}
    />
  </div>
)

const EventPage = ({
  event,
}: any) => {
  const [loading, setLoading] =
    useState(true)

  const [fadeSkeleton, setFadeSkeleton] =
    useState(false)

  const [lightbox, setLightbox] =
    useState<string | null>(null)

  const isSoldOut =
    event.total_slots <=
    event.reserved_slots

  const seatsRemaining =
    event.total_slots -
    event.reserved_slots

  useEffect(() => {
    const timer = setTimeout(
      () => setFadeSkeleton(true),
      1500
    )

    const finish = setTimeout(
      () => setLoading(false),
      1800
    )

    return () => {
      clearTimeout(timer)
      clearTimeout(finish)
    }
  }, [])

  const handleBookSeat = () => {
    if (isSoldOut) return

    router.post(
      route(
        "events.subscribe",
        event.id
      )
    )
  }

  if (loading)
    return (
      <EventSkeleton
        fading={fadeSkeleton}
      />
    )

  return (
    <div className={styles.event}>
      <Back route="dashboard/events" />

      {/* HERO */}

      <section
        className={styles.event__hero}
      >
        <div
          className={
            styles.event__heroImage
          }
          style={{
            backgroundImage: `url(${
              event.cover_image ||
              eventImg
            })`,
          }}
        />

        <div
          className={
            styles.event__heroOverlay
          }
        >
          <span
            className={
              styles.event__status
            }
          >
            {capitalizeFirstLetter(
              event.status
            )}
          </span>

          {isSoldOut && (
            <span
              className={
                styles.soldOutBadge
              }
            >
              Sold Out
            </span>
          )}

          <h1>{event.name}</h1>

          <p>{event.location}</p>
        </div>
      </section>

      {/* STATS */}

      <section
        className={
          styles.event__statsGrid
        }
      >
        <div
          className={styles.event__stat}
        >
          <FaCalendarCheck />

          <div>
            <span>Date</span>

            <strong>
              {formatPrettyDate(
                event.date
              )}
            </strong>
          </div>
        </div>

        <div
          className={styles.event__stat}
        >
          <FaRegClock />

          <div>
            <span>Time</span>

            <strong>
              {event.time}
            </strong>
          </div>
        </div>

        <div
          className={styles.event__stat}
        >
          <FaMap />

          <div>
            <span>Location</span>

            <strong>
              {event.location}
            </strong>
          </div>
        </div>

        <div
          className={styles.event__stat}
        >
          <IoPricetags />

          <div>
            <span>Price</span>

            <strong>
              {event.fee_type ===
              "free"
                ? "Free"
                : `$${event.price}`}
            </strong>
          </div>
        </div>
      </section>

      {/* DESCRIPTION */}

      <section
        className={
          styles.event__content
        }
      >
        <h3>
          About This Event
        </h3>

        <p>{event.description}</p>
      </section>

      {/* SEATS */}

      <section
        className={
          styles.event__bookingInfo
        }
      >
        <div>
          <span>
            Seats Remaining
          </span>

          <strong>
            {seatsRemaining}
          </strong>
        </div>

        <div>
          <span>
            Reserved Seats
          </span>

          <strong>
            {event.reserved_slots}
          </strong>
        </div>

        <div>
          <span>
            Total Capacity
          </span>

          <strong>
            {event.total_slots}
          </strong>
        </div>
      </section>

      {/* GALLERY */}

      {event.images?.length > 0 && (
        <section
          className={
            styles.event__gallerySection
          }
        >
          <h3>
            Event Gallery
          </h3>

          <div
            className={
              styles.event__gallery
            }
          >
            {event.images.map(
              (
                img: string,
                idx: number
              ) => (
                <div
                  key={idx}
                  className={
                    styles.event__galleryItem
                  }
                  onClick={() =>
                    setLightbox(img)
                  }
                >
                  <img
                    src={img}
                    alt=""
                  />
                </div>
              )
            )}
          </div>
        </section>
      )}

      {/* NOTICE */}

      <div
        className={
          styles.event__noticeCard
        }
      >
        <h6>
          Important Notice
        </h6>

        <p>
          Purchasing a seat grants
          you access to the official
          event communication group.
          Further instructions and
          attendance details will be
          shared there.
        </p>
      </div>

      {/* CTA */}

      <button
        className={`${styles.event__bookButton} ${
          isSoldOut
            ? styles.disabled
            : ""
        }`}
        onClick={handleBookSeat}
        disabled={isSoldOut}
      >
        {isSoldOut
          ? "Event Sold Out"
          : "Book A Seat"}
      </button>

      {/* LIGHTBOX */}

      {lightbox && (
        <div
          className={styles.lightbox}
          onClick={() =>
            setLightbox(null)
          }
        >
          <img
            src={lightbox}
            alt=""
          />
        </div>
      )}
    </div>
  )
}

EventPage.layout = (
  page: React.ReactNode
) => (
  <UserDashboardLayout
    title="Event Details"
  >
    {page}
  </UserDashboardLayout>
)

export default EventPage