import Link from 'next/link'
import React from 'react'

import type { Post } from '@/payload-types'

import { Media } from '@/components/Media'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from '@/utilities/cn'
import { formatDateTime } from '@/utilities/formatDateTime'

export const PostsCollectionArchive: React.FC<{
  posts: Post[]
}> = ({ posts }) => {
  if (!posts || posts.length === 0) {
    return (
      <div className={cn('container')}>
        <div className="rounded-3xl border border-dashed border-border bg-muted/30 px-6 py-14 text-center">
          <h3 className="text-xl font-medium">Belum ada artikel untuk pilihan ini</h3>
          <p className="mt-3 text-sm text-muted-foreground">
            Coba pilih kategori lain atau kembali ke halaman semua artikel.
          </p>
        </div>
      </div>
    )
  }

  return (
    <div className={cn('container')}>
      <div className="grid grid-cols-4 gap-x-4 gap-y-4 sm:grid-cols-8 lg:grid-cols-12 lg:gap-x-8 lg:gap-y-8 xl:gap-x-8">
        {posts?.map((post, index) => {
          if (typeof post !== 'object' || post === null) {
            return null
          }

          const imageResource =
            typeof post.heroImage === 'object' && post.heroImage !== null
              ? post.heroImage
              : typeof post.meta?.image === 'object' && post.meta.image !== null
                ? post.meta.image
                : null

          return (
            <div className="col-span-4" key={post.id ?? `${post.slug}-${index}`}>
              <Link className="group block h-full" href={`/posts/${post.slug}`}>
                <Card className="h-full overflow-hidden border-border/60 py-0 transition-colors group-hover:border-foreground/30">
                  {imageResource && (
                    <div className="relative aspect-[16/10] overflow-hidden bg-muted">
                      <Media
                        fill
                        imgClassName="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                        resource={imageResource}
                      />
                    </div>
                  )}

                  <CardHeader className="pb-3">
                    <div className="space-y-2">
                      {post.categories && post.categories.length > 0 && (
                        <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                          {post.categories
                            .map((category) =>
                              typeof category === 'object' && category !== null
                                ? category.title
                                : null,
                            )
                            .filter(Boolean)
                            .join(', ')}
                        </p>
                      )}

                      <CardTitle className="text-xl leading-tight">{post.title}</CardTitle>

                      {post.publishedAt && (
                        <CardDescription>
                          {formatDateTime({ date: post.publishedAt, format: 'MMMM dd, yyyy' })}
                        </CardDescription>
                      )}
                    </div>
                  </CardHeader>

                  {post.meta?.description && (
                    <CardContent className="pt-0">
                      <p className="line-clamp-3 text-sm text-muted-foreground">
                        {post.meta.description}
                      </p>
                    </CardContent>
                  )}
                </Card>
              </Link>
            </div>
          )
        })}
      </div>
    </div>
  )
}