import Link from 'next/link'
import type { Locale } from '@/i18n/config'
import type { MediaAssetCategoryCard } from '@/lib/media-assets'

export function MediaAssetPageHeader({
  description,
  eyebrow,
  title,
}: {
  description: string
  eyebrow: string
  title: string
}) {
  return (
    <header className="max-w-reading">
      <div className="text-sm uppercase tracking-[0.18em] text-text-muted">{eyebrow}</div>
      <h1 className="mt-2 text-4xl font-medium tracking-tight md:text-6xl">{title}</h1>
      <p className="mt-4 text-lg leading-8 text-text-secondary">{description}</p>
    </header>
  )
}

export function MediaAssetBreadcrumbs({
  items,
}: {
  items: Array<{ href?: string; label: string }>
}) {
  return (
    <nav aria-label="Breadcrumb" className="mb-6 flex flex-wrap items-center gap-2 text-sm text-text-muted">
      {items.map((item, index) => (
        <span key={`${item.label}-${index}`} className="inline-flex items-center gap-2">
          {index > 0 ? <span aria-hidden="true">/</span> : null}
          {item.href ? (
            <Link href={item.href} className="transition hover:text-text-primary">
              {item.label}
            </Link>
          ) : (
            <span className="text-text-primary">{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  )
}

export function MediaAssetCategoryGrid({
  categories,
  locale,
}: {
  categories: MediaAssetCategoryCard[]
  locale: Locale
}) {
  return (
    <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {categories.map((category) => {
        const countLabel =
          category.childCount > 0
            ? locale === 'zh'
              ? `${category.childCount} 个分类`
              : `${category.childCount} categories`
            : locale === 'zh'
              ? `${category.assetCount} 个资源`
              : `${category.assetCount} assets`

        return (
          <article
            key={category.id}
            className="group overflow-hidden bg-white shadow-[0_18px_60px_rgba(18,24,31,0.055)] ring-1 ring-black/[0.05]"
          >
            <Link href={category.href} className="block">
              <div className="relative aspect-[16/10] overflow-hidden bg-[#ecefed]">
                {category.imageUrl ? (
                  <img
                    src={category.imageUrl}
                    alt={category.name}
                    className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.035]"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(135deg,#e4e8e7_0%,#faf9f5_100%)] px-8 text-center text-sm uppercase tracking-[0.18em] text-text-muted">
                    {category.name}
                  </div>
                )}
                <span className="absolute bottom-4 left-4 bg-white/92 px-3 py-1 text-xs font-medium text-text-secondary shadow-[0_10px_24px_rgba(0,0,0,0.08)]">
                  {countLabel}
                </span>
              </div>

              <div className="p-6">
                <h2 className="text-2xl font-medium tracking-tight text-text-primary transition group-hover:opacity-70">
                  {category.name}
                </h2>
                {category.description ? (
                  <p className="mt-3 line-clamp-2 text-sm leading-7 text-text-secondary">
                    {category.description}
                  </p>
                ) : null}
              </div>
            </Link>
          </article>
        )
      })}
    </div>
  )
}

export function MediaAssetEmptyState({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="mt-8 border border-dashed border-black/15 bg-white/70 px-6 py-10 text-sm leading-7 text-text-secondary md:px-8">
      {children}
    </div>
  )
}