import React, { useEffect, useMemo, useState } from 'react'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { PostCard } from '../components/PostCard'
import { PostCardSkeleton } from '../components/PostCardSkeleton'
import { Posts } from '../clientsdk/sdk.gen'
import { createClient } from '../clientsdk/client'
import { customQuerySerializer } from '../clientsdk/querySerializer'
import type { Post } from '../clientsdk/types.gen'
import { TENANT_API_KEY, TENANT_SLUG, API_URL } from '../config'
import { isCategory } from '../utils/payload'
import { useI18n } from '../i18n/useI18n'

type ListResponse<T> = { docs: T[] }

type ListPostsResult = { data?: ListResponse<Post> }

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

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('th-TH', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

const getCategoryTitle = (post: Post): string | undefined => {
  const first = post.categories?.[0]
  return isCategory(first) ? first.title : undefined
}

export const News: React.FC = () => {
  const { t } = useI18n()
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

        const response = (await Posts.listPosts({
          client,
          query: {
            limit: 12,
            sort: '-createdAt',
          },
        })) as ListPostsResult

        setPosts(response.data?.docs ?? [])
      } catch (err) {
        setError(err instanceof Error ? err.message : t('common.loadFailed'))
        console.error('Fetch posts failed:', err)
      } finally {
        setLoading(false)
      }
    }

    fetchPosts()
  }, [t])

  const items = useMemo(() => posts, [posts])

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

      <main className="mx-auto w-full max-w-6xl px-4 py-10">
        <header className="mb-10" aria-label={t('news.title')}>
          <h1 className="text-4xl font-semibold tracking-tight">{t('news.title')}</h1>
          <p className="mt-3 max-w-2xl text-zinc-600">{t('news.subtitle')}</p>
        </header>

        {error ? (
          <div
            role="alert"
            className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-red-800"
          >
            {error}
          </div>
        ) : null}

        <section className="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {loading
            ? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
            : items.map((post) => (
                <PostCard
                  key={post.id}
                  title={post.title}
                  excerpt={stripHtml(post.content_html ?? '') || post.title}
                  category={getCategoryTitle(post)}
                  date={formatDate(post.createdAt)}
                  to={`/news/${post.slug}`}
                />
              ))}
        </section>

        {!loading && items.length === 0 && !error ? (
          <div className="py-14 text-center text-zinc-600">{t('news.empty')}</div>
        ) : null}
      </main>

      <Footer />
    </div>
  )
}