import { Link } from 'react-router-dom'
import { Pencil, MessageSquare, Trash2, BadgeCheck, Clock } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { Blog } from '../types/blog'
import {
  formatBlogAuthor,
  formatBlogCardDate,
  isBlogVerified,
} from '../services/blogService'
import { useT } from '../i18n/useT'
import { textLocaleAttrs } from '../utils/textLocale'
import { Tooltip } from './Tooltip'
import cardStyles from './BlogCard.module.css'
import controlStyles from './ProductCard.module.css'

interface BlogCardProps {
  blog: Blog
  commentCount: number
  onEdit: (id: string) => void
  onComments: (id: string) => void
  onToggleVerify: (id: string) => void
  onRemove: (id: string) => void
  isVerifying?: boolean
}

export function BlogCard({
  blog,
  commentCount,
  onEdit,
  onComments,
  onToggleVerify,
  onRemove,
  isVerifying = false,
}: BlogCardProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const verified = isBlogVerified(blog)
  const publishDate = formatBlogCardDate(
    blog.publishedAt ?? blog.createdAt,
    isFa ? 'fa' : 'en',
  )
  const titleLocale = textLocaleAttrs(blog.title)
  const abstractLocale = textLocaleAttrs(blog.abstract)
  const hasAbstract = Boolean(blog.abstract?.trim())
  const verifyLabel = verified ? t('blog.card.unverify') : t('blog.card.verify')
  // In FA UI, keep cards RTL even when title/abstract are English.
  const titleDir = isFa ? 'rtl' : titleLocale.dir
  const abstractDir = isFa ? 'rtl' : abstractLocale.dir

  return (
    <article className={cardStyles.card}>
      <Link to={`/blog/detail/${blog.id}`} className={cardStyles.clickable}>
        <div className={cardStyles.imageWrap}>
          {blog.titleImageUrl ? (
            <img
              src={blog.titleImageUrl}
              alt={blog.title}
              className={cardStyles.image}
              loading="lazy"
            />
          ) : (
            <div className={cardStyles.imagePlaceholder} aria-hidden="true" />
          )}
          {!verified && (
            <span className={`${cardStyles.statusBadge} ${cardStyles.waitingBadge}`}>
              <Clock size={11} aria-hidden="true" />
              {t('blog.card.waiting')}
            </span>
          )}
          {verified && (
            <span className={`${cardStyles.statusBadge} ${cardStyles.verifiedBadge}`}>
              {t('blog.card.verified')}
            </span>
          )}
        </div>

        <div className={cardStyles.body} dir={isFa ? 'rtl' : 'ltr'}>
          <h3
            className={[cardStyles.title, titleLocale.className].filter(Boolean).join(' ')}
            lang={titleLocale.lang}
            dir={titleDir}
          >
            {blog.title}
          </h3>
          {hasAbstract ? (
            <p
              className={[cardStyles.abstract, abstractLocale.className]
                .filter(Boolean)
                .join(' ')}
              lang={abstractLocale.lang}
              dir={abstractDir}
            >
              {blog.abstract}
            </p>
          ) : (
            <p
              className={cardStyles.abstract}
              lang={isFa ? 'fa' : 'en'}
              dir={isFa ? 'rtl' : 'ltr'}
            >
              {t('blog.card.noSummary')}
            </p>
          )}
          <p className={cardStyles.meta}>
            <span>{formatBlogAuthor(blog.author)}</span>
            <span className={cardStyles.metaDot}>·</span>
            <span>{publishDate}</span>
          </p>
        </div>
      </Link>

      <div className={controlStyles.controls}>
        <Tooltip label={t('blog.card.edit')}>
          <button
            type="button"
            onClick={() => onEdit(blog.id)}
            aria-label={t('blog.card.edit')}
          >
            <Pencil size={16} />
          </button>
        </Tooltip>
        <Tooltip label={verifyLabel}>
          <button
            type="button"
            className={verified ? cardStyles.verifyActive : cardStyles.verifyWaiting}
            disabled={isVerifying}
            onClick={() => onToggleVerify(blog.id)}
            aria-label={verifyLabel}
          >
            {verified ? <BadgeCheck size={16} /> : <Clock size={16} />}
          </button>
        </Tooltip>
        <Tooltip label={t('blog.card.comments')}>
          <button
            type="button"
            className={controlStyles.iconBtn}
            onClick={() => onComments(blog.id)}
            aria-label={`${t('blog.card.comments')} (${commentCount})`}
          >
            <MessageSquare size={16} />
            {commentCount > 0 && (
              <span className={controlStyles.commentBadge}>{commentCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label={t('blog.card.remove')}>
          <button
            type="button"
            className={controlStyles.danger}
            onClick={() => onRemove(blog.id)}
            aria-label={t('blog.card.remove')}
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
