<template>
    <view class="profile-container">
        <!-- 顶部用户信息区域 -->
        <view class="profile-header">
            <view class="header-bg"></view>
            <view class="user-info-section">
                <view class="avatar-wrapper">
                    <view class="avatar">
                        <text class="avatar-text">{{ avatarText }}</text>
                    </view>
                </view>
                <view class="user-details">
                    <text class="username">{{ userInfo.realName || userInfo.username }}</text>
                    <view class="user-meta">
                        <text class="role-tag">{{ roleText }}</text>
                        <text class="user-id" v-if="userInfo.username">ID: {{ userInfo.username }}</text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 学习记录统计卡片（仅学生端） -->
        <view class="learning-stats-section" v-if="isStudent">
            <view class="stats-card">
                <view class="stat-item">
                    <text class="stat-value">{{ todayStudyText }}</text>
                    <text class="stat-label">今日学习</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ weekStudyText }}</text>
                    <text class="stat-label">本周学习</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ totalDaysText }}</text>
                    <text class="stat-label">累计学习</text>
                </view>
            </view>
        </view>
        
        <!-- 功能菜单区域 -->
        <view class="menu-sections">
            <!-- 学生端：学习相关 -->
            <view class="menu-section" v-if="isStudent">
                <view class="section-title">学习中心</view>
                <view class="menu-card">
                    <view class="menu-item" @click="goToExamList">
                        <view class="menu-icon-wrapper exam">
                            <text class="menu-icon">📝</text>
                        </view>
                        <view class="menu-content">
                            <text class="menu-text">我的考试</text>
                            <text class="menu-desc">查看考试列表</text>
                        </view>
                        <text class="menu-arrow">›</text>
                    </view>
                    <view class="menu-item" @click="goToScoreList">
                        <view class="menu-icon-wrapper score">
                            <text class="menu-icon">📊</text>
                        </view>
                        <view class="menu-content">
                            <text class="menu-text">我的成绩</text>
                            <text class="menu-desc">查看成绩详情</text>
                        </view>
                        <text class="menu-arrow">›</text>
                    </view>
                </view>
            </view>
            
            <!-- 其他功能 -->
            <view class="menu-section">
                <view class="section-title">其他</view>
                <view class="menu-card">
                    <view class="menu-item" @click="handleLogout">
                        <view class="menu-icon-wrapper logout">
                            <text class="menu-icon">🚪</text>
                        </view>
                        <view class="menu-content">
                            <text class="menu-text">退出登录</text>
                            <text class="menu-desc">安全退出当前账号</text>
                        </view>
                        <text class="menu-arrow">›</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getMyRecords, getMyStatistics } from '@/api/study/learningRecord.js'
import { getMyCourses } from '@/api/study/course.js'

export default {
    computed: {
        ...mapGetters('auth', ['userInfo', 'userRole']),
        isStudent() {
            return this.userRole === 'student'
        },
        roleText() {
            const roleMap = {
                'admin': '管理员',
                'student': '学员'
            }
            return roleMap[this.userInfo.role] || '学员'
        },
        avatarText() {
            const name = this.userInfo.realName || this.userInfo.username || '用'
            return name.length > 0 ? name.charAt(0).toUpperCase() : '用'
        },
        totalDurationText() {
            return this.formatDuration(this.totalDuration)
        },
        todayStudyText() {
            // 今日学习时长（分钟）
            const minutes = Math.floor(this.todayDuration / 60)
            return minutes > 0 ? `${minutes} min` : '0 min'
        },
        weekStudyText() {
            // 本周学习时长（小时）
            const hours = Math.floor(this.weekDuration / 3600)
            return hours > 0 ? `${hours} h` : '0 h'
        },
        totalDaysText() {
            // 累计学习天数
            return `${this.totalDays} days`
        },
    },
    data() {
        return {
            totalDuration: 0,
            totalCount: 0,
            completedCourses: 0,
            todayDuration: 0, // 今日学习时长（秒）
            weekDuration: 0, // 本周学习时长（秒）
            totalDays: 0 // 累计学习天数
        }
    },
    onLoad() {
        // 如果是学生端，加载学习记录统计
        if (this.isStudent) {
            this.loadLearningStats()
        }
    },
    onShow() {
        // 通知底部导航栏更新
        uni.$emit('tabbar-update')
        // 如果是学生端，刷新学习记录统计
        if (this.isStudent) {
            this.loadLearningStats()
        }
    },
    methods: {
        ...mapActions('auth', ['logout']),
        async loadLearningStats() {
            try {
                // 获取学习统计信息（从后台接口）
                const statsResponse = await getMyStatistics()
                if (statsResponse.code === 200) {
                    const stats = statsResponse.data || {}
                    // 设置统计数据
                    this.todayDuration = stats.todayDuration || 0 // 今日学习时长（秒）
                    this.weekDuration = stats.weekDuration || 0 // 本周学习时长（秒）
                    this.totalDays = stats.totalDays || 0 // 累计学习天数
                }
                
            } catch (error) {
                console.error('加载学习统计失败:', error)
                // 如果接口调用失败，设置默认值
                this.todayDuration = 0
                this.weekDuration = 0
                this.totalDays = 0
            }
        },
        formatDuration(seconds) {
            if (!seconds) return '0分钟'
            const hours = Math.floor(seconds / 3600)
            const minutes = Math.floor((seconds % 3600) / 60)
            if (hours > 0) {
                return `${hours}小时${minutes}分钟`
            }
            return `${minutes}分钟`
        },
        goToExamList() {
            uni.navigateTo({
                url: '/pages/exam/list'
            })
        },
        goToScoreList() {
            uni.navigateTo({
                url: '/pages/score/list'
            })
        },
        async handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                confirmColor: 'rgb(55 140 224)',
                success: async (res) => {
                    if (res.confirm) {
                        uni.showLoading({ title: '退出中...' })
                        try {
                            await this.logout()
                            uni.hideLoading()
                            uni.reLaunch({
                                url: '/pages/login/login'
                            })
                        } catch (error) {
                            uni.hideLoading()
                            uni.showToast({
                                title: '退出失败',
                                icon: 'none'
                            })
                        }
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.profile-container {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
    padding-bottom: 120rpx; // 为底部导航栏留出空间
    box-sizing: border-box;
    
    @media (min-width: 768px) {
        padding-bottom: 140rpx;
    }
}

// 顶部用户信息区域（钉钉风格）
.profile-header {
    position: relative;
    background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
    padding: 60rpx 30rpx 50rpx;
    padding-top: calc(var(--status-bar-height) + 60rpx);
    overflow: hidden;
    
    @media (min-width: 768px) {
        padding: 80rpx 60rpx 70rpx;
        padding-top: calc(var(--status-bar-height) + 80rpx);
    }
    
    .header-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
        opacity: 0.3;
    }
    
    .user-info-section {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 1;
        
        .avatar-wrapper {
            margin-right: 24rpx;
            
            @media (min-width: 768px) {
                margin-right: 40rpx;
            }
            
            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(10rpx);
                border: 4rpx solid rgba(255, 255, 255, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                
                @media (min-width: 768px) {
                    width: 160rpx;
                    height: 160rpx;
                    border: 6rpx solid rgba(255, 255, 255, 0.3);
                }
                
                .avatar-text {
                    font-size: 48rpx;
                    font-weight: bold;
                    color: #fff;
                    
                    @media (min-width: 768px) {
                        font-size: 64rpx;
                    }
                }
            }
        }
        
        .user-details {
            flex: 1;
            
            .username {
                display: block;
                font-size: 40rpx;
                font-weight: bold;
                color: #fff;
                margin-bottom: 16rpx;
                
                @media (min-width: 768px) {
                    font-size: 48rpx;
                    margin-bottom: 24rpx;
                }
            }
            
            .user-meta {
                display: flex;
                align-items: center;
                gap: 16rpx;
                
                @media (min-width: 768px) {
                    gap: 24rpx;
                }
                
                .role-tag {
                    display: inline-block;
                    padding: 6rpx 16rpx;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 20rpx;
                    font-size: 22rpx;
                    color: #fff;
                    backdrop-filter: blur(10rpx);
                    
                    @media (min-width: 768px) {
                        padding: 8rpx 20rpx;
                        font-size: 26rpx;
                        border-radius: 24rpx;
                    }
                }
                
                .user-id {
                    font-size: 24rpx;
                    color: rgba(255, 255, 255, 0.8);
                    
                    @media (min-width: 768px) {
                        font-size: 28rpx;
                    }
                }
            }
        }
    }
}

// 学习记录统计卡片
.learning-stats-section {
    margin: 20rpx 30rpx 30rpx;
    
    @media (min-width: 768px) {
        margin: 30rpx 40rpx 40rpx;
    }
    
    .stats-card {
        background: #fff;
        border-radius: 20rpx;
        padding: 40rpx 30rpx;
        display: flex;
        justify-content: space-between;
        gap: 20rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
        
        @media (min-width: 768px) {
            border-radius: 24rpx;
            padding: 50rpx 40rpx;
            gap: 30rpx;
        }
        
        .stat-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20rpx 10rpx;
            text-align: center;
            background: transparent;
            
            @media (min-width: 768px) {
                padding: 24rpx 16rpx;
            }
            
            .stat-value {
                font-size: 40rpx;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 12rpx;
                line-height: 1.2;
                
                @media (min-width: 768px) {
                    font-size: 48rpx;
                    margin-bottom: 16rpx;
                }
            }
            
            .stat-label {
                font-size: 24rpx;
                color: #999;
                font-weight: 400;
                
                @media (min-width: 768px) {
                    font-size: 28rpx;
                }
            }
        }
    }
}

// 功能菜单区域
.menu-sections {
    margin: 0 30rpx 30rpx;
    
    @media (min-width: 768px) {
        margin: 0 40rpx 40rpx;
    }
    
    .menu-section {
        margin-bottom: 24rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 32rpx;
        }
        
        .section-title {
            font-size: 26rpx;
            color: #999;
            margin-bottom: 16rpx;
            padding: 0 4rpx;
            font-weight: 500;
            
            @media (min-width: 768px) {
                font-size: 28rpx;
                margin-bottom: 20rpx;
                padding: 0 8rpx;
            }
        }
        
        .menu-card {
            background: #fff;
            border-radius: 20rpx;
            overflow: hidden;
            box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
            
            @media (min-width: 768px) {
                border-radius: 24rpx;
            }
            
                .menu-item {
                display: flex;
                align-items: center;
                padding: 28rpx 30rpx;
                border-bottom: 1rpx solid #f5f5f5;
                    transition: background-color 0.25s ease, transform 0.2s ease;
                    will-change: transform;
                position: relative;
                
                @media (min-width: 768px) {
                    padding: 36rpx 40rpx;
                }
                
                &:active {
                    background-color: #f8f9fa;
                    transform: translate3d(4rpx, 0, 0);
                }
                
                &:last-child {
                    border-bottom: none;
                }
                
                .menu-icon-wrapper {
                    width: 72rpx;
                    height: 72rpx;
                    border-radius: 16rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 24rpx;
                    flex-shrink: 0;
                    transition: transform 0.3s ease;
                    
                    @media (min-width: 768px) {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 20rpx;
                        margin-right: 32rpx;
                    }
                    
                    &.record {
                        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
                    }
                    
                    &.exam {
                        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
                    }
                    
                    &.score {
                        background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
                    }
                    
                    &.voice {
                        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
                    }
                    
                    &.logout {
                        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
                    }
                    
                    .menu-icon {
                        font-size: 36rpx;
                        
                        @media (min-width: 768px) {
                            font-size: 44rpx;
                        }
                    }
                }
                
                .menu-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    
                    .menu-text {
                        font-size: 30rpx;
                        font-weight: 500;
                        color: #1a1a1a;
                        margin-bottom: 6rpx;
                        transition: color 0.3s;
                        
                        @media (min-width: 768px) {
                            font-size: 32rpx;
                            margin-bottom: 8rpx;
                        }
                    }
                    
                    .menu-desc {
                        font-size: 24rpx;
                        color: #999;
                        
                        @media (min-width: 768px) {
                            font-size: 26rpx;
                        }
                    }
                }
                
                .menu-arrow {
                    font-size: 32rpx;
                    color: #d9d9d9;
                    margin-left: 16rpx;
                    flex-shrink: 0;
                    transition: transform 0.3s ease, color 0.3s;
                    
                    @media (min-width: 768px) {
                        font-size: 36rpx;
                        margin-left: 24rpx;
                    }
                }
                
                &:active {
                    .menu-icon-wrapper {
                        transform: scale(0.95);
                    }
                    
                    .menu-text {
                        color: rgb(55 140 224);
                    }
                    
                    .menu-arrow {
                        transform: translateX(4rpx);
                        color: rgb(55 140 224);
                    }
                }
            }
        }
    }
}
</style>

