import type { DefaultDocumentIDType } from 'payload'

import {
  ClipboardCheck,
  Lock,
  MessageCircle,
  PackageCheck,
  PhoneCall,
  Search,
  ShieldCheck,
  Truck,
} from 'lucide-react'
import Link from 'next/link'
import React from 'react'

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

type CaraKerjaItem = NonNullable<CaraKerjaBlockProps['items']>[number]
type PaymentMethodItem = NonNullable<CaraKerjaBlockProps['paymentMethods']>[number]
type TrustLinkItem = NonNullable<CaraKerjaBlockProps['trustLinks']>[number]

const iconMap = {
  fact_check: ClipboardCheck,
  forum: MessageCircle,
  local_shipping: Truck,
  phone_in_talk: PhoneCall,
  search: Search,
} as const

const trustIconMap = {
  assignment_return: PackageCheck,
  local_shipping: Truck,
  lock: Lock,
  verified_user: ShieldCheck,
} as const

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

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

  const hasPaymentMethods = paymentMethods && paymentMethods.length > 0
  const hasTrustLinks = trustLinks && trustLinks.length > 0

  return (
    <section className={cn('bg-primary py-0', className)}>
      <div className="max-w-7xl mx-auto px-4 md:px-16 py-8 text-center">
        <div className="text-center mb-6 space-y-2">
          <h2 className="font-serif md:text-3xl text-2xl font-bold text-primary-foreground mb-1">
            {heading}
          </h2>
          {description ? (
            <p className="text-center text-primary-foreground/80 max-w-2xl mx-auto text-sm md:text-base leading-relaxed">
              {description}
            </p>
          ) : null}
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {items.map((item: CaraKerjaItem, index) => {
            const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : null
            const media = isMediaResource(item.media) ? item.media : null
            const shouldUseImage = item.mediaMode === 'image' && media

            return (
              <article
                className="bg-white dark:bg-card rounded-2xl shadow-sm border border-border/10 flex flex-col h-full text-center items-center group hover:shadow-md transition-shadow p-4"
                key={`${item.title}-${index}`}
              >
                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mb-3 shrink-0 overflow-hidden">
                  {shouldUseImage ? (
                    <div className="relative h-full w-full">
                      <Media
                        alt={item.mediaAlt || item.title}
                        fill
                        htmlElement={null}
                        imgClassName="object-cover"
                        resource={media}
                      />
                    </div>
                  ) : Icon ? (
                    <Icon className="h-[18px] w-[18px] text-primary stroke-[1.8]" />
                  ) : null}
                </div>

                <div className="w-full flex-grow space-y-1">
                  <h3 className="text-[14px] font-bold text-primary mb-1 uppercase tracking-wide">
                    {item.title}
                  </h3>
                  <p className="text-[13px] text-muted-foreground leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </article>
            )
          })}
        </div>

        {hasPaymentMethods ? (
          <div className="my-6 rounded-xl bg-white p-4 shadow-sm dark:bg-card">
            <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
              {paymentMethods.map((method: PaymentMethodItem, index) => {
                const logo = isMediaResource(method.logo) ? method.logo : null
                const logoAlt = method.logoAlt || method.label

                const content = (
                  <span className="flex min-h-10 items-center justify-center rounded-lg border border-border/20 bg-background px-3 py-2 transition-colors hover:bg-muted">
                    {logo ? (
                      <span className="relative block h-8 w-20">
                        <Media
                          alt={logoAlt}
                          fill
                          htmlElement={null}
                          imgClassName="object-contain"
                          resource={logo}
                        />
                      </span>
                    ) : (
                      <span className="text-sm font-bold text-primary">{method.label}</span>
                    )}
                  </span>
                )

                return method.url ? (
                  <Link
                    aria-label={method.label}
                    href={method.url}
                    key={`${method.label}-${index}`}
                  >
                    {content}
                  </Link>
                ) : (
                  <span key={`${method.label}-${index}`}>{content}</span>
                )
              })}
            </div>
          </div>
        ) : null}

        {hasTrustLinks ? (
          <div className="mt-4 border-t border-primary-foreground/10 pt-8">
            <nav
              aria-label="Kebijakan dan kepercayaan"
              className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-primary-foreground/90"
            >
              {trustLinks.map((trustLink: TrustLinkItem, index) => {
                const Icon = trustLink.icon
                  ? trustIconMap[trustLink.icon as keyof typeof trustIconMap]
                  : null
                const isExternal = trustLink.newTab

                return (
                  <React.Fragment key={`${trustLink.label}-${index}`}>
                    {index > 0 ? (
                      <div className="hidden h-4 w-px bg-primary-foreground/20 md:block" />
                    ) : null}
                    <Link
                      className="group flex items-center gap-2 transition-colors hover:text-primary-foreground"
                      href={trustLink.url}
                      rel={isExternal ? 'noopener noreferrer' : undefined}
                      target={isExternal ? '_blank' : undefined}
                    >
                      {Icon ? <Icon className="h-5 w-5 text-primary-foreground/80" /> : null}
                      <span className="border-b border-primary-foreground/20 text-sm group-hover:border-primary-foreground">
                        {trustLink.label}
                      </span>
                    </Link>
                  </React.Fragment>
                )
              })}
            </nav>
          </div>
        ) : null}
      </div>
    </section>
  )
}