'use client'

import { useState, useEffect, useRef } from 'react'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation } from 'swiper/modules'
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
import EventBannersSkeleton from './Skeletons/EventBannersSkeleton'
import { useTranslation } from 'react-i18next'

import 'swiper/css'
import 'swiper/css/navigation'

type BannerBadge = 'live' | 'alarm' | null

interface Banner {
    id: string
    title: string
    subtitle: string
    date: string
    image: string
    badge: BannerBadge
    url: string | null
}

export default function EventBanners() {
    const { t } = useTranslation()
    const [isLoading, setIsLoading] = useState(true)
    const [banners, setBanners] = useState<Banner[]>([])
    const prevRef = useRef<HTMLButtonElement | null>(null)
    const nextRef = useRef<HTMLButtonElement | null>(null)

    useEffect(() => {
        const fetchBanners = async () => {
            try {
                const response = await fetch('/api/event-banners')
                const data = await response.json()

                if (data.ok && data.banners) {
                    setBanners(data.banners)
                }
            } catch (error) {
                console.error('Failed to fetch event banners:', error)
            } finally {
                setIsLoading(false)
            }
        }

        fetchBanners()
    }, [])

    if (isLoading) {
        return <EventBannersSkeleton />
    }

    if (banners.length === 0) {
        return null
    }

    return (
        <section className="popular-wrapper px-5">
            <div className="relative main_banner pt-4 pb-6">
                <Swiper
                    modules={[Navigation]}
                    spaceBetween={18}
                    slidesPerView={1.15}
                    breakpoints={{
                        640: { slidesPerView: 1.2 },
                        900: { slidesPerView: 2 },
                        1280: { slidesPerView: 3 },
                    }}
                    navigation={{
                        prevEl: prevRef.current,
                        nextEl: nextRef.current,
                    }}
                    onBeforeInit={(swiper) => {
                        // @ts-ignore
                        swiper.params.navigation.prevEl = prevRef.current
                        // @ts-ignore
                        swiper.params.navigation.nextEl = nextRef.current
                    }}
                    className="banner_list"
                >
                    {banners.map((banner) => (
                        <SwiperSlide key={banner.id}>
                            <div className="relative h-[110px]">
                                <a
                                    href={banner.url || '#'}
                                    className="flex h-full overflow-hidden rounded-[15px] bg-gray-100 dark:bg-[#232529] gap-2 border border-gray-200 dark:border-gray-700 cursor-pointer"
                                    onClick={(e) => {
                                        if (!banner.url) {
                                            e.preventDefault()
                                        }
                                    }}
                                >
                                    <span className="thumb flex items-end flex-shrink-0 pl-1">
                                        <Image
                                            src={banner.image}
                                            alt={banner.title}
                                            width={140}
                                            height={110}
                                            className="h-full w-[140px] object-cover"
                                            unoptimized
                                        />
                                    </span>
                                    <div className="info pt-3">
                                        <span className="date text-[13px] text-gray-600 dark:text-[#D5D7DC]">{banner.date}</span>
                                        <strong className="block pt-1.5 pb-1 text-[15px] font-medium text-gray-900 dark:text-[#FCFCFD]">
                                            {banner.title}
                                        </strong>
                                        <p className="text-[14px] text-gray-600 dark:text-[#D5D7DC] leading-snug">
                                            {banner.subtitle}
                                        </p>
                                    </div>
                                </a>
                                {banner.badge === 'live' && (
                                    <button
                                        type="button"
                                        className="absolute top-2 left-3 bg-[#ff2f00] text-white text-[11px] px-3 h-5 rounded-full font-medium leading-5"
                                        aria-label={t('eventBanners.live')}
                                    >
                                        {t('eventBanners.live')}
                                    </button>
                                )}
                                {banner.badge === 'alarm' && (
                                    <button
                                        type="button"
                                        className="absolute top-0 left-5 bg-white dark:bg-[#0c0d0e] text-gray-600 dark:text-[#D5D7DC] w-[30px] h-[29px] rounded-b-full shadow-sm text-[0]"
                                        aria-label={t('eventBanners.info')}
                                    >
                                        <span className="sr-only">{t('eventBanners.info')}</span>
                                    </button>
                                )}
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>

                <div className="pointer-events-none absolute top-1/2 -translate-y-1/2 left-[-16px] right-[-16px] flex items-center justify-between px-2 md:px-0 z-10 text-sm text-gray-600 dark:text-gray-300">
                    <button
                        ref={prevRef}
                        className="pointer-events-auto w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition flex items-center justify-center shadow cursor-pointer"
                        aria-label={t('eventBanners.prev')}
                        type="button"
                    >
                        <FiChevronLeft className="w-5 h-5" />
                    </button>
                    <button
                        ref={nextRef}
                        className="pointer-events-auto w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition flex items-center justify-center shadow cursor-pointer"
                        aria-label={t('eventBanners.next')}
                        type="button"
                    >
                        <FiChevronRight className="w-5 h-5" />
                    </button>
                </div>
            </div>
            <div className="divider h-px bg-gray-200 dark:bg-neutral-900 mt-6" />
        </section>
    )
}