import React, { useEffect, useMemo, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
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, isMedia } 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 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 PostDetail: React.FC = () => {
  const { t } = useI18n()
  const { slug } = useParams<{ slug: string }>()
  const [post, setPost] = useState<Post | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

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

        const response = (await Posts.listPosts({
          client,
          query: {
            where: {
              slug: {
                equals: slug,
              },
            },
            limit: 1,
          },
        })) as ListPostsResult

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

    fetchPost()
  }, [slug, t])

  const hero = useMemo(() => {
    if (!post) return undefined
    return isMedia(post.heroImage) ? post.heroImage : undefined
  }, [post])

  if (loading) {
    return (
      <div className="min-h-screen bg-zinc-50 text-zinc-900">
        <Header />
        <main className="mx-auto w-full max-w-3xl px-4 py-10">
          <div
            className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-10"
            aria-label="กำลังโหลด"
          >
            <div className="animate-pulse">
              <div className="h-8 rounded bg-zinc-200/70" />
              <div className="mt-4 h-4 w-1/3 rounded bg-zinc-200/70" />
              <div className="mt-8 space-y-3">
                <div className="h-4 rounded bg-zinc-200/70" />
                <div className="h-4 rounded bg-zinc-200/70" />
                <div className="h-4 w-3/4 rounded bg-zinc-200/70" />
              </div>
            </div>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  if (error || !post) {
    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-16">
          <div className="rounded-2xl border border-zinc-200 bg-white p-8 text-center shadow-sm">
            <p className="text-red-700">{error || 'ไม่พบข้อมูลข่าวสาร'}</p>
            <div className="mt-6">
              <Link
                to="/news"
                className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"
              >
                {t('post.back')}
              </Link>
            </div>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

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

      <main className="mx-auto w-full max-w-3xl px-4 py-10">
        <article className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-10">
          <header>
            {getCategoryTitle(post) ? (
              <p className="text-sm font-semibold text-red-700">
                {getCategoryTitle(post)}
              </p>
            ) : null}
            <h1 className="mt-2 text-4xl font-semibold tracking-tight">
              {post.title}
            </h1>
            <p className="mt-3 text-sm text-zinc-500">{formatDate(post.createdAt)}</p>
          </header>

          {hero?.url ? (
            <img
              src={hero.url}
              alt={hero.alt || post.title}
              className="mt-6 h-auto w-full rounded-2xl"
              loading="lazy"
            />
          ) : null}

          <div
            className="prose prose-zinc mt-8 max-w-none prose-headings:scroll-mt-24"
            dangerouslySetInnerHTML={{ __html: post.content_html || '' }}
          />

          <div className="mt-10 border-t border-zinc-200 pt-6">
            <Link
              to="/news"
              className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"
            >
              {t('post.back')}
            </Link>
          </div>
        </article>
      </main>

      <Footer />
    </div>
  )
}