<template>
    <div class="min-h-screen bg-gray-50">
        <!-- Loading UI if no current user -->
        <div v-if="!currentUser" class="min-h-screen flex justify-center items-center bg-gray-50">
            <div class="text-center">
                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-500 mx-auto"></div>
                <p class="mt-4 text-gray-600">加载用户资料...</p>
            </div>
        </div>

        <template v-else>
            <!-- Profile Header -->
            <div class="bg-gradient-to-r from-green-500 to-blue-500 py-12 px-4">
                <div class="container mx-auto">
                    <div class="flex flex-col md:flex-row items-center justify-between">
                        <!-- User Info -->
                        <div class="flex flex-col md:flex-row items-center">
                            <div
                                class="h-24 w-24 md:h-32 md:w-32 rounded-full overflow-hidden border-4 border-white mb-4 md:mb-0 md:mr-6">
                                <img :src="currentUser.avatar || '/assets/images/avatars/default_avatar.png'"
                                    :alt="currentUser.name" class="h-full w-full object-cover" />
                            </div>
                            <div class="text-center md:text-left">
                                <h1 class="text-2xl md:text-3xl font-bold text-white">{{ currentUser.name }}</h1>
                                <p class="text-white mt-2 opacity-90">@{{ currentUser.username }}</p>
                                <div class="flex flex-wrap justify-center md:justify-start mt-3 gap-2">
                                    <span v-for="(interest, index) in displayedInterests" :key="index"
                                        class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">
                                        {{ interest }}
                                    </span>
                                    <span v-if="currentUser.interests && currentUser.interests.length > 3"
                                        class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">
                                        +{{ currentUser.interests.length - 3 }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="mt-6 md:mt-0 flex gap-2">
                            <Button @click="isEditModalOpen = true" variant="secondary">
                                <template #leftIcon>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                        fill="currentColor">
                                        <path
                                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                    </svg>
                                </template>
                                编辑资料
                            </Button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profile Content -->
            <div class="container mx-auto py-8 px-4">
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <Tabs :tabs="profileTabs" />
                </div>
            </div>

            <!-- Edit Profile Modal -->
            <Modal v-model:show="isEditModalOpen" title="编辑个人资料">
                <div class="space-y-4">
                    <Input v-model="editForm.name" label="姓名" placeholder="请输入姓名" />
                    <Input v-model="editForm.email" label="电子邮箱" type="email" placeholder="请输入电子邮箱" />
                    <Input v-model="editForm.phone" label="手机号码" placeholder="请输入手机号码" />
                    <Input v-model="editForm.location" label="所在地" placeholder="请输入所在地" />
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                        <textarea v-model="editForm.bio" rows="4"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500"
                            placeholder="请输入个人简介"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">兴趣标签</label>
                        <div class="flex flex-wrap gap-2 mb-2">
                            <span v-for="interest in editForm.interests" :key="interest"
                                class="bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm flex items-center">
                                {{ interest }}
                                <button @click="handleRemoveInterest(interest)"
                                    class="ml-2 text-green-500 hover:text-green-700">
                                    ×
                                </button>
                            </span>
                        </div>
                        <div class="flex gap-2">
                            <Input v-model="interestInput" placeholder="添加兴趣标签" @keyup.enter="handleAddInterest" />
                            <Button @click="handleAddInterest" variant="secondary">添加</Button>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <div class="flex justify-end gap-2">
                        <Button @click="isEditModalOpen = false" variant="ghost">取消</Button>
                        <Button @click="handleSubmitEdit" variant="primary">保存</Button>
                    </div>
                </template>
            </Modal>
        </template>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../stores/app'
import Button from '../components/shared/Button.vue'
import Input from '../components/shared/Input.vue'
import Tabs from '../components/shared/Tabs.vue'
import ActivityCard from '../components/shared/ActivityCard.vue'
import Modal from '../components/shared/Modal.vue'

const store = useAppStore()
const { currentUser, activities, registrations } = store

const userRegistrations = ref([])
const registeredActivities = ref([])
const pastActivities = ref([])
const upcomingActivities = ref([])
const isEditModalOpen = ref(false)
const editForm = ref({
    name: '',
    bio: '',
    email: '',
    phone: '',
    location: '',
    interests: []
})
const interestInput = ref('')

// Computed properties
const displayedInterests = computed(() => {
    return currentUser.value?.interests?.slice(0, 3) || []
})

// Methods
const handleInputChange = (e) => {
    const { name, value } = e.target
    editForm.value[name] = value
}

const handleAddInterest = () => {
    const interest = interestInput.value.trim()
    if (interest && !editForm.value.interests.includes(interest)) {
        editForm.value.interests.push(interest)
        interestInput.value = ''
    }
}

const handleRemoveInterest = (interestToRemove) => {
    editForm.value.interests = editForm.value.interests.filter(
        interest => interest !== interestToRemove
    )
}

const handleSubmitEdit = () => {
    // In a real app, this would make an API call to update the user profile
    console.log('Profile update submitted:', editForm.value)
    isEditModalOpen.value = false
    // Update would be handled through context in a real app
}

const formatRegistrationDate = (dateString) => {
    const date = new Date(dateString.replace(' ', 'T'))
    return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    }).format(date)
}

// Profile tabs configuration
const profileTabs = computed(() => [
    {
        label: "个人资料",
        content: {
            component: 'div',
            class: 'p-6',
            children: [
                // Basic Info section
                {
                    component: 'div',
                    class: 'grid grid-cols-1 md:grid-cols-2 gap-8',
                    children: [
                        // Left column
                        {
                            component: 'div',
                            children: [
                                {
                                    component: 'h3',
                                    class: 'text-lg font-medium text-gray-900 mb-4',
                                    text: '基本信息'
                                },
                                // User info fields
                                {
                                    component: 'div',
                                    class: 'space-y-4',
                                    children: [
                                        // Name
                                        {
                                            component: 'div',
                                            children: [
                                                {
                                                    component: 'h4',
                                                    class: 'text-sm font-medium text-gray-500',
                                                    text: '姓名'
                                                },
                                                {
                                                    component: 'p',
                                                    class: 'mt-1 text-gray-900',
                                                    text: currentUser.value?.name
                                                }
                                            ]
                                        },
                                        // Location
                                        {
                                            component: 'div',
                                            children: [
                                                {
                                                    component: 'h4',
                                                    class: 'text-sm font-medium text-gray-500',
                                                    text: '所在地'
                                                },
                                                {
                                                    component: 'p',
                                                    class: 'mt-1 text-gray-900',
                                                    text: currentUser.value?.location || '未设置'
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        // Right column
                        {
                            component: 'div',
                            children: [
                                {
                                    component: 'h3',
                                    class: 'text-lg font-medium text-gray-900 mb-4',
                                    text: '联系方式'
                                },
                                // Contact info
                                {
                                    component: 'div',
                                    class: 'space-y-4',
                                    children: [
                                        // Email
                                        {
                                            component: 'div',
                                            children: [
                                                {
                                                    component: 'h4',
                                                    class: 'text-sm font-medium text-gray-500',
                                                    text: '电子邮箱'
                                                },
                                                {
                                                    component: 'p',
                                                    class: 'mt-1 text-gray-900',
                                                    text: currentUser.value?.email
                                                }
                                            ]
                                        },
                                        // Phone
                                        {
                                            component: 'div',
                                            children: [
                                                {
                                                    component: 'h4',
                                                    class: 'text-sm font-medium text-gray-500',
                                                    text: '手机号码'
                                                },
                                                {
                                                    component: 'p',
                                                    class: 'mt-1 text-gray-900',
                                                    text: currentUser.value?.phone
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    {
        label: "我的活动",
        content: {
            component: 'div',
            class: 'p-6',
            children: [
                // Upcoming activities section
                {
                    component: 'div',
                    class: 'mb-8',
                    children: [
                        {
                            component: 'h3',
                            class: 'text-lg font-medium text-gray-900 mb-4',
                            children: [
                                {
                                    component: 'span',
                                    class: 'inline-block w-3 h-3 bg-green-500 rounded-full mr-2'
                                },
                                {
                                    component: 'span',
                                    text: '即将参加的活动'
                                }
                            ]
                        },
                        // Activity cards
                        {
                            component: 'div',
                            class: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6',
                            children: upcomingActivities.value.map(activity => ({
                                component: ActivityCard,
                                props: { activity }
                            }))
                        }
                    ]
                }
            ]
        }
    },
    {
        label: "报名记录",
        content: {
            component: 'div',
            class: 'p-6',
            children: [
                {
                    component: 'div',
                    class: 'overflow-x-auto',
                    children: [
                        // Registration table
                        {
                            component: 'table',
                            class: 'min-w-full divide-y divide-gray-200',
                            children: [
                                // Table header
                                {
                                    component: 'thead',
                                    class: 'bg-gray-50',
                                    children: [
                                        {
                                            component: 'tr',
                                            children: [
                                                {
                                                    component: 'th',
                                                    class: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider',
                                                    text: '活动信息'
                                                },
                                                {
                                                    component: 'th',
                                                    class: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider',
                                                    text: '报名时间'
                                                },
                                                {
                                                    component: 'th',
                                                    class: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider',
                                                    text: '状态'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                // Table body
                                {
                                    component: 'tbody',
                                    class: 'bg-white divide-y divide-gray-200',
                                    children: userRegistrations.value.map(registration => ({
                                        component: 'tr',
                                        key: registration.id,
                                        children: [
                                            // Activity info
                                            {
                                                component: 'td',
                                                class: 'px-6 py-4 whitespace-nowrap',
                                                children: [
                                                    {
                                                        component: 'div',
                                                        class: 'flex items-center',
                                                        children: [
                                                            {
                                                                component: 'div',
                                                                class: 'text-sm font-medium text-gray-900',
                                                                text: activities.value.find(a => a.id === registration.activity_id)?.title || '未知活动'
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            // Registration time
                                            {
                                                component: 'td',
                                                class: 'px-6 py-4 whitespace-nowrap',
                                                children: [
                                                    {
                                                        component: 'div',
                                                        class: 'text-sm text-gray-900',
                                                        text: formatRegistrationDate(registration.registration_time)
                                                    }
                                                ]
                                            },
                                            // Status
                                            {
                                                component: 'td',
                                                class: 'px-6 py-4 whitespace-nowrap',
                                                children: [
                                                    {
                                                        component: 'span',
                                                        class: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${registration.status === 'approved'
                                                                ? 'bg-green-100 text-green-800'
                                                                : registration.status === 'pending'
                                                                    ? 'bg-yellow-100 text-yellow-800'
                                                                    : 'bg-gray-100 text-gray-800'
                                                            }`,
                                                        text: registration.status === 'approved'
                                                            ? '已通过'
                                                            : registration.status === 'pending'
                                                                ? '审核中'
                                                                : registration.status
                                                    }
                                                ]
                                            }
                                        ]
                                    }))
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
])

// Lifecycle hooks
onMounted(() => {
    if (currentUser.value) {
        editForm.value = {
            name: currentUser.value.name || '',
            bio: currentUser.value.bio || '',
            email: currentUser.value.email || '',
            phone: currentUser.value.phone || '',
            location: currentUser.value.location || '',
            interests: currentUser.value.interests || []
        }
    }

    if (currentUser.value && registrations.value && activities.value) {
        // Filter user registrations
        const userRegs = registrations.value.filter(reg => reg.user_id === currentUser.value.id)
        userRegistrations.value = userRegs

        // Get activities the user has registered for
        const regActivityIds = userRegs.map(reg => reg.activity_id)
        const regActivities = activities.value.filter(act => regActivityIds.includes(act.id))
        registeredActivities.value = regActivities

        const now = new Date()

        // Split activities into past and upcoming
        pastActivities.value = regActivities.filter(act => {
            return new Date(act.end_time.replace(' ', 'T')) < now
        })

        upcomingActivities.value = regActivities.filter(act => {
            return new Date(act.start_time.replace(' ', 'T')) > now
        })
    }
})
</script>