import { Link } from 'react-router-dom'
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
import type { Article } from '../data/site'
import { formatJalali, formatEnDate } from '../utils/date'
import { useLang } from '../i18n/lang'
import { toPersianDigits } from '../utils/digits'

export function ArticleCard({ article }: { article: Article }) {
  const { t, href, lang } = useLang()
  // در انگلیسی نشانی اسلاگ انگلیسی — canonical سمت سرور هم همان است
  const linkSlug = lang === 'en' && article.slug_en ? article.slug_en : article.slug
  return (
    <Link
      to={href(`/blog/${encodeURIComponent(linkSlug)}`)}
      className="group flex h-full flex-col overflow-hidden rounded-xl md:rounded-2xl border border-white/10 bg-char/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.18)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
      aria-label={`${t('readArticlePrefix')} ${article.title}`}
    >
      <div className="relative overflow-hidden aspect-[16/10] w-full">
        <img
          src={article.image}
          alt={`${t('articleImagePrefix')} ${article.title}`}
          className="h-52 md:h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
          loading="lazy"
          decoding="async"
        />
        {/* برچسب دسته‌بندی کپسولی شیشه‌ای روی تصویر */}
        <div className="absolute top-3 ltr:left-3 rtl:right-3 md:top-4 md:ltr:left-4 md:rtl:right-4 rounded-full border border-white/20 bg-ink/75 px-2.5 py-0.5 md:px-3.5 md:py-1 text-[11px] md:text-xs font-light text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)]">
          {article.category}
        </div>
      </div>
      
      <div className="flex flex-1 flex-col p-3.5 md:p-8">
        <h3 className="mb-1.5 md:mb-6 text-xs md:text-xl font-bold leading-snug md:leading-relaxed text-ivory line-clamp-2 transition-colors duration-300 group-hover:text-copper">
          {article.title}
        </h3>
        
        <p className="mb-2.5 md:mb-10 text-[11px] md:text-[15px] font-light leading-relaxed md:leading-loose text-ivory/60 line-clamp-2 md:line-clamp-3">
          {article.excerpt}
        </p>
        
        <div className="mt-auto flex items-center justify-between border-t border-white/10 pt-2.5 md:pt-8 text-[11px] md:text-xs font-light text-ivory/50">
          <span className="flex items-center gap-2.5 md:gap-4">
            <span>{lang === 'en' ? formatEnDate(article.date) : formatJalali(article.date)}</span>
            <span className="flex items-center gap-1.5 md:gap-2">
              <ClockIcon className="h-3 w-3 md:h-3.5 md:w-3.5 text-copper/80" />
              {lang === 'en' ? article.read : toPersianDigits(article.read)}
            </span>
          </span>

          {/* دکمه کپسولی ادامه مطلب با افکت شیشه‌ای */}
          <span className="inline-flex items-center gap-1.5 md:gap-2 rounded-full border border-copper/40 bg-copper/5 px-2.5 py-1 md:px-3.5 md:py-1.5 text-[11px] md:text-xs font-medium text-copper backdrop-blur-md shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_15px_rgba(197,143,92,0.5)] rtl:group-hover:[&>svg]:-translate-x-1 ltr:group-hover:[&>svg]:translate-x-1">
            {t('readMore')}
            <ArrowLeftIcon className="h-3 w-3 md:h-3.5 md:w-3.5 ltr:-scale-x-100 transition-transform duration-300" />
          </span>
        </div>
      </div>
    </Link>
  )
}