<template>
    <div class="comment-message-card">
        <div class="comment-header">
            <span class="comment-title">{{ title }}</span>
        </div>

        <div class="comment-body">
            <!-- 星级评分 -->
            <div class="star-rating">
                <div
                    v-for="star in 5"
                    :key="star"
                    class="star-item"
                    :class="{
                        'is-active': star <= currentRating,
                        'is-disabled': !canComment || isSubmitted
                    }"
                    @click="handleStarClick(star)"
                    @mouseenter="handleStarHover(star)"
                    @mouseleave="handleStarLeave"
                >
                    <Star
                        :size="28"
                        :fill="star <= (hoverRating || currentRating) ? '#FFD700' : 'none'"
                        :stroke="star <= (hoverRating || currentRating) ? '#FFD700' : '#d0d0d0'"
                    />
                </div>
            </div>

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

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

            <!-- 已评分状态 -->
            <div v-else-if="isSubmitted" class="submitted-status">
                <Check :size="16" />
                已评分
            </div>

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

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Star, Check } from 'lucide-vue-next'

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 hoverRating = ref(0)
const submitting = ref(false)
const isSubmitted = ref(props.initialRating > 0)

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

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

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

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

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

const handleStarLeave = () => {
    hoverRating.value = 0
}

const handleSubmit = async () => {
    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 url('./CommentMessageCard.scss');
</style>
