/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './events.module.scss'
import AdminDashboardLayout from '@/layouts/admin_layout'
import PageIntro from '@/components/dashboard/PageIntro'
import { useState, useEffect } from 'react'
import EventCard from '@/components/dashboard/EventCard'
import CreateEventModal from '@/components/admin/Modals/CreateEventModal'
import NoResults from '@/components/dashboard/NoResults'
import { usePaginatedData } from '@/hooks/use-paginated-data'
import Pagination from '@/components/shared/Pagination'

const EventSkeleton = () => (
  <div className={styles['event-skeleton']}>
    <div className={styles['event-skeleton__top']}>
      <div className={styles['event-skeleton__top__status']}></div>
    </div>
    <div className={styles['event-skeleton__body']}>
      <div className={styles['skeleton-title']}></div>
      <div className={styles['skeleton-intro']}></div>
      <div className={styles['skeleton-line']}></div>
      <div className={`${styles['skeleton-line']} ${styles.short}`}></div>
      <div className={styles['skeleton-line']}></div>
    </div>
    <div className={styles['event-skeleton__buttons']}>
      <div className={styles['skeleton-button']}></div>
      <div className={styles['skeleton-button']}></div>
    </div>
  </div>
)

const Events = ({ events }: any, initialPerPage: 10) => {
  const [toggleActive, setTogglActive] = useState(1)
  const [addEventModal, setAddEventModal] = useState(false)
  const [filters, setFilters] = useState({
    fee: [] as string[],
    type: [] as string[],
    status: [] as string[],
  })

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

  const toggleActiveState = (key: number) => {
    setTogglActive(key)
    setLoading(true)
  }

  const toggleCreateEvent = (key: number) => {
    setAddEventModal(!addEventModal)
    setTogglActive(key)
  }

  const closeCreateModal = () => {
    setAddEventModal(false)
    setTogglActive(1)
  }

  useEffect(() => {
    if (toggleActive === 1) {
      const timer = setTimeout(() => setLoading(false), 1000)
      return () => clearTimeout(timer)
    } else {
      setLoading(false)
    }
  }, [toggleActive, isLoading])

  const handleFilterChange = (category: string, value: string) => {
    setFilters(prev => {
      const current = prev[category as keyof typeof prev]
      const updated = current.includes(value)
        ? current.filter(v => v !== value)
        : [...current, value]
      return { ...prev, [category]: updated }
    })
  }

  const filteredEvents = events?.data?.filter((event: any) => {
    const feeMatch = filters.fee.length ? filters.fee.includes(event.fee_type) : true
    const typeMatch = filters.type.length ? filters.type.includes(event.type) : true
    const statusMatch = filters.status.length ? filters.status.includes(event.status) : true
    return feeMatch && typeMatch && statusMatch
  })

  const isEmpty = !isLoading && (!filteredEvents || filteredEvents.length === 0)

  return (
    <>
      {addEventModal && (
        <CreateEventModal type="add" closeModal={closeCreateModal} />
      )}

      <div className={styles['events']}>
        <PageIntro
          title="Events"
          description="Purchase trading signals by expert traders to improve your win probabilities"
        />

        <div className={styles['events__tab']}>
          <div
            onClick={() => toggleActiveState(1)}
            className={
              toggleActive === 1
                ? styles['events__tab--item--active']
                : styles['events__tab--item']
            }
          >
            Event Schedules
          </div>

          <div
            onClick={() => toggleActiveState(3)}
            className={
              toggleActive === 3
                ? styles['events__tab--item--active']
                : styles['events__tab--item']
            }
          >
            Event Subscribers
          </div>

          <div
            onClick={() => toggleCreateEvent(2)}
            className={
              toggleActive === 2
                ? styles['events__tab--item--active']
                : styles['events__tab--item']
            }
          >
            Create An Event
          </div>
        </div>

        {/* Filter Section */}
        {toggleActive === 1 && (
          <div className={styles['events__filters']}>
            {/* Fee Type */}
            <div className={styles['events__filters-group']}>
              <span>Fee:</span>
              <label>
                <input
                  type="checkbox"
                  checked={filters.fee.includes('free')}
                  onChange={() => handleFilterChange('fee', 'free')}
                /> Free
              </label>
              <label>
                <input
                  type="checkbox"
                  checked={filters.fee.includes('paid')}
                  onChange={() => handleFilterChange('fee', 'paid')}
                /> Paid
              </label>
            </div>

            {/* Event Type */}
            <div className={styles['events__filters-group']}>
              <span>Type:</span>
              <label>
                <input
                  type="checkbox"
                  checked={filters.type.includes('physical')}
                  onChange={() => handleFilterChange('type', 'physical')}
                /> Physical
              </label>
              <label>
                <input
                  type="checkbox"
                  checked={filters.type.includes('virtual')}
                  onChange={() => handleFilterChange('type', 'virtual')}
                /> Virtual
              </label>
            </div>

            {/* Status */}
            <div className={styles['events__filters-group']}>
              <span>Status:</span>
              <label>
                <input
                  type="checkbox"
                  checked={filters.status.includes('upcoming')}
                  onChange={() => handleFilterChange('status', 'upcoming')}
                /> Upcoming
              </label>
              <label>
                <input
                  type="checkbox"
                  checked={filters.status.includes('on-going')}
                  onChange={() => handleFilterChange('status', 'on-going')}
                /> Ongoing
              </label>
              <label>
                <input
                  type="checkbox"
                  checked={filters.status.includes('completed')}
                  onChange={() => handleFilterChange('status', 'completed')}
                /> Completed
              </label>
            </div>
          </div>
        )}

        { toggleActive === 3 && (
          <div>
            This is for people who have bought tickets
          </div>
        ) }

        {/* If empty and not loading → show full-width NoResults */}
        {isEmpty ? (
          <NoResults
            title="No Events"
            description="Oops! No events or no results matching your criterial"
          />
        ) : (
          toggleActive === 1 && (
            <div className={styles['events__events']} aria-busy={isLoading}>
              {isLoading ? (
                <>
                  {[...Array(4)].map((_, i) => (
                    <EventSkeleton key={i} />
                  ))}
                </>
              ) : (
                filteredEvents.map((event: any) => (
                  <EventCard key={event?.id} event={event} />
                ))
              )}
            </div>
          )
        )}
        { toggleActive === 1 && <div className={styles["attend__pagination"]}>
          {filteredEvents?.length > 0 && events?.links?.length > 0 && (
            <Pagination 
              links={events?.links} 
              onChange={handlePageChange} 
            />
          )}
        </div> }
      </div>
    </>
  )
}

Events.layout = (page: React.ReactNode) =>
  <AdminDashboardLayout children={page} title="manage events" />

export default Events