'use client'

import { useState, useEffect } from 'react'
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'
import BackToTop from '@/components/BackToTop'
import { useTranslation } from 'react-i18next'
import Link from 'next/link'
import Image from 'next/image'

interface FamilyItem {
    id: string
    name: string
    avatar?: string
    isVerified?: boolean
    artistsCount: number
    membersCount: number
}

export default function FamiliesPageClient() {
    const { t } = useTranslation()
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const [families, setFamilies] = useState<FamilyItem[]>([])
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchFamilies = async () => {
            setIsLoading(true)
            try {
                const response = await fetch('/api/group')
                const result = await response.json()
                if (result.ok) {
                    setFamilies(result.data || [])
                } else {
                    console.error('Failed to fetch families:', result.message)
                    setFamilies([])
                }
            } catch (error) {
                console.error('Error fetching families:', error)
                setFamilies([])
            } finally {
                setIsLoading(false)
            }
        }

        fetchFamilies()
    }, [])

    return (
        <>
            <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
            <div className="min-h-screen min-w-[375px] bg-[#FEFDFD] dark:bg-[#0c0d0e] flex overflow-x-auto md:overflow-x-hidden transition-colors">
                <Sidebar mode="drawer" isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
                <main
                    className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden transition-all pt-[6rem] md:pt-[6rem]"
                >
                    <div className="w-full max-w-[1200px] mx-auto px-4 sm:px-5 py-6 sm:py-12 overflow-x-hidden">
                        {/* Header */}
                        <div className="mb-6 sm:mb-8">
                            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
                                <div className="flex items-center gap-2">
                                    <h1 className="text-3xl sm:text-4xl font-normal text-[#ff9000] dark:text-orange-400">
                                        {t('familys.title')}
                                    </h1>
                                    <span className="mt-5 text-base italic text-[#ff9000] dark:text-orange-400" style={{ fontFamily: 'Lucida HandWriting, Arial' }}>
                                        {t('familys.subtitle')}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Content */}
                        {isLoading ? (
                            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5">
                                {Array.from({ length: 10 }).map((_, idx) => (
                                    <div key={idx} className="animate-pulse">
                                        <div className="w-full aspect-square bg-gray-200 dark:bg-neutral-900 mb-2" />
                                        <div className="h-4 bg-gray-200 dark:bg-neutral-900 rounded mb-1" />
                                        <div className="h-4 bg-gray-200 dark:bg-neutral-900 rounded mb-1" />
                                        <div className="h-4 bg-gray-200 dark:bg-neutral-900 rounded" />
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <ul className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5">
                                {families.map((family, index) => (
                                    <li key={family.id} className="w-full">
                                        {/* Image */}
                                        <Link
                                            href={`/group/${family.id}`}
                                            className="group relative block w-full aspect-square overflow-hidden bg-[#e6e5e5] dark:bg-neutral-900 mb-2"
                                        >
                                            {family.avatar ? (
                                                <Image
                                                    src={family.avatar}
                                                    alt={family.name}
                                                    fill
                                                    className="object-cover"
                                                    unoptimized
                                                />
                                            ) : (
                                                <div className="w-full h-full bg-gray-300 dark:bg-gray-700" />
                                            )}
                                            {/* Hover mask */}
                                            <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-30 transition-opacity duration-300 z-10" />
                                        </Link>

                                        {/* Name */}
                                        <Link
                                            href={`/group/${family.id}`}
                                            className="block mt-2 text-xs sm:text-sm text-[#484544] dark:text-gray-300 hover:text-[#ff9000] dark:hover:text-orange-400 transition-colors mb-1 h-5 leading-5 overflow-hidden"
                                        >
                                            {family.name}
                                        </Link>

                                        {/* Stats */}
                                        <p className="text-xs sm:text-sm text-[#9a9999] dark:text-gray-500 h-5 leading-5 overflow-hidden">
                                            {t('familys.artists')}：{family.artistsCount}
                                        </p>
                                        <p className="text-xs sm:text-sm text-[#9a9999] dark:text-gray-500 h-5 leading-5 overflow-hidden">
                                            {t('familys.members')}：{family.membersCount}
                                        </p>
                                    </li>
                                ))}
                            </ul>
                        )}

                        {!isLoading && families.length === 0 && (
                            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
                                {t('familys.noData')}
                            </div>
                        )}
                    </div>
                </main>
            </div>
            <Footer />
            <BackToTop />
        </>
    )
}