import React from 'react'
import Image from 'next/image'
import type { Media as MediaType } from '@/payload-types'

type ShowcaseItem = {
  image?: MediaType | null
  imageUrl?: string
  title: string
  description?: string
  tags?: { tag: string }[]
  links?: { label: string; url: string; newTab?: boolean }[]
}

type ShowcaseBlockProps = {
  heading?: string
  subheading?: string
  items?: ShowcaseItem[]
}

function ShowcaseImage(props: { item: ShowcaseItem }): React.ReactElement {
  const item = props.item
  const image = item.image
  const imageUrl = image != null && typeof image === 'object' && 'url' in image ? image.url : null
  const imageAlt =
    image != null && typeof image === 'object' && 'alt' in image ? image.alt : item.title

  if (imageUrl != null) {
    const imgEl = (
      <div className="relative w-full aspect-video overflow-hidden">
        <Image src={imageUrl} alt={imageAlt ?? item.title} fill className="object-cover" />
        {item.imageUrl && (
          <div className="absolute inset-0 bg-background/0 group-hover:bg-background/20 transition-colors duration-200" />
        )}
        {item.imageUrl && (
          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <i
              className="ti ti-external-link text-foreground/80"
              style={{ fontSize: 20 }}
              aria-hidden="true"
            />
          </div>
        )}
      </div>
    )

    if (item.imageUrl) {
      return (
        <a href={item.imageUrl} target="_blank" rel="noopener noreferrer" className="block group">
          {imgEl}
        </a>
      )
    }
    return imgEl
  }

  return (
    <div className="relative w-full aspect-video bg-muted/30 flex flex-col items-center justify-center gap-2 border-b border-foreground/8">
      <i
        className="ti ti-photo-off text-foreground/15"
        style={{ fontSize: 28 }}
        aria-hidden="true"
      />
      <span className="text-xs text-foreground/20">Coming soon</span>
    </div>
  )
}

export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | null {
  const { heading, subheading, items } = props

  if (!Array.isArray(items) || items.length === 0) return null

  return (
    <section className="w-full max-w-5xl mx-auto px-6 py-12">
      {(heading || subheading) && (
        <div className="mb-8">
          {heading && <h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>}
          {subheading && <p className="text-sm text-foreground/40">{subheading}</p>}
        </div>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {items.map(function (item, i) {
          const isFeatured = i === 0 && items.length > 1
          return (
            <div
              key={i}
              className={
                'bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden flex flex-col' +
                (isFeatured ? ' sm:col-span-2 lg:col-span-2' : '')
              }
            >
              <ShowcaseImage item={item} />
              <div className="p-4 flex flex-col gap-3 flex-1">
                <h3 className="text-sm font-medium text-foreground/85">{item.title}</h3>
                {item.description && (
                  <p className="text-xs text-foreground/40 leading-relaxed">{item.description}</p>
                )}
                {Array.isArray(item.tags) && item.tags.length > 0 && (
                  <div className="flex flex-wrap gap-1.5">
                    {item.tags.map(function (t, j) {
                      return (
                        <span
                          key={j}
                          className="text-xs text-foreground/40 bg-background/50 border border-foreground/8 rounded-full px-2.5 py-0.5"
                        >
                          {t.tag}
                        </span>
                      )
                    })}
                  </div>
                )}
                {Array.isArray(item.links) && item.links.length > 0 && (
                  <div className="flex flex-wrap gap-3 mt-auto pt-3 border-t border-foreground/8">
                    {item.links.map(function (link, k) {
                      return (
                        <a
                          key={k}
                          href={link.url}
                          target={link.newTab ? '_blank' : '_self'}
                          rel="noopener noreferrer"
                          className="flex items-center gap-1.5 text-xs text-foreground/40 hover:text-foreground/70 transition-colors"
                        >
                          <i
                            className="ti ti-external-link"
                            style={{ fontSize: 12 }}
                            aria-hidden="true"
                          />
                          {link.label}
                        </a>
                      )
                    })}
                  </div>
                )}
              </div>
            </div>
          )
        })}
      </div>
    </section>
  )
}
