import { Link } from 'react-router-dom'
import { Pencil, MessageSquare, Trash2, BadgeCheck, Clock } from 'lucide-react'
import type { Blog } from '../types/blog'
import {
  formatBlogAuthor,
  formatBlogCardDate,
  isBlogVerified,
} from '../services/blogService'
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 verified = isBlogVerified(blog)
  const publishDate = formatBlogCardDate(blog.publishedAt ?? blog.createdAt)
  const titleLocale = textLocaleAttrs(blog.title)
  const abstractLocale = textLocaleAttrs(blog.abstract)
  const hasAbstract = Boolean(blog.abstract?.trim())

  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" />
              Waiting
            </span>
          )}
          {verified && (
            <span className={`${cardStyles.statusBadge} ${cardStyles.verifiedBadge}`}>
              Verified
            </span>
          )}
        </div>

        <div className={cardStyles.body}>
          <h3
            className={[cardStyles.title, titleLocale.className].filter(Boolean).join(' ')}
            lang={titleLocale.lang}
            dir={titleLocale.dir}
          >
            {blog.title}
          </h3>
          {hasAbstract ? (
            <p
              className={[cardStyles.abstract, abstractLocale.className]
                .filter(Boolean)
                .join(' ')}
              lang={abstractLocale.lang}
              dir={abstractLocale.dir}
            >
              {blog.abstract}
            </p>
          ) : (
            <p className={cardStyles.abstract} lang="en" dir="ltr">
              No summary yet.
            </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="Edit blog">
          <button type="button" onClick={() => onEdit(blog.id)} aria-label="Edit">
            <Pencil size={16} />
          </button>
        </Tooltip>
        <Tooltip label={verified ? 'Unverify blog' : 'Verify blog'}>
          <button
            type="button"
            className={verified ? cardStyles.verifyActive : cardStyles.verifyWaiting}
            disabled={isVerifying}
            onClick={() => onToggleVerify(blog.id)}
            aria-label={verified ? 'Unverify blog' : 'Verify blog'}
          >
            {verified ? <BadgeCheck size={16} /> : <Clock size={16} />}
          </button>
        </Tooltip>
        <Tooltip label="View comments">
          <button
            type="button"
            className={controlStyles.iconBtn}
            onClick={() => onComments(blog.id)}
            aria-label={`Comments (${commentCount})`}
          >
            <MessageSquare size={16} />
            {commentCount > 0 && (
              <span className={controlStyles.commentBadge}>{commentCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label="Remove blog">
          <button
            type="button"
            className={controlStyles.danger}
            onClick={() => onRemove(blog.id)}
            aria-label="Remove"
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
