import { Text, View } from '@tarojs/components'
import Chip from '@/components/ui/Chip'
import NearbyPetCard from '../NearbyPetCard'
import { useDragSheet } from '@/hooks/useDragSheet'
import type { NearbyPet } from '@/types/domain'
import './index.scss'

interface NearbySheetProps {
  pets: NearbyPet[]
  activeId?: string
  filter: string
  state?: 'ready' | 'loading' | 'disabled'
  onFilterChange: (filter: string) => void
  onSelect: (id: string) => void
  onFriendAction: (pet: NearbyPet) => void
  onLike: (id: string) => void
}

const filters = [
  { key: 'all', label: '全部' },
  { key: 'dog', label: '狗狗' },
  { key: 'cat', label: '猫咪' },
  { key: 'online', label: '在线' }
]

export function NearbySheet({
  pets,
  activeId,
  filter,
  state = 'ready',
  onFilterChange,
  onSelect,
  onFriendAction,
  onLike
}: NearbySheetProps) {
  const sheet = useDragSheet(220)
  const emptyText = state === 'loading'
    ? '正在读取附近设置…'
    : state === 'disabled'
      ? '附近可见已关闭，可在「我的」里重新开启'
      : '附近暂时没有汪友，换个时间或挪个位置再看看～'

  return (
    <View
      className={`nearby-sheet ${sheet.isMin ? 'nearby-sheet--min' : ''} ${sheet.dragging ? 'nearby-sheet--dragging' : ''}`}
      style={{ height: `${sheet.height}px` }}
      catchMove
    >
      <View
        className='nearby-sheet__handle'
        onTouchStart={sheet.onTouchStart}
        onTouchMove={sheet.onTouchMove}
        onTouchEnd={sheet.onTouchEnd}
        onTouchCancel={sheet.onTouchEnd}
      >
        <View className='nearby-sheet__bar' />
      </View>

      <View className='nearby-sheet__header'>
        <View>
          <Text className='nearby-sheet__title'>附近的毛孩子</Text>
          <Text className='nearby-sheet__count'>{pets.length} 位正在附近活动</Text>
        </View>
      </View>

      <View className='nearby-sheet__chips'>
        {filters.map(item => (
          <Chip key={item.key} active={filter === item.key} onClick={() => onFilterChange(item.key)}>
            {item.label}
          </Chip>
        ))}
      </View>

      <View className='nearby-sheet__list'>
        {pets.length === 0 ? (
          <Text className='nearby-sheet__empty'>{emptyText}</Text>
        ) : (
          pets.map(pet => (
            <NearbyPetCard
              key={pet._id}
              pet={pet}
              active={pet._id === activeId}
              onSelect={() => onSelect(pet._id)}
              onFriendAction={() => onFriendAction(pet)}
              onLike={() => onLike(pet._id)}
            />
          ))
        )}
      </View>
    </View>
  )
}

export default NearbySheet
