import React from 'react'
import type { FDTeamBlock as FDTeamBlockProps, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'

const sectionBgMap: Record<string, string> = {
  white: 'bg-white',
  gray:  'bg-[#e5e5e5]',
  navy:  'bg-fd-navy',
}

const cardMap: Record<string, { bg: string; name: string; role: string; bio: string; icon: string }> = {
  navy:  { bg: 'bg-fd-navy',     name: 'text-fd-yellow', role: 'text-white/70',    bio: 'text-white/60',    icon: 'text-white/40 hover:text-fd-yellow' },
  white: { bg: 'bg-white',       name: 'text-fd-navy',   role: 'text-fd-navy/60',  bio: 'text-fd-navy/60',  icon: 'text-fd-navy/40 hover:text-fd-navy' },
  gray:  { bg: 'bg-[#e5e5e5]',   name: 'text-fd-navy',   role: 'text-fd-navy/60',  bio: 'text-fd-navy/60',  icon: 'text-fd-navy/40 hover:text-fd-navy' },
}

const colsMap: Record<string, string> = {
  '2': 'sm:grid-cols-2',
  '3': 'sm:grid-cols-2 lg:grid-cols-3',
  '4': 'sm:grid-cols-2 lg:grid-cols-4',
}

export const FDTeamBlockComponent: React.FC<FDTeamBlockProps> = ({
  heading,
  subheading,
  members,
  columns = '3',
  cardStyle = 'navy',
  sectionBackground = 'white',
}) => {
  const sectionBg = sectionBgMap[sectionBackground] || sectionBgMap.white
  const card = cardMap[cardStyle] || cardMap.navy
  const gridCols = colsMap[columns] || colsMap['3']
  const isNavySection = sectionBackground === 'navy'

  return (
    <section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">

        {/* Header */}
        {(heading || subheading) && (
          <div className="flex flex-col gap-3 mb-10 md:mb-14">
            {heading && (
              <h2 className={`font-joey-heavy text-3xl md:text-4xl lg:text-5xl leading-tight ${isNavySection ? 'text-fd-yellow' : 'text-fd-navy'}`}>
                {heading}
              </h2>
            )}
            {subheading && (
              <p className={`font-joey text-lg md:text-xl ${isNavySection ? 'text-white/70' : 'text-fd-navy/60'}`}>
                {subheading}
              </p>
            )}
          </div>
        )}

        {/* Grid */}
        <div className={`grid grid-cols-1 ${gridCols} gap-6`}>
          {members?.map((member, i) => {
            const photo = member.photo as Media | undefined
            return (
              <div key={i} className={`${card.bg} rounded-[70px] overflow-hidden flex flex-col`}>

                {/* Photo */}
                <div className="aspect-[4/3] w-full overflow-hidden">
                  {photo?.url ? (
                    <FDImage
                      src={photo.url}
                      alt={photo.alt || member.name}
                      width={600}
                      height={450}
                      className="w-full h-full object-cover object-top"
                    />
                  ) : (
                    // Placeholder when no photo
                    <div className={`w-full h-full flex items-center justify-center ${cardStyle === 'navy' ? 'bg-fd-navy/50' : 'bg-fd-navy/10'}`}>
                      <svg viewBox="0 0 80 80" className="w-20 h-20 opacity-30" fill="currentColor">
                        <circle cx="40" cy="30" r="18" />
                        <path d="M10 72c0-16.6 13.4-30 30-30s30 13.4 30 30H10z" />
                      </svg>
                    </div>
                  )}
                </div>

                {/* Info */}
                <div className="flex flex-col gap-2 px-8 py-8 flex-1">
                  <p className={`font-joey-bold text-xl ${card.name}`}>{member.name}</p>
                  <p className={`font-joey text-sm ${card.role}`}>{member.role}</p>

                  {member.bio && (
                    <p className={`font-joey text-sm leading-relaxed mt-2 ${card.bio}`}>
                      {member.bio}
                    </p>
                  )}

                  {/* Links */}
                  {(member.email || member.linkedin) && (
                    <div className="flex items-center gap-4 mt-4">
                      {member.email && (
                        <a
                          href={`mailto:${member.email}`}
                          aria-label={`E-post till ${member.name}`}
                          className={`transition-colors ${card.icon}`}
                        >
                          {/* Email icon */}
                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </a>
                      )}
                      {member.linkedin && (
                        <a
                          href={member.linkedin}
                          target="_blank"
                          rel="noopener noreferrer"
                          aria-label={`LinkedIn för ${member.name}`}
                          className={`transition-colors ${card.icon}`}
                        >
                          {/* LinkedIn icon */}
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                          </svg>
                        </a>
                      )}
                    </div>
                  )}
                </div>

              </div>
            )
          })}
        </div>

      </div>
    </section>
  )
}