import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { PostCard } from '../components/PostCard'
import { PostCardSkeleton } from '../components/PostCardSkeleton'
import { Posts, Categories } from '../clientsdk/sdk.gen'
import { createClient } from '../clientsdk/client'
import { customQuerySerializer } from '../clientsdk/querySerializer'
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
import { usePageTitle } from '../hooks/usePageTitle'

const client = createClient({
  baseUrl: API_URL,
  querySerializer: customQuerySerializer,
  headers: {
    'X-Tenant-Slug': TENANT_SLUG,
    'X-API-Key': TENANT_API_KEY,
  },
})

export const CategoryDetail: React.FC = () => {
  const { slug } = useParams<{ slug: string }>()
  usePageTitle('分类详情')
  const [posts, setPosts] = useState<any[]>([])
  const [category, setCategory] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (!slug) return

    const fetchData = async () => {
      try {
        setLoading(true)
        setError(null)

        const [categoriesRes, postsRes] = await Promise.all([
          // Use listCategories with where filter since findCategoryById doesn't support slug lookup
          Categories.listCategories({
            client,
            query: {
              where: {
                slug: {
                  equals: slug,
                },
              },
              limit: 1,
            },
          }),
          Posts.listPosts({
            client,
            query: {
              limit: 100,
              sort: '-createdAt',
            },
          }),
        ])

        const categoryDocs = (categoriesRes as any)?.data?.docs || []
        if (categoryDocs[0]) {
          setCategory(categoryDocs[0])
        }

        const allDocs = (postsRes as any)?.data?.docs || []
        // categories is an array, check if any category in the array matches the slug
        const categoryPosts = allDocs.filter((post: any) =>
          post.categories?.some((cat: any) => cat.slug === slug)
        )

        setPosts(categoryPosts)
      } catch (err) {
        setError(err instanceof Error ? err.message : '加载失败')
        console.error('获取数据失败:', err)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [slug])

  const stripHtml = (html: string): string => {
    const tmp = document.createElement('div')
    tmp.innerHTML = html
    return tmp.textContent || tmp.innerText || ''
  }

  const formatDate = (dateString: string): string => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })
  }

  const getCategoryTitle = (post: any): string | undefined => {
    // categories is an array, get the first one
    return post.categories?.[0]?.title
  }

  const handlePostClick = (postSlug: string) => {
    window.location.href = `/posts/${postSlug}`
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      <main className="container mx-auto px-4 py-8">
        <section className="mb-12">
          {category && (
            <div className="mb-8">
              <div className="aspect-[16/8] rounded-2xl overflow-hidden mb-6">
                <img 
                  src={`/images/category-${category.slug}-header.jpg`}
                  alt={category.title}
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.style.display = 'none';
                    target.nextElementSibling?.classList.remove('hidden');
                  }}
                />
                <div className="w-full h-full bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center hidden">
                  <div className="text-center text-primary">
                    <div className="text-6xl mb-4">Category</div>
                    <p className="text-2xl font-medium">{category.title}</p>
                  </div>
                </div>
              </div>
            </div>
          )}
          <h2 className="text-3xl font-bold text-gray-900 mb-2">
            {category?.title || '分类'}
          </h2>
          <p className="text-gray-600">探索该分类下的所有内容</p>
        </section>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            <strong>错误：</strong> {error}
          </div>
        )}

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {loading
            ? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
            : posts.map((post) => (
                <PostCard
                  key={post.id}
                  title={post.title}
                  excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
                  category={getCategoryTitle(post)}
                  date={formatDate(post.createdAt)}
                  onClick={() => handlePostClick(post.slug)}
                />
              ))}
        </div>

        {!loading && posts.length === 0 && !error && (
          <div className="text-center py-12">
            <p className="text-gray-500 text-lg">该分类下暂无文章</p>
          </div>
        )}
      </main>

      <Footer />
    </div>
  )
}
