'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useLocale, useTranslations } from 'next-intl'
import { ArrowRight } from 'lucide-react'
import api from '@/lib/api'
import { Post, t, Locale, dateLocale } from '@/types'

interface RecentPostsProps {
  currentSlug: string
}

export default function RecentPosts({ currentSlug }: RecentPostsProps) {
  const locale = useLocale() as Locale
  const tNews = useTranslations('news')
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    api
      .getPosts({ limit: 4 })
      .then((res) => {
        const filtered = (res.posts || [])
          .filter((p) => p.slug !== currentSlug)
          .slice(0, 3)
        setPosts(filtered)
      })
      .catch(() => {})
  }, [currentSlug])

  if (posts.length === 0) return null

  const formatDate = (dateStr: string) =>
    new Date(dateStr).toLocaleDateString(dateLocale(locale), {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    })

  return (
    <section className="py-16 border-t border-gray-200">
      <div className="max-w-4xl mx-auto container-padding">
        <h2 className="text-2xl font-bold text-secondary-900 mb-8 tracking-tight">
          {tNews('recentPosts')}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
          {posts.map((post) => (
            <Link
              key={post._id}
              href={`/${locale}/news/${post.slug}`}
              className="group block"
            >
              <div className="aspect-[16/10] rounded-xl overflow-hidden bg-gray-100 mb-3">
                {post.featuredImage ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={post.featuredImage}
                    alt={t(post.title, locale)}
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-secondary-300 text-sm">
                    {tNews('noImage')}
                  </div>
                )}
              </div>
              <span className="text-xs font-semibold text-primary-600 uppercase tracking-wide">
                {post.category}
              </span>
              <h3 className="text-sm font-semibold text-secondary-900 mt-1 line-clamp-2 group-hover:text-primary-600 transition-colors">
                {t(post.title, locale)}
              </h3>
              {post.publishedAt && (
                <p className="text-xs text-secondary-400 mt-1">
                  {formatDate(post.publishedAt)}
                </p>
              )}
            </Link>
          ))}
        </div>
        <div className="mt-8 text-center">
          <Link
            href={`/${locale}/news`}
            className="inline-flex items-center text-sm font-semibold text-primary-600 hover:text-primary-700 transition-colors"
          >
            {tNews('viewAll')}
            <ArrowRight className="h-4 w-4 ml-1" />
          </Link>
        </div>
      </div>
    </section>
  )
}