import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { showDbDateAsIs } from '@/utils/dateUtils'
import { BlogPost } from '@/proxy/blog/blog'
import { blogService } from '@/services/blog.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store/store'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'
import { Loading } from '@/components/shared'
import { APP_NAME } from '@/constants/app.constant'

interface PostData {
  image?: string
  author?: string
}

const BlogDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>()
  const { translate } = useLocalization()
  const { currentLang } = useStoreState((state) => state.locale)

  const [blogPost, setBlogPost] = useState<BlogPost | null>(null)
  const [postData, setPostData] = useState<PostData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchBlogPost = async () => {
      setLoading(true)
      setError(null)
      try {
        if (id) {
          const response = await blogService.getPostBySlug(id)
          setBlogPost(response)
          setPostData({
            image: response.coverImage,
            author: response.author,
          })
        } else {
          setError('Blog post ID is missing.')
        }
      } catch (error: any) {
        setError(error.message || 'Failed to fetch blog post.')
      } finally {
        setLoading(false)
      }
    }

    fetchBlogPost()
  }, [id])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <Loading loading={loading} />
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <h1 className="text-2xl font-bold text-gray-900">Error: {error}</h1>
      </div>
    )
  }

  if (!blogPost || !postData) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <h1 className="text-2xl font-bold text-gray-900">{translate('::Public.blog.notFound')}</h1>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'App.BlogManagement')}
        defaultTitle={APP_NAME}
      ></Helmet>
      <div className="relative bg-blue-900 text-white py-12"></div>
      <div className="container mx-auto px-4">
        <Link
          to={ROUTES_ENUM.public.blog}
          className="text-blue-600 hover:underline mt-4 mb-4 inline-block"
        >
          &larr; {translate('::App.BlogManagement')}
        </Link>
        {postData.image && (
          <img
            src={postData.image}
            alt={translate('::Public.' + blogPost.title)}
            className="w-full h-96 object-cover rounded-lg mb-8"
          />
        )}
        <h1 className="text-4xl font-bold text-gray-900 mb-6">
          {translate('::Public.' + blogPost.title)}
        </h1>
        <div className="flex items-center text-sm text-gray-500 space-x-4 mb-8">
          <div className="flex items-center">
            <span>{postData.author}</span>
          </div>
          <div className="flex items-center">
            {blogPost.publishedAt && showDbDateAsIs(blogPost.publishedAt)}
          </div>
        </div>
        <div
          className="prose max-w-none text-gray-800"
          dangerouslySetInnerHTML={{
            __html:
              currentLang == 'tr'
                ? translate('::' + blogPost.contentTr!)
                : translate('::' + blogPost.contentEn!),
          }}
        />
      </div>
    </div>
  )
}

export default BlogDetail