import React, { useEffect, useMemo, useState } from 'react'
import { Link } 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 } 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 { SITE } from '../site'
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(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

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

const FEATURED_KEYS = [
  { title: 'home.feature.1.title', description: 'home.feature.1.desc' },
  { title: 'home.feature.2.title', description: 'home.feature.2.desc' },
  { title: 'home.feature.3.title', description: 'home.feature.3.desc' },
] as const

export const Home: React.FC = () => {
  const { t, locale } = 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: 6,
            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">
        <section className="grid gap-10 py-12 lg:grid-cols-2 lg:items-center">
          <div>
            <p className="text-sm font-semibold tracking-wide text-red-700">
              {locale === 'zh' ? SITE.nameZh : SITE.nameTh}
            </p>
            <h1 className="mt-3 text-5xl font-semibold tracking-tight">
              {t('home.hero.title')}
            </h1>
            <p className="mt-4 max-w-xl text-zinc-600">{t('home.hero.desc')}</p>

            <div className="mt-7 flex flex-wrap gap-3">
              <Link
                to="/menu"
                className="inline-flex items-center justify-center rounded-xl bg-zinc-900 px-5 py-3 text-sm font-semibold text-white"
              >
                {t('home.hero.cta.menu')}
              </Link>
              <Link
                to="/contact"
                className="inline-flex items-center justify-center rounded-xl border border-zinc-200 bg-white px-5 py-3 text-sm font-semibold text-zinc-900 hover:bg-zinc-50"
              >
                {t('home.hero.cta.contact')}
              </Link>
            </div>

            <dl className="mt-8 grid max-w-xl grid-cols-2 gap-4 text-sm">
              <div className="rounded-2xl border border-zinc-200 bg-white p-4">
                <dt className="font-semibold text-zinc-900">{t('common.phone')}</dt>
                <dd className="mt-1 text-zinc-600">
                  <a className="underline" href={`tel:${SITE.phone}`}>
                    {SITE.phone}
                  </a>
                </dd>
              </div>
              <div className="rounded-2xl border border-zinc-200 bg-white p-4">
                <dt className="font-semibold text-zinc-900">{t('common.hours')}</dt>
                <dd className="mt-1 text-zinc-600">
                  {t('home.hoursPreview')}
                </dd>
              </div>
            </dl>
          </div>

          <div className="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm">
            <img
              src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1400&q=80"
              alt="อาหารจีนรสจัดเสิร์ฟบนโต๊ะ"
              className="h-80 w-full object-cover lg:h-[520px]"
              loading="lazy"
            />
          </div>
        </section>

        <section className="grid gap-6 md:grid-cols-3">
          {FEATURED_KEYS.map((item) => (
            <div
              key={item.title}
              className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm"
            >
              <h2 className="text-lg font-semibold">{t(item.title)}</h2>
              <p className="mt-2 text-sm text-zinc-600">{t(item.description)}</p>
            </div>
          ))}
        </section>

        <section className="mt-12" aria-labelledby="latest-news">
          <div className="flex items-end justify-between gap-4">
            <div>
              <h2 id="latest-news" className="text-2xl font-semibold tracking-tight">
                {t('home.section.latestNews')}
              </h2>
              <p className="mt-2 text-sm text-zinc-600">
                {t('home.section.latestNews.desc')}
              </p>
            </div>
            <Link
              to="/news"
              className="text-sm font-semibold text-red-700 hover:underline"
            >
              {t('home.section.latestNews.more')}
            </Link>
          </div>

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

          <div 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}`}
                  />
                ))}
          </div>

          {!loading && items.length === 0 && !error ? (
            <div className="py-12 text-center text-zinc-600">
              {t('home.emptyNews')}
            </div>
          ) : null}
        </section>

        <section className="mt-14 rounded-3xl bg-zinc-900 px-6 py-10 text-white">
          <h2 className="text-3xl font-semibold tracking-tight">
            {t('home.cta.title')}
          </h2>
          <p className="mt-3 max-w-2xl text-zinc-200">{t('home.cta.desc')}</p>
          <div className="mt-6 flex flex-wrap gap-3">
            <a
              href={`tel:${SITE.phone}`}
              className="inline-flex items-center justify-center rounded-xl bg-white px-5 py-3 text-sm font-semibold text-zinc-900"
            >
              {t('home.cta.call')}
            </a>
            <Link
              to="/contact"
              className="inline-flex items-center justify-center rounded-xl border border-white/30 px-5 py-3 text-sm font-semibold text-white hover:bg-white/10"
            >
              {t('home.cta.map')}
            </Link>
          </div>
        </section>

        <div className="h-14" />
      </main>

      <Footer />
    </div>
  )
}
