<template>
    <div class="min-h-screen bg-gray-50">
        <!-- Loading State -->
        <div v-if="loading" class="min-h-screen flex justify-center items-center bg-gray-50">
            <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-500"></div>
        </div>

        <!-- Error State -->
        <div v-else-if="error" class="min-h-screen flex flex-col justify-center items-center bg-gray-50 px-4">
            <div class="text-red-500 text-6xl mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <h1 class="text-2xl font-bold mb-2">无法签到</h1>
            <p class="text-gray-600 mb-6">{{ error }}</p>
            <Button @click="goBack" variant="primary">返回上一页</Button>
        </div>

        <!-- Already Checked In -->
        <div v-else-if="userCheckIn" class="py-8">
            <div class="container mx-auto px-4">
                <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gradient-to-r from-green-500 to-blue-500 px-6 py-4">
                        <h1 class="text-2xl font-bold text-white">签到成功</h1>
                    </div>

                    <div class="p-6 text-center">
                        <div class="flex justify-center">
                            <div class="rounded-full bg-green-100 p-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-green-500" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                        </div>

                        <h2 class="text-2xl font-bold text-gray-800 mt-6">您已完成签到</h2>
                        <p class="text-gray-600 mt-2">签到时间：{{ formatDate(userCheckIn.check_in_time) }}</p>
                        <p class="text-gray-600">祝您阅读愉快！</p>

                        <div class="mt-8">
                            <h3 class="font-semibold text-gray-800 mb-2">活动信息</h3>
                            <div class="bg-gray-50 rounded-lg p-4 text-left">
                                <p class="font-medium text-gray-900">{{ activity.title }}</p>
                                <p class="text-gray-600 text-sm mt-1">
                                    时间：{{ formatDate(activity.start_time) }} - {{ formatDate(activity.end_time) }}
                                </p>
                                <p class="text-gray-600 text-sm mt-1">
                                    地点：{{ activity.activity_type === 'online' ? '线上活动' : (activity.location ? (typeof
                                        activity.location === 'object' ? activity.location.name : activity.location) :
                                    '地点未设置') }}
                                </p>
                            </div>
                        </div>

                        <Button @click="goToActivityDetail" variant="primary" class="mt-8">
                            返回活动详情
                        </Button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activity Not Now -->
        <div v-else-if="!isActivityNow()" class="py-8">
            <div class="container mx-auto px-4">
                <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gradient-to-r from-green-500 to-blue-500 px-6 py-4">
                        <h1 class="text-2xl font-bold text-white">暂不可签到</h1>
                    </div>

                    <div class="p-6">
                        <div class="text-center">
                            <div class="inline-block rounded-full bg-blue-100 p-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-500" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>

                            <h2 class="text-xl font-bold text-gray-800 mt-6">签到尚未开始</h2>
                            <p class="text-gray-600 mt-2">
                                {{ new Date() < new Date(activity.start_time.replace(' ', ' T')) ? '活动签到将于活动开始前30分钟开放'
                                    : '活动已结束，签到已关闭' }} </p>

                                    <div class="mt-8">
                                        <h3 class="font-semibold text-gray-800 mb-2">活动信息</h3>
                                        <div class="bg-gray-50 rounded-lg p-4 text-left">
                                            <p class="font-medium text-gray-900">{{ activity.title }}</p>
                                            <p class="text-gray-600 text-sm mt-1">
                                                时间：{{ formatDate(activity.start_time) }} - {{
                                                formatDate(activity.end_time) }}
                                            </p>
                                            <p class="text-gray-600 text-sm mt-1">
                                                地点：{{ activity.activity_type === 'online' ? '线上活动' : (activity.location
                                                    ? (typeof activity.location === 'object' ? activity.location.name :
                                                activity.location) : '地点未设置') }}
                                            </p>
                                        </div>
                                    </div>

                                    <Button @click="goToActivityDetail" variant="primary" class="mt-6">
                                        返回活动详情
                                    </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Check-in Flow -->
        <div v-else class="py-8">
            <div class="container mx-auto px-4">
                <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gradient-to-r from-green-500 to-blue-500 px-6 py-4">
                        <h1 class="text-2xl font-bold text-white">活动签到</h1>
                    </div>

                    <div class="p-6">
                        <!-- Activity Info -->
                        <div class="mb-6">
                            <h2 class="text-xl font-medium text-gray-900 mb-2">{{ activity.title }}</h2>
                            <p class="text-gray-600 text-sm">
                                时间：{{ formatDate(activity.start_time) }} - {{ formatDate(activity.end_time) }}
                            </p>
                            <p class="text-gray-600 text-sm mt-1">
                                地点：{{ activity.activity_type === 'online' ? '线上活动' : (activity.location ? (typeof
                                    activity.location === 'object' ? activity.location.name : activity.location) : '地点未设置')
                                }}
                            </p>

                            <div v-if="userRegistration.status === 'approved'"
                                class="bg-green-50 border border-green-200 rounded-md p-3 mt-4">
                                <div class="flex">
                                    <svg class="h-5 w-5 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    <span class="text-green-800 font-medium">您的报名已通过审核</span>
                                </div>
                            </div>
                        </div>

                        <!-- Check-in Steps -->
                        <div v-if="checkInStep === 'initial'" class="text-center">
                            <div class="inline-block bg-blue-100 rounded-full p-4 mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                </svg>
                            </div>

                            <h3 class="text-lg font-medium text-gray-900 mb-2">活动签到</h3>
                            <p class="text-gray-600 mb-6">
                                点击下方按钮生成签到码，请向工作人员出示
                            </p>

                            <Button @click="generateCheckInCode" variant="primary" size="lg" block>
                                生成签到码
                            </Button>
                        </div>

                        <div v-else-if="checkInStep === 'code'" class="text-center">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">您的签到码</h3>
                            <p class="text-gray-600 mb-4">请向工作人员出示以下签到码</p>

                            <div class="border-2 border-gray-300 rounded-lg p-4 mb-6">
                                <div class="mb-4">
                                    <div class="w-48 h-48 mx-auto bg-gray-100 flex items-center justify-center">
                                        <div class="text-center">
                                            <div class="text-xl font-bold mb-2">签到码</div>
                                            <div class="text-3xl font-bold">{{ checkInCode }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex justify-center">
                                    <div
                                        class="text-3xl font-bold tracking-wide text-gray-800 py-2 px-4 border-2 border-gray-300 rounded-lg">
                                        {{ checkInCode }}
                                    </div>
                                </div>
                            </div>

                            <p class="text-sm text-gray-600">
                                {{ countdown > 0 ? `签到码有效期: ${countdown} 秒` : '签到码已过期，请重新生成' }}
                            </p>

                            <div class="mt-6 text-sm">
                                <p class="text-gray-700">或输入工作人员提供的活动码</p>
                                <div class="flex mt-2">
                                    <input type="text" v-model="inputCode" placeholder="请输入6位签到码"
                                        class="flex-1 block border-gray-300 rounded-l-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm" />
                                    <Button @click="handleSubmitCode" variant="primary" class="rounded-l-none"
                                        :disabled="isSubmitting || !inputCode">
                                        验证
                                    </Button>
                                </div>
                            </div>

                            <Button @click="setCheckInStep('initial')" variant="secondary" size="md" class="mt-6">
                                返回
                            </Button>
                        </div>

                        <div v-else-if="checkInStep === 'success'" class="text-center">
                            <div class="flex justify-center">
                                <div class="rounded-full bg-green-100 p-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-green-500" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7" />
                                    </svg>
                                </div>
                            </div>

                            <h2 class="text-2xl font-bold text-gray-800 mt-6">签到成功</h2>
                            <p class="text-gray-600 mt-2">祝您阅读愉快！</p>

                            <Button @click="goToActivityDetail" variant="primary" class="mt-8">
                                返回活动详情
                            </Button>
                        </div>

                        <div v-else-if="checkInStep === 'error'" class="text-center">
                            <div class="flex justify-center">
                                <div class="rounded-full bg-red-100 p-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-red-500" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                            </div>

                            <h2 class="text-xl font-bold text-gray-800 mt-6">签到失败</h2>
                            <p class="text-red-500 mt-2">{{ error }}</p>

                            <Button @click="setCheckInStep('initial')" variant="primary" class="mt-6">
                                重新签到
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '../stores/app'
import Button from '../components/shared/Button.vue'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()

const activityId = route.params.activityId
const activity = ref(null)
const loading = ref(true)
const error = ref(null)
const userRegistration = ref(null)
const userCheckIn = ref(null)
const checkInStep = ref('initial')
const checkInCode = ref('')
const countdown = ref(0)
const inputCode = ref('')
const isSubmitting = ref(false)

// Fetch activity details and user registration
const fetchData = async () => {
    try {
        if (!appStore.currentUser) {
            error.value = '请先登录'
            loading.value = false
            return
        }

        if (appStore.activities.length > 0) {
            const foundActivity = appStore.getActivityById(activityId)

            if (foundActivity) {
                activity.value = foundActivity

                // Find user registration for this activity
                const registration = appStore.registrations.find(
                    reg => reg.activity_id === activityId && reg.user_id === appStore.currentUser.id
                )

                if (registration) {
                    userRegistration.value = registration

                    // Check if user already checked in
                    const checkIn = appStore.checkIns.find(
                        check => check.activity_id === activityId && check.user_id === appStore.currentUser.id
                    )

                    if (checkIn) {
                        userCheckIn.value = checkIn
                    }
                } else {
                    error.value = '您尚未报名该活动'
                }
            } else {
                error.value = '未找到活动信息'
            }
        }
        loading.value = false
    } catch (err) {
        console.error('Failed to fetch data:', err)
        error.value = '加载数据失败'
        loading.value = false
    }
}

// Generate a random check-in code
const generateCheckInCode = () => {
    checkInCode.value = Math.floor(100000 + Math.random() * 900000).toString()
    checkInStep.value = 'code'
    countdown.value = 60
}

// Handle check-in code submission
const handleSubmitCode = async () => {
    if (!inputCode.value.trim()) return

    isSubmitting.value = true

    try {
        if (inputCode.value === checkInCode.value) {
            const now = new Date().toISOString().replace('T', ' ').substring(0, 19)
            const checkInResult = await appStore.addCheckIn({
                user_id: appStore.currentUser.id,
                activity_id: activityId,
                check_in_time: now,
                status: 'checked_in'
            })

            if (checkInResult.success) {
                userCheckIn.value = {
                    user_id: appStore.currentUser.id,
                    activity_id: activityId,
                    check_in_time: now,
                    status: 'checked_in'
                }
                checkInStep.value = 'success'
            } else {
                error.value = '签到失败，请稍后重试'
                checkInStep.value = 'error'
            }
        } else {
            error.value = '签到码不正确，请重试'
            checkInStep.value = 'error'
        }
    } catch (err) {
        console.error('Check-in error:', err)
        error.value = '签到失败，请稍后重试'
        checkInStep.value = 'error'
    } finally {
        isSubmitting.value = false
    }
}

// Format date for display
const formatDate = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString.replace(' ', 'T'))
    return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    }).format(date)
}

// Check if the activity is happening now
const isActivityNow = () => {
    if (!activity.value) return false

    const now = new Date()
    const startTime = new Date(activity.value.start_time.replace(' ', 'T'))
    const endTime = new Date(activity.value.end_time.replace(' ', 'T'))

    // Allow check-in from 30 minutes before start until end time
    const checkInStartTime = new Date(startTime.getTime() - 30 * 60 * 1000)

    return now >= checkInStartTime && now <= endTime
}

// Navigation
const goBack = () => router.back()
const goToActivityDetail = () => router.push(`/activity/${activityId}`)

// Watch countdown
watch(countdown, (newValue) => {
    if (newValue > 0 && checkInStep.value === 'code') {
        setTimeout(() => {
            countdown.value--
        }, 1000)
    } else if (newValue === 0 && checkInStep.value === 'code') {
        checkInStep.value = 'initial'
    }
})

// Initial data fetch
onMounted(fetchData)
</script>