import type { ReactNode } from 'react'
import { MdClose } from 'react-icons/md'
import type { MapProject } from '../data/mapProjects'
import { useLang } from '../i18n/lang'
import { ProjectImageSlider } from './ProjectImageSlider'

/** دکمه‌های کارت — تمام‌عرض، هم‌خانوادهٔ دکمه‌های مسی سایت (در ستون هم درست می‌نشینند) */
export const POPUP_PRIMARY_CLASS =
  'flex w-full items-center justify-center gap-1.5 rounded-xl bg-copper px-3 py-2.5 text-[12px] font-bold text-char transition-all duration-300 ease-lux hover:scale-[1.03] hover:shadow-[0_8px_22px_rgba(213,135,76,0.35)] active:scale-95'

export const POPUP_SECONDARY_CLASS =
  'flex w-full items-center justify-center gap-1.5 rounded-xl border border-ivory/20 px-3 py-2.5 text-[12px] font-light text-ivory/80 transition-colors duration-300 ease-lux hover:border-copper hover:text-copper'

type ProjectPopupCardProps = {
  project: MapProject
  /** تصاویر پروژه — همان آرایهٔ صفحهٔ جزئیات؛ در نبودش جای‌نگهدار می‌آید */
  images?: string[]
  /** در نبود تصویر، قاب تصویر پنهان شود (نه جای‌نگهدار) — برای صفحهٔ خود پروژه */
  hideImageWhenEmpty?: boolean
  onClose: () => void
  /** دکمه‌های پایهٔ کارت — هر نما اکشن‌های خودش را می‌دهد (عمودی روی هم) */
  children: ReactNode
}

/**
 * کارت پاپ‌آپ پروژه به سبک Zillow — اسلایدر لبه‌تا‌لبه در بالاترین بخش، سپس
 * عنوان و توضیح، و در پایه دکمه‌های عمودی. راست‌به‌چپ، شیشه‌ای تیره و
 * هم‌اندازهٔ کارت‌های سایت. سال پروژه عمداً نمایش داده نمی‌شود.
 */
export function ProjectPopupCard({ project, images = [], hideImageWhenEmpty = false, onClose, children }: ProjectPopupCardProps) {
  const { t } = useLang()
  const description = project.description.trim() || t('mapProjectDescription')

  return (
    <article
      dir="rtl"
      className="w-[17rem] max-w-[calc(100vw-2.5rem)] animate-[luxPopupIn_0.22s_ease-out] overflow-hidden rounded-2xl border border-ivory/10 bg-[#27221c]/95 font-pinar text-ivory shadow-[0_24px_60px_-15px_rgba(0,0,0,0.9)] backdrop-blur-xl sm:w-72"
    >
      {/* اسلایدر تصویر: لبه‌تا‌لبه، بدون حاشیه، با فلش‌های چپ/راست */}
      <div className="relative">
        <ProjectImageSlider images={images} alt={project.name} hideWhenEmpty={hideImageWhenEmpty} />

        <button
          type="button"
          onClick={onClose}
          aria-label={t('close')}
          title={t('close')}
          className="absolute left-2.5 top-2.5 z-20 flex h-8 w-8 items-center justify-center rounded-full border border-ivory/15 bg-ink/80 text-ivory/80 backdrop-blur-md transition-all duration-300 ease-lux hover:scale-105 hover:border-copper hover:bg-copper hover:text-char"
        >
          <MdClose className="h-4 w-4" />
        </button>

        {project.isNew && (
          <span className="absolute right-2.5 top-2.5 z-20 rounded-full bg-copper px-2.5 py-1 text-[10px] font-bold text-char shadow-[0_4px_14px_rgba(213,135,76,0.4)]">
            {t('mapNewBadge')}
          </span>
        )}
      </div>

      <div className="px-4 pb-1 pt-3.5">
        <h3 className="min-w-0 truncate text-base font-bold text-ivory">{project.name}</h3>
        <p className="mt-1.5 line-clamp-2 text-[11px] font-light leading-6 text-ivory/60">{description}</p>
      </div>

      <div className="flex flex-col gap-2 p-3 pt-2.5">{children}</div>
    </article>
  )
}