'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import Image from 'next/image'
import { Container } from '../ui/Container'
import { SectionHeader } from '../ui/SectionHeader'
import { DynamicIcon } from '../ui/DynamicIcon'
import { cn } from '@/lib/utils'

interface CardGridBlockProps {
  block: Record<string, unknown>
}

export function CardGridBlock({ block }: CardGridBlockProps) {
  const title = (block.title as string) || (block.headline as string) || ''
  const subtitle = (block.subtitle as string) || ''
  const cards = (block.cards as Array<Record<string, unknown>>) || []
  const columns = (block.columns as number) || 3
  const backgroundColor = (block.backgroundColor as string) || 'white'

  const gridCols: Record<number, string> = {
    2: 'md:grid-cols-2',
    3: 'md:grid-cols-2 lg:grid-cols-3',
    4: 'md:grid-cols-2 lg:grid-cols-4',
  }

  return (
    <section
      className={cn(
        'py-ws-m',
        backgroundColor === 'light' && 'bg-light-bg'
      )}
    >
      <Container>
        {(title || subtitle) && (
          <SectionHeader title={title} subtitle={subtitle} />
        )}

        <div className={cn('grid grid-cols-1 gap-8', gridCols[columns] || gridCols[3])}>
          {cards.map((card, index) => {
            const cardTitle = (card.title as string) || ''
            const cardDescription = (card.description as string) || (card.text as string) || ''
            const mediaType = (card.mediaType as string) || 'none'
            const cardIcon = card.icon as string | undefined
            const iconPosition = (card.iconPosition as string) || 'top'
            const cardImage = card.image as Record<string, unknown> | undefined
            const cardImageUrl = cardImage?.url as string | undefined
            const cardLink = card.link as Record<string, unknown> | undefined
            const cardLinkLabel = (cardLink?.label as string) || 'Mehr erfahren'
            const cardLinkHref = (cardLink?.href as string) || (cardLink?.url as string) || ''

            const isIconLeft = mediaType === 'icon' && iconPosition === 'left'

            return (
              <motion.div
                key={index}
                className={cn(
                  'p-[50px_40px]',
                  'border border-light-soft bg-white',
                  'shadow-card transition-all duration-300',
                  'hover:-translate-y-[10px] hover:shadow-card-hover',
                  isIconLeft && 'flex gap-6'
                )}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1, duration: 0.5 }}
              >
                {/* Icon left */}
                {mediaType === 'icon' && cardIcon && isIconLeft && (
                  <div className="shrink-0 text-dark">
                    <DynamicIcon name={cardIcon} size={48} strokeWidth={1.5} />
                  </div>
                )}

                <div className={isIconLeft ? 'flex-1' : ''}>
                  {/* Icon top */}
                  {mediaType === 'icon' && cardIcon && !isIconLeft && (
                    <div className="text-dark mb-6">
                      <DynamicIcon name={cardIcon} size={64} strokeWidth={1.5} />
                    </div>
                  )}

                  {/* Image */}
                  {mediaType === 'image' && cardImageUrl && (
                    <div className="mb-6 -mx-[40px] -mt-[50px]">
                      <Image
                        src={cardImageUrl}
                        alt={cardTitle}
                        width={400}
                        height={250}
                        className="w-full h-auto"
                      />
                    </div>
                  )}

                  {/* Title */}
                  <h3 className="font-heading font-bold text-[1.07em] tracking-[3px] uppercase text-dark mt-0 mb-[30px]">
                    {cardTitle}
                  </h3>

                  {/* Description */}
                  <p className="text-gray leading-[1.8em] m-0">
                    {cardDescription}
                  </p>

                  {/* Link */}
                  {cardLinkHref && (
                    <Link
                      href={cardLinkHref}
                      className={cn(
                        'block pt-[50px] text-right',
                        'font-heading text-[0.85em] tracking-[2px] uppercase',
                        'text-gray-light hover:text-dark',
                        'border-none transition-colors duration-500'
                      )}
                    >
                      {cardLinkLabel} &rarr;
                    </Link>
                  )}
                </div>
              </motion.div>
            )
          })}
        </div>
      </Container>
    </section>
  )
}
