import type { DefaultDocumentIDType } from 'payload'

import React from 'react'
import { ArrowRight } from 'lucide-react'

import { Media } from '@/components/Media'
import type {
  Media as MediaType,
  SupplyOverviewBlock as SupplyOverviewBlockProps,
} from '@/payload-types'
import { cn } from '@/utilities/cn'

type SupplyOverviewItem = NonNullable<SupplyOverviewBlockProps['items']>[number]

const isMediaResource = (value: unknown): value is MediaType =>
  value !== null && typeof value === 'object' && 'url' in value

export const SupplyOverviewBlock: React.FC<
  SupplyOverviewBlockProps & {
    id?: DefaultDocumentIDType
    className?: string
  }
> = ({ className, description, heading, items }) => {
  if (!items || items.length === 0) return null

  return (
    <section className={cn('max-w-7xl mx-auto px-4 md:px-16 text-center py-16', className)}>
      <h2 className="mx-auto mb-4 max-w-2xl font-serif text-3xl font-medium leading-tight text-primary md:text-4xl">
        {heading}
      </h2>

      <p className="mx-auto mb-12 max-w-4xl whitespace-pre-line text-lg leading-7 text-muted-foreground">
        {description}
      </p>

      <div className="grid grid-cols-1 gap-12 text-left md:grid-cols-3">
        {items.map((item: SupplyOverviewItem, index) => {
          const media = isMediaResource(item.media) ? item.media : null

          return (
            <article className="flex flex-col h-full" key={`${item.title}-${index}`}>
              <div className="mb-6 aspect-[4/3] overflow-hidden rounded-xl bg-muted">
                {media ? (
                  <div className="relative h-full w-full">
                    <Media
                      alt={item.mediaAlt}
                      fill
                      htmlElement={null}
                      imgClassName="object-cover"
                      resource={media}
                    />
                  </div>
                ) : null}
              </div>

              <div className="border-b border-primary/30 pb-4 mb-4">
                <h3 className="flex items-baseline gap-3 text-2xl font-medium leading-tight text-primary font-serif">
                  {(() => {
                    const label = item.orderLabel || String(index + 1)
                    const formatted = isNaN(Number(label)) ? label : String(Number(label)).padStart(2, '0')
                    return <span className="text-lg text-secondary opacity-50 font-sans">{formatted}</span>
                  })()}
                  <span>{item.title}</span>
                </h3>
              </div>

              <p className="mt-2 text-sm leading-relaxed text-muted-foreground flex-grow">
                {item.description}
              </p>

              <a className="mt-6 inline-flex items-center gap-2 text-primary font-bold text-sm group/link" href="#">
                <span className="border-b border-primary/20 group-hover/link:border-primary transition-colors">
                  Lihat Koleksi
                </span>
                <ArrowRight className="h-4 w-4 group-hover/link:translate-x-1 transition-transform" />
              </a>
            </article>
          )
        })}
      </div>
    </section>
  )
}