<template>
    <view class="home">
        <!-- 顶部装饰云朵 -->
        <view class="decor decor-1"></view>
        <view class="decor decor-2"></view>
        <view class="decor decor-3"></view>

        <!-- 头部 -->
        <view class="hero">
            <view class="hero-greet">
                <view class="hero-hello">{{ greeting }} 👋</view>
                <view class="hero-title">灵犀学<text class="hero-title-ai">AI</text></view>
                <view class="hero-sub">让学习像玩游戏一样有趣</view>
            </view>
            <view class="hero-mascot">
                <view class="mascot-blob"></view>
                <view class="mascot-face">
                    <view class="mascot-eye left"></view>
                    <view class="mascot-eye right"></view>
                    <view class="mascot-smile"></view>
                </view>
            </view>
        </view>

        <!-- 用户卡 / 登录卡 -->
        <view v-if="isLogin" class="user-card">
            <view class="user-avatar-wrap">
                <image class="user-avatar" :src="avatarUrl" mode="aspectFill" />
                <view class="user-badge">VIP</view>
            </view>
            <view class="user-info">
                <view class="user-name">{{ userInfo.nickName || '小同学' }}</view>
                <view class="user-school" v-if="userInfo.schoolName || userInfo.className">
                    <view class="ic ic-school">
                        <svg viewBox="0 0 24 24" fill="none">
                            <path d="M12 3 2 9l10 6 10-6-10-6z" stroke="currentColor" stroke-width="1.6"
                                stroke-linejoin="round" />
                            <path d="m6 11 0 5c0 1 2 3 6 3s6-2 6-3v-5" stroke="currentColor" stroke-width="1.6"
                                stroke-linejoin="round" />
                        </svg>
                    </view>
                    <text>{{ userInfo.schoolName || '' }} · {{ userInfo.className || '' }}</text>
                </view>
            </view>
            <view class="user-stats">
                <view class="user-stat">
                    <view class="user-stat-num">{{ userInfo.diamond || 0 }}</view>
                    <view class="user-stat-label">钻石</view>
                </view>
                <view class="user-stat-divider"></view>
                <view class="user-stat">
                    <view class="user-stat-num">{{ userInfo.experience || 0 }}</view>
                    <view class="user-stat-label">经验</view>
                </view>
            </view>
        </view>

        <view v-else class="user-card login-card" @click="goLogin">
            <view class="login-illu">
                <text class="icon-emoji">👤</text>
            </view>
            <view class="login-text">
                <view class="login-title">点击登录账号</view>
                <view class="login-desc">登录后查看作业 · 同步进度</view>
            </view>
            <view class="login-arrow"></view>
        </view>

        <!-- 主功能入口 -->
        <view class="section-title">
            <view class="section-title-bar"></view>
            <text>开始学习</text>
        </view>

        <view class="grid">
            <view class="grid-card grid-card-primary" @click="navigate('/pages/homework/index')">
                <view class="grid-card-decor"></view>
                <view class="grid-card-icon">
                    <text class="icon-emoji">📝</text>
                </view>
                <view class="grid-card-info">
                    <view class="grid-card-title">我的作业</view>
                    <view class="grid-card-desc">
                        <text v-if="unfinishedCount > 0">{{ unfinishedCount }} 项待完成</text>
                        <text v-else>暂无待完成作业</text>
                    </view>
                </view>
                <view v-if="unfinishedCount > 0" class="grid-card-badge">{{ unfinishedCount }}</view>
            </view>

            <view class="grid-card grid-card-cta" @click="navigate('/pages/homework/history/index')">
                <view class="grid-card-decor"></view>
                <view class="grid-card-icon">
                    <text class="icon-emoji">📚</text>
                </view>
                <view class="grid-card-info">
                    <view class="grid-card-title">作业记录</view>
                    <view class="grid-card-desc">查看历史作业与成绩</view>
                </view>
            </view>
        </view>

        <!-- 推荐 / 工具入口 -->
        <!-- <view class="section-title">
            <view class="section-title-bar"></view>
            <text>学习工具</text>
        </view>

        <view class="tools">
            <view class="tool-item" :class="{ disabled: !t.enabled }" v-for="t in tools" :key="t.id" @click="onToolClick(t)">
                <view class="tool-icon" :style="{ background: t.enabled ? t.color : '#e2e8f0' }">
                    <text class="tool-icon-emoji" v-if="t.emoji">{{ t.emoji }}</text>
                </view>
                <text class="tool-name">{{ t.name }}</text>
                <text v-if="!t.enabled" class="tool-badge">开发中</text>
            </view>
        </view> -->

        <!-- 退出按钮 -->
        <view v-if="isLogin" class="logout" @click="onLogout">
            <text>退出登录</text>
        </view>

        <!-- 底部装饰 -->
        <view class="footer">
            <text>· 用心做教育，用爱伴成长 ·</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/state/modules/user';
import { getUnfinishedHomework } from '@/api/homework';
import { redirectToRoleHomeIfNeeded } from '@/utils/roleHome';

const userStore = useUserStore();
const { userInfo, token, isLogin } = storeToRefs(userStore);

const unfinishedCount = ref(0);

const DEFAULT_AVATAR = 'https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com/urm/logo.png';
const avatarUrl = computed(() => userInfo.value.avatarUrl || DEFAULT_AVATAR);

const greeting = computed(() => {
    const h = new Date().getHours();
    if (h < 6) return '夜深啦，注意休息';
    if (h < 11) return '早上好';
    if (h < 13) return '中午好';
    if (h < 18) return '下午好';
    return '晚上好';
});

const tools = [
    // { id: 'speak', name: '口算练习', emoji: '🧮', color: 'linear-gradient(135deg,#fde68a 0%,#f59e0b 100%)', enabled: false },
    // { id: 'word', name: '英语单词', emoji: '🅰️', color: 'linear-gradient(135deg,#bfdbfe 0%,#3b82f6 100%)', enabled: false },
    { id: 'wrong', name: '错题本', emoji: '📕', color: 'linear-gradient(135deg,#fecaca 0%,#ef4444 100%)', enabled: true },
    // { id: 'rank', name: '排行榜', emoji: '🏆', color: 'linear-gradient(135deg,#bbf7d0 0%,#22c55e 100%)', enabled: false },
];

const onToolClick = (t: any) => {
    if (!t?.enabled) return;
    if (t.id === 'wrong') {
        navigate('/pages/wrong/index');
        return;
    }
    uni.showToast({ title: `${t.name} · 即将上线`, icon: 'none' });
};

const navigate = (url: string) => {
    if (!token.value) {
        uni.navigateTo({ url: `/pages/login/index?redirect=${encodeURIComponent(url)}` });
        return;
    }
    uni.navigateTo({ url });
};

const goLogin = () => {
    uni.navigateTo({ url: '/pages/login/index' });
};

const onLogout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmColor: '#4F46E5',
        success: (res) => {
            if (res.confirm) userStore.logout();
        },
    });
};

const fetchUnfinished = async () => {
    if (!token.value) {
        unfinishedCount.value = 0;
        return;
    }
    try {
        const res: any = await getUnfinishedHomework();
        const list = Array.isArray(res?.data) ? res.data : Array.isArray(res?.data?.records) ? res.data.records : [];
        unfinishedCount.value = list.length || 0;
    } catch (e) {
        console.warn('fetchUnfinished err', e);
        unfinishedCount.value = 0;
    }
};

onShow(() => {
    if (redirectToRoleHomeIfNeeded()) return;
    if (token.value) {
        userStore.fetchUserInfo().catch(() => { /* ignore */ });
        fetchUnfinished();
    } else {
        unfinishedCount.value = 0;
    }
});
</script>

<style lang="scss" scoped>
.home {
    min-height: 100vh;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f7ff 50%, #ffffff 100%);
    padding: 0 32rpx 60rpx;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* 装饰云朵 */
.decor {
    position: absolute;
    border-radius: 50%;
    filter: blur(24rpx);
    pointer-events: none;
    z-index: 0;

    &.decor-1 {
        top: 60rpx;
        right: -60rpx;
        width: 280rpx;
        height: 280rpx;
        background: radial-gradient(circle, rgba(129, 140, 248, 0.5), transparent 70%);
    }

    &.decor-2 {
        top: 320rpx;
        left: -80rpx;
        width: 240rpx;
        height: 240rpx;
        background: radial-gradient(circle, rgba(34, 197, 94, 0.35), transparent 70%);
    }

    &.decor-3 {
        bottom: 120rpx;
        right: -100rpx;
        width: 320rpx;
        height: 320rpx;
        background: radial-gradient(circle, rgba(199, 210, 254, 0.6), transparent 70%);
    }
}

/* Hero */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 0 24rpx;
    z-index: 2;
}

.hero-greet {
    flex: 1;
}

.hero-hello {
    font-size: 26rpx;
    color: #6366f1;
    font-weight: 500;
}

.hero-title {
    font-size: 56rpx;
    font-weight: 800;
    color: #312e81;
    margin-top: 8rpx;
    letter-spacing: 2rpx;

    .hero-title-ai {
        margin-left: 12rpx;
        background: linear-gradient(135deg, #4f46e5 0%, #22c55e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero-sub {
    font-size: 24rpx;
    color: #94a3b8;
    margin-top: 8rpx;
}

/* 吉祥物 */
.hero-mascot {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    flex-shrink: 0;
}

.mascot-blob {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
    border-radius: 50% 50% 48% 52% / 56% 50% 50% 44%;
    box-shadow:
        0 16rpx 32rpx rgba(79, 70, 229, 0.35),
        inset 0 -10rpx 0 rgba(0, 0, 0, 0.08),
        inset 0 8rpx 0 rgba(255, 255, 255, 0.25);
    animation: blob 6s ease-in-out infinite;
}

.mascot-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16rpx;
}

.mascot-eye {
    position: absolute;
    width: 16rpx;
    height: 24rpx;
    background: #fff;
    border-radius: 50%;
    top: 56rpx;

    &.left { left: 48rpx; }
    &.right { right: 48rpx; }
}

.mascot-smile {
    position: absolute;
    bottom: 50rpx;
    width: 50rpx;
    height: 24rpx;
    border: 4rpx solid #fff;
    border-top: 0;
    border-radius: 0 0 50rpx 50rpx;
    box-sizing: border-box;
}

@keyframes blob {
    0%, 100% { border-radius: 50% 50% 48% 52% / 56% 50% 50% 44%; }
    50% { border-radius: 48% 52% 56% 44% / 50% 56% 44% 50%; }
}

/* 用户卡 */
.user-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 28rpx 28rpx;
    background: #ffffff;
    border-radius: 36rpx;
    gap: 24rpx;
    box-shadow:
        0 16rpx 40rpx rgba(99, 102, 241, 0.16),
        inset 0 -6rpx 0 rgba(199, 210, 254, 0.5);
}

.user-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.user-avatar {
    width: 112rpx;
    height: 112rpx;
    border-radius: 32rpx;
    border: 4rpx solid #ffffff;
    box-shadow: 0 6rpx 16rpx rgba(99, 102, 241, 0.25);
    background: #eef2ff;
}

.user-badge {
    position: absolute;
    bottom: -8rpx;
    right: -8rpx;
    padding: 4rpx 12rpx;
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    color: #fff;
    font-size: 18rpx;
    font-weight: 700;
    border-radius: 999rpx;
    box-shadow: 0 4rpx 8rpx rgba(245, 158, 11, 0.4);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 32rpx;
    font-weight: 700;
    color: #312e81;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-school {
    margin-top: 8rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: #818cf8;
    font-size: 22rpx;
    overflow: hidden;

    text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.ic {
    width: 28rpx;
    height: 28rpx;
    flex-shrink: 0;

    svg {
        width: 100%;
        height: 100%;
    }
}

.user-stats {
    display: flex;
    align-items: center;
    gap: 16rpx;
    flex-shrink: 0;
}

.user-stat {
    text-align: center;

    &-num {
        font-size: 32rpx;
        font-weight: 800;
        color: #4f46e5;
    }

    &-label {
        font-size: 20rpx;
        color: #94a3b8;
        margin-top: 2rpx;
    }
}

.user-stat-divider {
    width: 2rpx;
    height: 48rpx;
    background: #e0e7ff;
}

/* 登录卡 */
.user-card.login-card {
    cursor: pointer;
    transition: transform 200ms ease;

    &:active {
        transform: scale(0.98);
    }
}

.login-illu {
    width: 96rpx;
    height: 96rpx;
    border-radius: 28rpx;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-emoji {
        font-size: 46rpx;
    }
}

.login-text {
    flex: 1;
}

.login-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #312e81;
}

.login-desc {
    font-size: 22rpx;
    color: #94a3b8;
    margin-top: 8rpx;
}

.login-arrow {
    width: 18rpx;
    height: 18rpx;
    border-right: 4rpx solid #4f46e5;
    border-top: 4rpx solid #4f46e5;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Section title */
.section-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14rpx;
    margin: 48rpx 0 24rpx;
    font-size: 30rpx;
    font-weight: 700;
    color: #312e81;
}

.section-title-bar {
    width: 8rpx;
    height: 28rpx;
    background: linear-gradient(180deg, #4f46e5 0%, #22c55e 100%);
    border-radius: 999rpx;
}

/* 主功能 grid */
.grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
}

.grid-card {
    position: relative;
    border-radius: 36rpx;
    padding: 32rpx 28rpx;
    height: 240rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow:
        0 16rpx 40rpx rgba(99, 102, 241, 0.2),
        inset 0 -8rpx 0 rgba(0, 0, 0, 0.06),
        inset 0 4rpx 0 rgba(255, 255, 255, 0.18);
    transition: transform 200ms ease;

    &:active {
        transform: translateY(4rpx) scale(0.98);
    }

    &.grid-card-primary {
        background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
    }

    &.grid-card-cta {
        background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    }
}

.grid-card-decor {
    position: absolute;
    top: -40rpx;
    right: -40rpx;
    width: 160rpx;
    height: 160rpx;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.grid-card-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8rpx);

    .icon-emoji {
        font-size: 42rpx;
    }
}

.grid-card-info {
    color: #ffffff;
}

.grid-card-title {
    font-size: 32rpx;
    font-weight: 800;
    letter-spacing: 1rpx;
}

.grid-card-desc {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 6rpx;
}

.grid-card-badge {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    min-width: 44rpx;
    height: 44rpx;
    padding: 0 12rpx;
    border-radius: 999rpx;
    background: #ef4444;
    color: #ffffff;
    font-size: 22rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(239, 68, 68, 0.4);
}

/* 工具栏 */
.tools {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rpx;
    padding: 24rpx;
    background: #ffffff;
    border-radius: 36rpx;
    box-shadow:
        0 16rpx 40rpx rgba(99, 102, 241, 0.12),
        inset 0 -6rpx 0 rgba(199, 210, 254, 0.4);
}

.tool-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    padding: 12rpx 0;
    transition: transform 200ms ease;

    &:active {
        transform: scale(0.92);
    }

    &.disabled {
        opacity: 0.72;
    }
}

.tool-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6rpx 14rpx rgba(0, 0, 0, 0.1),
        inset 0 -4rpx 0 rgba(0, 0, 0, 0.1);
}

.tool-icon-emoji {
    font-size: 44rpx;
}

.tool-name {
    font-size: 22rpx;
    color: #475569;
    font-weight: 500;
}

.tool-badge {
    margin-top: 4rpx;
    font-size: 18rpx;
    color: #94a3b8;
}

/* 退出 */
.logout {
    position: relative;
    z-index: 2;
    margin: 64rpx auto 0;
    width: 320rpx;
    height: 80rpx;
    border-radius: 999rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    font-size: 26rpx;
    font-weight: 600;
    box-shadow:
        0 6rpx 16rpx rgba(239, 68, 68, 0.12),
        inset 0 -4rpx 0 rgba(254, 202, 202, 0.5);
    transition: transform 150ms ease;

    &:active {
        transform: scale(0.97);
    }
}

.footer {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 32rpx;
    color: #c7d2fe;
    font-size: 22rpx;
}
</style>
