'use client'

import Link from 'next/link'
import Image from 'next/image'
import { useState } from 'react'
import {
    FiRefreshCcw,
    FiRadio,
    FiCompass,
    FiUser,
    FiPlayCircle,
    FiBarChart2,
    FiGift,
    FiChevronDown,
} from 'react-icons/fi'
import { FaTimes, FaRegStar } from 'react-icons/fa'
import SidebarSkeleton from './Skeletons/SidebarSkeleton'
import { useTranslation } from 'react-i18next'
import { usePopularLiveStreams } from '@/contexts/StreamsWsContext'

interface SidebarProps {
    isOpen: boolean
    onClose: () => void
    mode?: 'pinned' | 'drawer'
}

export default function Sidebar({ isOpen, onClose, mode = 'pinned' }: SidebarProps) {
    const [showMore, setShowMore] = useState(false)
    const { streams: popularStreamers, ready, refresh } = usePopularLiveStreams(10)
    const { t } = useTranslation()
    const isPinned = mode === 'pinned'
    const isLoading = !ready && popularStreamers.length === 0

    const categories = [
        { name: t('sidebar.categories.ranking'), icon: FiBarChart2 },
        { name: t('sidebar.categories.event'), icon: FiGift },
    ]

    return (
        <>
            {isOpen && (
                <div
                    className={`fixed inset-0 bg-black bg-opacity-50 z-[85] ${isPinned ? 'lg:hidden' : ''}`}
                    onClick={onClose}
                />
            )}
            <aside
                className={`sidebar-compact force-compact fixed left-0 top-0 h-screen w-64 bg-white dark:bg-[#0c0d0e] border-r border-gray-200 dark:border-gray-800 overflow-y-auto pt-16 shadow-sm z-[90] transform transition-transform duration-300 ease-in-out ${isPinned ? 'lg:transition-none' : ''} ${isOpen ? 'translate-x-0 is-open' : '-translate-x-full'
                    } ${isPinned ? 'lg:translate-x-0' : ''}`}
            >
                <button
                    onClick={onClose}
                    className={`absolute top-4 right-4 text-black hover:text-black ${isPinned ? 'lg:hidden' : ''}`}
                    aria-label={t('sidebar.closeMenu')}
                >
                    <FaTimes className="w-6 h-6" />
                </button>
                <div className="p-4 space-y-6 overflow-y-auto hide-scrollbar">
                    {isLoading ? (
                        <SidebarSkeleton />
                    ) : (
                        <>
                            <nav className="mb-8 nav-main border-b border-gray-200 dark:border-gray-800 pb-4">
                                <ul className="space-y-2">
                                    <li>
                                        <Link
                                            href="/live"
                                            className="flex items-center gap-3 px-4 py-3 text-black dark:text-white bg-gray-100 dark:bg-neutral-900 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                                        >
                                            <FiRadio className="w-5 h-5 flex-shrink-0" />
                                            <span className="font-semibold">{t('sidebar.nav.live')}</span>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link
                                            href="/explore"
                                            className="flex items-center gap-3 px-4 py-3 text-black dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-black dark:hover:text-white transition-colors"
                                        >
                                            <FiCompass className="w-5 h-5 flex-shrink-0" />
                                            <span>{t('sidebar.nav.explore')}</span>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link
                                            href="/my"
                                            className="flex items-center gap-3 px-4 py-3 text-black dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-black dark:hover:text-white transition-colors"
                                        >
                                            <FaRegStar className="w-5 h-5 flex-shrink-0" />
                                            <span>{t('sidebar.nav.favorites')}</span>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link
                                            href="/catch"
                                            className="flex items-center gap-3 px-4 py-3 text-black dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-black dark:hover:text-white transition-colors"
                                        >
                                            <FiPlayCircle className="w-5 h-5 flex-shrink-0" />
                                            <span>{t('sidebar.nav.catch')}</span>
                                        </Link>
                                    </li>
                                </ul>
                            </nav>

                            <div className="mb-6">
                                <div className="flex items-center justify-between pl-4 mb-3 popular-header">
                                    <h3 className="text-sm font-semibold text-gray-600 dark:text-gray-400">{t('sidebar.popular')}</h3>
                                    <button
                                        type="button"
                                        className="p-2 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
                                        aria-label={t('sidebar.refresh')}
                                        onClick={(e) => {
                                            e.stopPropagation()
                                            refresh()
                                        }}
                                    >
                                        <FiRefreshCcw className="w-4 h-4" />
                                    </button>
                                </div>
                                <div className="space-y-2 popular-list">
                                    {(showMore ? popularStreamers : popularStreamers.slice(0, 5)).map((streamer) => (
                                        <Link
                                            key={streamer.id}
                                            href={`/room/${streamer.id}`}
                                            className="popular-item flex items-center justify-between gap-3 px-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group"
                                        >
                                            <div className="flex items-center gap-3 min-w-0">
                                                <div className={`w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex-shrink-0 flex items-center justify-center overflow-hidden relative ${streamer.isLive ? 'border-2 border-red-500 live-border-animation' : ''}`}>
                                                    {streamer.avatar ? (
                                                        <Image
                                                            src={streamer.avatar}
                                                            alt={streamer.streamerName}
                                                            width={32}
                                                            height={32}
                                                            className="w-full h-full rounded-full object-cover"
                                                        />
                                                    ) : (
                                                        <FiUser className="w-4 h-4 text-gray-400 dark:text-gray-500" />
                                                    )}
                                                </div>
                                                <div className="popular-info flex-1 min-w-0">
                                                    <p className="text-black dark:text-white text-sm font-medium truncate group-hover:text-primary-600 dark:group-hover:text-primary-400">
                                                        {streamer.streamerName}
                                                    </p>
                                                    <p className="text-gray-600 dark:text-gray-400 text-xs truncate">
                                                        {streamer.category}
                                                    </p>
                                                </div>
                                            </div>
                                            {streamer.isLive && (
                                                <div className="popular-viewers flex items-center gap-1 text-xs text-red-500 dark:text-red-400 whitespace-nowrap">
                                                    <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
                                                    <span>{streamer.viewerCount.toLocaleString()}</span>
                                                </div>
                                            )}
                                        </Link>
                                    ))}
                                </div>
                                {popularStreamers.length > 5 && (
                                    <button
                                        onClick={() => setShowMore(!showMore)}
                                        className="popular-toggle w-full mt-2 px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors flex items-center gap-2 justify-start"
                                    >
                                        <FiChevronDown className={`w-4 h-4 transition-transform ${showMore ? 'rotate-180' : ''}`} />
                                        <span>{showMore ? t('sidebar.toggleLess') : t('sidebar.toggleMore')}</span>
                                    </button>
                                )}
                            </div>

                            <div className="border-t border-gray-200 dark:border-gray-800 pt-4">
                                <div className="space-y-2 category-list">
                                    {categories.map((category) => {
                                        const IconComponent = category.icon
                                        return (
                                            <Link
                                                key={category.name}
                                                href={`/category/${category.name}`}
                                                className="category-item flex items-center gap-3 px-4 py-2 text-black dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-black dark:hover:text-white transition-colors"
                                            >
                                                <IconComponent className="w-5 h-5 flex-shrink-0" />
                                                <span className="text-sm">
                                                    {category.name}
                                                </span>
                                            </Link>
                                        )
                                    })}
                                </div>
                            </div>
                        </>
                    )}
                </div>
            </aside>
        </>
    )
}