import { CalendarIcon, ClockIcon } from 'lucide-react'
import type { Article } from '../data/site'
import { JALALI_TIME_FORMATTER, formatJalali } from '../utils/date'
import { toPersianDigits } from '../utils/digits'

type ArticleMetaProps = {
  article: Article
  className?: string
}

/**
 * سربرگ نویسنده/تاریخ مقاله — زیر تیتر اصلی نمایش داده می‌شود:
 * آواتار حرف اول نویسنده، نام نویسنده، تاریخ جلالی و زمان مطالعه.
 */
export function ArticleMeta({ article, className = '' }: ArticleMetaProps) {
  const rawDate = (article.date ?? '').trim()
  const author = (article.author ?? '').trim() || 'گروه ساختمانی آرامش'
  const initial = author.charAt(0)

  // تاریخ ذخیره‌شده (میلادی) به شمسی تبدیل می‌شود؛ در نبود تاریخ، امروز با ساعت نمایش داده می‌شود
  const todayLabel = `${formatJalali(new Date())} — ساعت ${JALALI_TIME_FORMATTER.format(new Date())}`
  const dateLabel = formatJalali(rawDate, todayLabel)

  return (
    <div className={`flex flex-wrap items-center gap-x-6 gap-y-4 ${className}`}>
      {/* آواتار و نام نویسنده */}
      <span className="flex items-center gap-3">
        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-lg font-bold text-copper shadow-[0_0_20px_rgba(213,135,76,0.25),inset_0_1px_1px_rgba(255,255,255,0.2)]">
          {initial}
        </span>
        <span className="flex flex-col">
          <span className="text-sm font-bold text-ivory">{author}</span>
          <span className="text-[11px] font-light text-ivory/45">نویسنده</span>
        </span>
      </span>

      <span className="hidden h-9 w-px bg-ivory/10 sm:block" aria-hidden="true" />

      {/* تاریخ جلالی */}
      <span className="flex items-center gap-2 text-xs font-light text-ivory/60">
        <CalendarIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
        {dateLabel}
      </span>

      {/* زمان مطالعه — با ارقام فارسی */}
      {article.read && (
        <span className="flex items-center gap-2 text-xs font-light text-ivory/60">
          <ClockIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
          {toPersianDigits(article.read)}
        </span>
      )}
    </div>
  )
}