import { useEffect, useState } from 'react'
import { Image, Text, View } from '@tarojs/components'
import Icon from '@/components/ui/Icon'
import type { NearbyPet } from '@/types/domain'
import './index.scss'

interface NearbyPetCardProps {
  pet: NearbyPet
  active: boolean
  onSelect: () => void
  onFriendAction: () => void
  onLike: () => void
}

export function NearbyPetCard({ pet, active, onSelect, onFriendAction, onLike }: NearbyPetCardProps) {
  // Real uploaded photo (already resolved to a temp URL upstream) takes priority;
  // otherwise — or if the image fails to load (403 / expired) — fall back to the
  // photoKey gradient swatch.
  const [imgFailed, setImgFailed] = useState(false)
  useEffect(() => setImgFailed(false), [pet.photoUrl])
  const photoUrl = !imgFailed && pet.photoUrl && !pet.photoUrl.startsWith('cloud://') ? pet.photoUrl : ''
  const relation = pet.isMine
    ? { key: 'mine', label: '我的', icon: 'user' as const }
    : pet.isFriend
      ? { key: 'friend', label: '聊天', icon: 'message' as const }
      : pet.isFollowing
        ? { key: 'pending', label: '待回关', icon: 'check' as const }
        : { key: 'add', label: '加汪友', icon: 'plus' as const }

  return (
    <View className={`nearby-pet-card ${active ? 'nearby-pet-card--active' : ''}`} onClick={onSelect}>
      <View className={`nearby-pet-card__photo ${photoUrl ? '' : pet.photoKey || ''}`}>
        {photoUrl ? (
          <Image
            className='nearby-pet-card__photo-img'
            src={photoUrl}
            mode='aspectFill'
            onError={() => setImgFailed(true)}
          />
        ) : null}
        <Text className='nearby-pet-card__distance'>{pet.distanceText}</Text>
      </View>
      <View className='nearby-pet-card__info'>
        <View className='nearby-pet-card__title'>
          <Text className='nearby-pet-card__name'>{pet.name}</Text>
          {pet.online ? <View className='nearby-pet-card__online' /> : null}
        </View>
        <Text className='nearby-pet-card__meta'>
          {pet.breed} · {pet.ageText}
        </Text>
        <Text className='nearby-pet-card__mood'>{pet.mood}</Text>
        <View className='nearby-pet-card__tags'>
          {pet.tags.slice(0, 2).map(tag => (
            <Text key={tag} className='nearby-pet-card__tag'>
              {tag}
            </Text>
          ))}
        </View>
      </View>
      <View className='nearby-pet-card__actions'>
        <View
          className={`nearby-pet-card__friend nearby-pet-card__friend--${relation.key}`}
          onClick={event => {
            event.stopPropagation()
            onFriendAction()
          }}
        >
          <Icon name={relation.icon} size={13} />
          <Text className='nearby-pet-card__friend-text'>{relation.label}</Text>
        </View>
        <View
          className={`nearby-pet-card__btn nearby-pet-card__btn--like ${pet.likedByMe ? 'nearby-pet-card__btn--liked' : ''}`}
          onClick={event => {
            event.stopPropagation()
            onLike()
          }}
        >
          <Icon name={pet.likedByMe ? 'heart-fill' : 'heart'} size={16} />
        </View>
      </View>
    </View>
  )
}

export default NearbyPetCard
