<template>
    <view class="comment-message-card">
        <view class="comment-header">
            <text class="comment-title">{{ title }}</text>
        </view>

        <view class="comment-body">
            <!-- 星级评分 -->
            <view class="star-rating">
                <view
                    v-for="star in 5"
                    :key="star"
                    class="star-item"
                    :class="{
                        'is-active': star <= currentRating,
                        'is-disabled': !canComment || isSubmitted
                    }"
                    @tap="handleStarClick(star)"
                >
                    <text class="star-icon" :class="star <= currentRating ? 'star-filled' : 'star-empty'">★</text>
                </view>
            </view>

            <!-- 评分描述 -->
            <view v-if="currentRating > 0" class="rating-desc">
                <text class="rating-desc-text">{{ getRatingDesc(currentRating) }}</text>
            </view>

            <!-- 不可评价提示 -->
            <view v-if="!canComment && !isSubmitted" class="no-permission">
                <text class="no-permission-text">仅访客可评价</text>
            </view>

            <!-- 已评分状态 -->
            <view v-else-if="isSubmitted" class="submitted-status">
                <text class="submitted-text">✓ 已评分</text>
            </view>

            <!-- 提交按钮 -->
            <button
                v-else-if="canComment"
                class="submit-btn"
                :class="{ 'is-active': currentRating > 0 }"
                :disabled="currentRating === 0 || submitting"
                @tap="handleSubmit"
            >
                <text class="submit-btn-text">{{ submitting ? '提交中...' : '提交评分' }}</text>
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
    roomId: string
    initialRating?: number
    canComment?: boolean  // 是否可以评价（当前用户是否为guestId）
    title?: string
}

const props = withDefaults(defineProps<Props>(), {
    initialRating: 0,
    canComment: false,
    title: '请为本次服务评分'
})

const emit = defineEmits<{
    submit: [rating: number]
}>()

const currentRating = ref(props.initialRating)
const submitting = ref(false)
const isSubmitted = ref(props.initialRating > 0)

// 监听 initialRating 变化
watch(() => props.initialRating, (newVal) => {
    currentRating.value = newVal
    isSubmitted.value = newVal > 0
})

// 星级描述映射
const ratingDescriptions = {
    1: '非常不满意',
    2: '不满意',
    3: '一般',
    4: '满意',
    5: '非常满意'
}

const getRatingDesc = (rating: number): string => {
    return ratingDescriptions[rating as keyof typeof ratingDescriptions] || ''
}

const handleStarClick = (star: number) => {
    if (!props.canComment || isSubmitted.value) return
    currentRating.value = star
}

const handleSubmit = () => {
    if (currentRating.value === 0 || !props.canComment || isSubmitted.value) return

    submitting.value = true
    try {
        emit('submit', currentRating.value)
        isSubmitted.value = true
    } finally {
        submitting.value = false
    }
}
</script>

<style scoped lang="scss">
@import './CommentMessageCard.scss';
</style>
