import type { DefaultDocumentIDType } from 'payload'

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

import { CMSLink } from '@/components/Link'
import { Media } from '@/components/Media'
import type {
  HomepageHeroBlock as HomepageHeroBlockProps,
  Media as MediaType,
} from '@/payload-types'

type PromoCard = NonNullable<HomepageHeroBlockProps['promoCards']>[number]

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

export const HomepageHeroBlock: React.FC<
  HomepageHeroBlockProps & {
    id?: DefaultDocumentIDType
    className?: string
  }
> = ({ description, eyebrow, heading, links, media, promoCards }) => {
  const primaryLink = links?.[0]?.link

  return (
    <section className="max-w-7xl mx-auto px-4 md:px-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-8 pt-16">
      <div className="z-10 relative space-y-4">
        {eyebrow ? (
          <span className="text-[12px] uppercase tracking-[0.2em] text-muted-foreground/60 font-medium font-sans block mb-2">
            {eyebrow}
          </span>
        ) : null}

        <div className="space-y-4">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-bold leading-[1.05] text-secondary tracking-tight mb-8">
            {heading}
          </h1>

          <div className="flex items-center gap-2 text-muted-foreground/75 font-medium text-[14px] mb-4">
            <Leaf className="h-4 w-4 text-primary" />
            <span>5,000+ happy plant parents across Indonesia</span>
          </div>

          {description ? (
            <p className="text-base text-muted-foreground font-sans leading-relaxed max-w-md mb-8">
              {description}
            </p>
          ) : null}
        </div>

        {primaryLink ? (
          <div className="flex flex-wrap gap-4 pt-2">
            <CMSLink
              appearance={primaryLink.appearance}
              className="bg-secondary hover:bg-primary text-white py-3 px-6 h-auto rounded-full inline-flex items-center gap-2 transition-all shadow-xs group"
              {...primaryLink}
            >
              <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white text-primary group-hover:scale-110 transition-transform">
                <ArrowRight className="h-4 w-4" />
              </span>
              <span>{primaryLink.label}</span>
            </CMSLink>
          </div>
        ) : (
          <div className="flex flex-wrap gap-4 pt-2">
            <a
              href="/shop"
              className="bg-secondary hover:bg-primary text-white py-3 px-6 h-auto rounded-full inline-flex items-center gap-2 transition-all shadow-xs group"
            >
              <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white text-primary group-hover:scale-110 transition-transform">
                <ArrowRight className="h-4 w-4" />
              </span>
              <span>Shop Now</span>
            </a>
          </div>
        )}
      </div>

      <div className="relative w-full flex items-center justify-center lg:p-0">
        {isMediaResource(media) ? (
          <Media
            imgClassName="w-full h-auto object-contain max-h-[450px] xl:max-h-[560px]"
            resource={media}
          />
        ) : null}
      </div>
    </section>
  )
}