'use client'

import { Box } from '@pikku/mantine/core'
import { IconUser } from '@tabler/icons-react'
import { useEffect, useState } from 'react'

const countryCodeToEmoji: Record<string, string> = {
  AFG: '🇦🇫',
  ALB: '🇦🇱',
  DZA: '🇩🇿',
  AND: '🇦🇩',
  AGO: '🇦🇴',
  ARG: '🇦🇷',
  ARM: '🇦🇲',
  AUS: '🇦🇺',
  AUT: '🇦🇹',
  AZE: '🇦🇿',
  BHR: '🇧🇭',
  BGD: '🇧🇩',
  BLR: '🇧🇾',
  BEL: '🇧🇪',
  BIH: '🇧🇦',
  BOL: '🇧🇴',
  BRA: '🇧🇷',
  BGR: '🇧🇬',
  KHM: '🇰🇭',
  CMR: '🇨🇲',
  CAN: '🇨🇦',
  CHL: '🇨🇱',
  CHN: '🇨🇳',
  COL: '🇨🇴',
  CRI: '🇨🇷',
  HRV: '🇭🇷',
  CUB: '🇨🇺',
  CYP: '🇨🇾',
  CZE: '🇨🇿',
  DNK: '🇩🇰',
  ECU: '🇪🇨',
  EGY: '🇪🇬',
  SLV: '🇸🇻',
  EST: '🇪🇪',
  ETH: '🇪🇹',
  FIN: '🇫🇮',
  FRA: '🇫🇷',
  GEO: '🇬🇪',
  DEU: '🇩🇪',
  GHA: '🇬🇭',
  GRC: '🇬🇷',
  GTM: '🇬🇹',
  HND: '🇭🇳',
  HUN: '🇭🇺',
  ISL: '🇮🇸',
  IND: '🇮🇳',
  IDN: '🇮🇩',
  IRN: '🇮🇷',
  IRQ: '🇮🇶',
  IRL: '🇮🇪',
  ISR: '🇮🇱',
  ITA: '🇮🇹',
  JPN: '🇯🇵',
  JOR: '🇯🇴',
  KAZ: '🇰🇿',
  KEN: '🇰🇪',
  KWT: '🇰🇼',
  KGZ: '🇰🇬',
  LAO: '🇱🇦',
  LVA: '🇱🇻',
  LBN: '🇱🇧',
  LBY: '🇱🇾',
  LTU: '🇱🇹',
  LUX: '🇱🇺',
  MYS: '🇲🇾',
  MEX: '🇲🇽',
  MDA: '🇲🇩',
  MNG: '🇲🇳',
  MNE: '🇲🇪',
  MAR: '🇲🇦',
  NPL: '🇳🇵',
  NLD: '🇳🇱',
  NZL: '🇳🇿',
  NIC: '🇳🇮',
  NGA: '🇳🇬',
  MKD: '🇲🇰',
  NOR: '🇳🇴',
  OMN: '🇴🇲',
  PAK: '🇵🇰',
  PAN: '🇵🇦',
  PRY: '🇵🇾',
  PER: '🇵🇪',
  PHL: '🇵🇭',
  POL: '🇵🇱',
  PRT: '🇵🇹',
  QAT: '🇶🇦',
  ROU: '🇷🇴',
  RUS: '🇷🇺',
  SAU: '🇸🇦',
  SRB: '🇷🇸',
  SGP: '🇸🇬',
  SVK: '🇸🇰',
  SVN: '🇸🇮',
  ZAF: '🇿🇦',
  KOR: '🇰🇷',
  ESP: '🇪🇸',
  LKA: '🇱🇰',
  SDN: '🇸🇩',
  SWE: '🇸🇪',
  CHE: '🇨🇭',
  SYR: '🇸🇾',
  TWN: '🇹🇼',
  TJK: '🇹🇯',
  THA: '🇹🇭',
  TUN: '🇹🇳',
  TUR: '🇹🇷',
  TKM: '🇹🇲',
  UGA: '🇺🇬',
  UKR: '🇺🇦',
  ARE: '🇦🇪',
  GBR: '🇬🇧',
  USA: '🇺🇸',
  URY: '🇺🇾',
  UZB: '🇺🇿',
  VEN: '🇻🇪',
  VNM: '🇻🇳',
  YEM: '🇾🇪',
  ZMB: '🇿🇲',
  ZWE: '🇿🇼',
}

const getCountryFlag = (countryCode: string | null): string => {
  if (!countryCode) return '🌍'

  return countryCodeToEmoji[countryCode.toUpperCase()] || '🌍'
}

type CandidateProfileAvatarProps = {
  countryCode: string | null
  imageBorderWidth: number
  badgeBorderWidth: number
  badgeOffset: number
  badgeSize: number
  iconSize: number
  name: string
  profileImageUrl?: string | null
  size: number
}

export function CandidateProfileAvatar({
  countryCode,
  imageBorderWidth,
  badgeBorderWidth,
  badgeOffset,
  badgeSize,
  iconSize,
  name,
  profileImageUrl,
  size,
}: CandidateProfileAvatarProps) {
  const [imageFailed, setImageFailed] = useState(false)

  useEffect(() => {
    setImageFailed(false)
  }, [profileImageUrl])

  const showImage = Boolean(profileImageUrl) && !imageFailed

  return (
    <Box pos="relative" style={{ width: size, height: size, flexShrink: 0 }}>
      <Box
        style={{
          width: size,
          height: size,
          borderRadius: '50%',
          backgroundColor: 'var(--mantine-color-gray-1)',
          border: `${imageBorderWidth}px solid var(--mantine-color-gray-3)`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
        }}
      >
        {showImage ? (
          <Box
            component="img"
            src={profileImageUrl!}
            alt={`${name} profile image`}
            onError={() => setImageFailed(true)}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              display: 'block',
            }}
          />
        ) : (
          <IconUser size={iconSize} color="var(--mantine-color-gray-5)" />
        )}
      </Box>
      <Box
        style={{
          position: 'absolute',
          bottom: badgeOffset,
          right: badgeOffset,
          fontSize: `${Math.round(badgeSize * 0.58)}px`,
          width: badgeSize,
          height: badgeSize,
          backgroundColor: 'white',
          border: `${badgeBorderWidth}px solid var(--mantine-color-gray-3)`,
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {getCountryFlag(countryCode)}
      </Box>
    </Box>
  )
}