import Taro from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import Avatar from '@/components/ui/Avatar'
import type { Post } from '@/types/domain'
import './index.scss'

interface PostCardProps {
  post: Post
  onLike: (postId: string) => void
  onComment?: (postId: string) => void
  // Opens the post detail page (triggered by tapping the body, photos or the
  // comment button). When provided it takes precedence over onComment.
  onOpen?: (postId: string) => void
  // When true, tapping a photo opens the native full-screen image preview
  // instead of navigating. Used on the detail page where there's nowhere to go.
  enableImagePreview?: boolean
  // When provided, shows a "···" button (used on 我的动态 for edit/delete).
  onMore?: (postId: string) => void
}

function PostActionIcon({ type, onClick }: { type: 'heart' | 'comment'; onClick?: () => void }) {
  return <View className={`icon icon--${type}`} onClick={onClick} />
}

export function PostCard({ post, onLike, onComment, onOpen, enableImagePreview, onMore }: PostCardProps) {
  const openDetail = onOpen ? () => onOpen(post._id) : undefined
  const handleComment = onOpen ? openDetail : onComment ? () => onComment(post._id) : undefined
  const urls = (post.media || []).filter(url => !url.startsWith('cloud://'))
  const previewImage = (current: string) => Taro.previewImage({ current, urls })
  return (
    <View className='post-card'>
      <View className='post-card__head'>
        <Avatar avatarKey={post.author.avatarKey} avatarUrl={post.author.avatarUrl} size='md' online={post.author.online} />
        <View className='post-card__meta'>
          <View className='post-card__name-row'>
            <Text className='post-card__name'>{post.author.name}</Text>
            <Text className={`post-card__pet post-card__pet--${post.pet.tone || 'purple'}`}>
              {post.pet.name} · {post.pet.breed}
            </Text>
          </View>
          <View className='post-card__sub'>
            <Text>{post.locationText}</Text>
            <View className='post-card__dot' />
            <Text>{post.timeText}</Text>
          </View>
        </View>
        {onMore ? (
          <View
            className='post-card__more'
            onClick={event => {
              event.stopPropagation()
              onMore(post._id)
            }}
          >
            <Text className='post-card__more-dots'>···</Text>
          </View>
        ) : null}
      </View>

      <Text className='post-card__body' onClick={openDetail}>{post.body}</Text>

      {urls.length ? (
        <View className={`post-card__photos post-card__photos--${Math.min(urls.length, 3)}`}>
          {urls.slice(0, 9).map((src, i) => (
            <Image
              key={i}
              className='post-card__photo'
              src={src}
              mode='aspectFill'
              onClick={enableImagePreview ? () => previewImage(src) : openDetail}
            />
          ))}
        </View>
      ) : null}

      <View className={`post-card__actions ${post.likedByMe ? 'post-card__actions--liked' : ''}`}>
        <PostActionIcon type='heart' onClick={() => onLike(post._id)} />
        <Text onClick={() => onLike(post._id)}>{post.counts.likes}</Text>
        <PostActionIcon type='comment' onClick={handleComment} />
        <Text onClick={handleComment}>{post.counts.comments}</Text>
      </View>
    </View>
  )
}

export default PostCard
