/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from "react"
import styles from "./event.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import { FaCalendarCheck, FaRegClock } 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 Pagination from "@/components/shared/Pagination"
import { usePaginatedData } from "@/hooks/use-paginated-data"
import NoResults from "@/components/dashboard/NoResults"
import { truncateEmail } from "@/lib/utils/truncate-email"
import { formatDate } from "@/lib/utils/format-date"
import { formatMoneyComplete } from "@/lib/utils/format-money"
import eventImg from "../../../../images/blog-img.jpg"

const TableSkeleton = ({ fading }: { fading: boolean }) => (
  <div
    className={`${styles.eventTable__skeleton} ${
      fading ? styles.fadeOut : ""
    }`}
  >
    {[...Array(5)].map((_, i) => (
      <div key={i} className={styles.eventTable__skeletonRow}>
        {[...Array(5)].map((_, j) => (
          <div key={j} className={styles.eventTable__skeletonCell} />
        ))}
      </div>
    ))}
  </div>
)

const EventPage = ({ event, subscribers, perPage: initialPerPage = 10 }: any) => {
  const remainingSeats = event.total_slots - event.reserved_slots
  const isSoldOut = remainingSeats <= 0

  const [fadeSkeleton, setFadeSkeleton] = useState(false)

  const {
    loading: isLoading,
    setLoading,
    handlePageChange,
  } = usePaginatedData(initialPerPage)

  useEffect(() => {
    setLoading(true)
    const fade = setTimeout(() => setFadeSkeleton(true), 1200)
    const done = setTimeout(() => setLoading(false), 1500)

    return () => {
      clearTimeout(fade)
      clearTimeout(done)
    }
  }, [])

  return (
    <div className={styles.event}>
      <div className={styles.event__inner}>

        {/* HERO HEADER */}
        <div className={styles.event__hero}>
          <div
            className={styles.event__heroImage}
            style={{ backgroundImage: `url(${event.cover_image || eventImg})` }}
          />
          <div className={styles.event__heroOverlay}>
            {isSoldOut && <span className={styles.soldOutBadge}>Sold Out</span>}
            <h1>{event.name}</h1>
            <p>{event.location}</p>
          </div>
        </div>

        {/* META GRID */}
        <div className={styles.event__metaGrid}>
          <span><FaCalendarCheck /> {formatPrettyDate(event.date)}</span>
          <span><FaRegClock /> {event.time}</span>
          <span>Total Seats: {event.total_slots}</span>
          <span className={isSoldOut ? styles.metaDanger : ""}>
            Remaining: {remainingSeats}
          </span>
          <span>Type: {capitalizeFirstLetter(event.event_type)}</span>
          <span>
            <IoPricetags />
            {event.fee_type === "free"
              ? " Free"
              : ` ${formatMoneyComplete(event.price)}`}
          </span>
        </div>

        {/* DESCRIPTION */}
        <p className={styles.event__description}>{event.description}</p><hr />

        <div style={{ paddingTop: "1rem" }}>
          <h2>Event Subscribers</h2>
          <p>See the list of every user that has reserved a ticket for this event</p>
        </div>
        {/* TABLE */}
        <div className={styles.eventTable}>
          <div className={styles.eventTable__content}>
            <div className={styles.eventTable__tableWrapper}>

              <div className={styles.eventTable__table}>
                <span>Reference</span>
                <span>Name</span>
                <span>Email</span>
                <span>Amount</span>
                <span>Date</span>
              </div>

              <div className={styles.eventTable__children}>
                {isLoading ? (
                  <TableSkeleton fading={fadeSkeleton} />
                ) : subscribers?.data?.length === 0 ? (
                  <NoResults
                    title="No Subscribers"
                    description="This event has no subscribers yet."
                  />
                ) : (
                  subscribers.data.map((subscriber: any) => (
                    <div
                      key={subscriber.id}
                      className={styles.eventTable__childrenItem}
                    >
                      <span>{subscriber.reference}</span>
                      <span>{subscriber.name}</span>
                      <span>{truncateEmail(subscriber.email)}</span>
                      <span>
                        {event.fee_type === "free"
                          ? "Free"
                          : formatMoneyComplete(subscriber.amount)}
                      </span>
                      <span>{formatDate(subscriber.created_at)}</span>
                    </div>
                  ))
                )}
              </div>

            </div>
          </div>
        </div>

        {/* PAGINATION */}
        <div className={styles.attend__pagination}>
          {subscribers?.links?.length > 0 && (
            <Pagination
              links={subscribers.links}
              onChange={handlePageChange}
            />
          )}
        </div>

      </div>
    </div>
  )
}

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

export default EventPage