import type { DefaultDocumentIDType } from 'payload'

import { CalendarDays, MapPin } from 'lucide-react'
import React from 'react'

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

type HighlightItem = NonNullable<SiapaKamiBlockProps['highlights']>[number]
type FarmerItem = NonNullable<SiapaKamiBlockProps['farmers']>[number]

const iconMap = {
  calendar_today: CalendarDays,
  location_on: MapPin,
} as const

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

export const SiapaKamiBlock: React.FC<
  SiapaKamiBlockProps & {
    id?: DefaultDocumentIDType
    className?: string
  }
> = ({
  className,
  description,
  eyebrow,
  farmers,
  farmersHeading,
  heading,
  highlights,
  media,
  mediaAlt,
  storyDescription,
  storyEyebrow,
  storyHeading,
}) => {
  const mediaResource = isMediaResource(media) ? media : null
  const hasFarmers = farmers && farmers.length > 0

  return (
    <section className={cn('max-w-7xl mx-auto px-4 md:px-16 py-12', className)}>
      <div className="mb-8 space-y-2 text-center">
        <span className="block text-xs font-bold uppercase tracking-[0.2em] text-primary">
          {eyebrow}
        </span>
        <h2 className="font-serif text-3xl font-medium leading-tight text-primary md:text-5xl">
          {heading}
        </h2>
        <p className="mx-auto max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          {description}
        </p>
      </div>

      <div className="mb-8 rounded-[2rem] border border-border/20 bg-primary/5 p-8 shadow-xs dark:bg-card md:p-12">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
          <div className="space-y-6">
            <div>
              {storyEyebrow ? (
                <span className="mb-2 block text-xs font-bold uppercase tracking-[0.2em] text-primary">
                  {storyEyebrow}
                </span>
              ) : null}
              {storyHeading ? (
                <h3 className="font-serif text-2xl font-medium leading-tight text-primary md:text-4xl">
                  {storyHeading}
                </h3>
              ) : null}
            </div>

            {storyDescription ? (
              <p className="text-base leading-relaxed text-muted-foreground md:text-lg">
                {storyDescription}
              </p>
            ) : null}

            {highlights && highlights.length > 0 ? (
              <div className="flex flex-wrap gap-6 pt-4">
                {highlights.map((item: HighlightItem, index) => {
                  const Icon = iconMap[item.icon as keyof typeof iconMap]

                  return (
                    <div className="flex items-center gap-4" key={`${item.label}-${index}`}>
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10">
                        {Icon ? <Icon className="h-6 w-6 text-primary stroke-[1.8]" /> : null}
                      </div>
                      <div>
                        <p className="text-xs font-bold uppercase tracking-wider text-primary">
                          {item.label}
                        </p>
                        {item.value ? (
                          <p className="text-sm text-muted-foreground">{item.value}</p>
                        ) : null}
                      </div>
                    </div>
                  )
                })}
              </div>
            ) : null}
          </div>

          <div className="overflow-hidden rounded-2xl border border-border/10 shadow-md aspect-video">
            {mediaResource ? (
              <div className="relative h-full w-full">
                <Media
                  alt={mediaAlt}
                  fill
                  htmlElement={null}
                  imgClassName="object-cover"
                  resource={mediaResource}
                />
                <div className="absolute inset-0 bg-primary/10" />
              </div>
            ) : null}
          </div>
        </div>
      </div>

      {hasFarmers ? (
        <div className="space-y-6">
          {farmersHeading ? (
            <div className="text-center">
              <h3 className="font-serif text-2xl font-medium leading-tight text-primary md:text-4xl">
                {farmersHeading}
              </h3>
            </div>
          ) : null}

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {farmers.map((farmer: FarmerItem, index) => {
              const photoResource = isMediaResource(farmer.photo) ? farmer.photo : null
              const photoAlt = farmer.photoAlt || farmer.name

              return (
                <article
                  className="group overflow-hidden rounded-2xl border border-border/20 bg-white transition-all hover:shadow-lg dark:bg-card"
                  key={`${farmer.name}-${index}`}
                >
                  <div className="overflow-hidden aspect-square">
                    {photoResource ? (
                      <div className="relative h-full w-full">
                        <Media
                          alt={photoAlt}
                          fill
                          htmlElement={null}
                          imgClassName="object-cover transition-transform duration-700 group-hover:scale-105"
                          resource={photoResource}
                        />
                      </div>
                    ) : null}
                  </div>

                  <div className="space-y-4 p-6">
                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <h4 className="font-serif text-xl font-medium leading-tight text-primary">
                          {farmer.name}
                        </h4>
                        <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                          <MapPin className="h-3.5 w-3.5" />
                          <span>{farmer.location}</span>
                        </div>
                      </div>

                      {farmer.experienceBadge ? (
                        <span className="rounded-full bg-primary/10 px-2 py-1 text-[10px] font-bold text-primary">
                          {farmer.experienceBadge}
                        </span>
                      ) : null}
                    </div>

                    <div className="border-t border-border/20 pt-4">
                      <p className="text-[11px] font-bold uppercase tracking-wider text-primary">
                        Spesialisasi
                      </p>
                      <p className="text-sm leading-relaxed text-muted-foreground">
                        {farmer.specialization}
                      </p>
                    </div>
                  </div>
                </article>
              )
            })}
          </div>
        </div>
      ) : null}
    </section>
  )
}