<template>
    <AdminLayout title="数据概览" info="泰豪小电智能客服运营数据">
        <div class="overview-container">
            <!-- 核心指标卡片 -->
            <div class="dashboard-stats">
                <div class="stat-card clickable" @click="goToChat">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #409eff, #66b1ff);">
                        <el-icon><ChatDotRound /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">1,258</div>
                        <div class="stat-label">咨询次数</div>
                        <div class="stat-trend up">
                            <el-icon><Top /></el-icon>
                            <span>较昨日 +12.5%</span>
                        </div>
                    </div>
                </div>

                <div class="stat-card clickable" @click="goToWorkcase('pending')">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #e6a23c, #f5c06a);">
                        <el-icon><Clock /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ dashboardData.pendingTickets }}</div>
                        <div class="stat-label">待处理工单</div>
                        <div class="stat-trend">
                            <span>点击查看详情</span>
                            <el-icon><Right /></el-icon>
                        </div>
                    </div>
                </div>

                <div class="stat-card clickable" @click="goToWorkcase('completed')">
                    <div class="stat-icon" style="background: linear-gradient(135deg, #67c23a, #95d475);">
                        <el-icon><Select /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ dashboardData.completedTickets }}</div>
                        <div class="stat-label">已处理工单</div>
                        <div class="stat-trend">
                            <span>点击查看详情</span>
                            <el-icon><Right /></el-icon>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 问题分类统计和词云 -->
            <div class="dashboard-charts">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>问题分类统计</span>
                            <el-radio-group v-model="questionStatPeriod" size="small">
                                <el-radio-button label="today">今日</el-radio-button>
                                <el-radio-button label="week">本周</el-radio-button>
                                <el-radio-button label="month">本月</el-radio-button>
                            </el-radio-group>
                        </div>
                    </template>
                    <div class="question-stats">
                        <div v-for="item in questionCategories" :key="item.name" class="question-stat-item clickable">
                            <div class="stat-bar-header">
                                <span class="stat-name">{{ item.name }}</span>
                                <span class="stat-count">{{ item.count }} 次</span>
                            </div>
                            <div class="stat-bar">
                                <div class="stat-bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>涉及产品词云</span>
                            <el-button type="primary" link size="small" @click="goToChat">
                                查看详情
                                <el-icon><Right /></el-icon>
                            </el-button>
                        </div>
                    </template>
                    <div class="product-cloud">
                        <span v-for="(product, index) in productCloudData" :key="index" class="cloud-tag"
                            :style="{ fontSize: product.size + 'px', color: product.color, opacity: 0.7 + product.weight * 0.3 }">
                            {{ product.name }}
                        </span>
                    </div>
                </el-card>
            </div>

            <!-- 快捷入口 -->
            <el-card class="quick-entry-card">
                <template #header>
                    <span>快捷入口</span>
                </template>
                <div class="quick-entries">
                    <div class="quick-entry-item" @click="goToKnowledge">
                        <el-icon class="entry-icon" style="background: #409eff;"><Document /></el-icon>
                        <span>知识库管理</span>
                    </div>
                    <div class="quick-entry-item" @click="goToWorkcase()">
                        <el-icon class="entry-icon" style="background: #e6a23c;"><Tickets /></el-icon>
                        <span>工单管理</span>
                    </div>
                    <div class="quick-entry-item" @click="goToChat">
                        <el-icon class="entry-icon" style="background: #67c23a;"><ChatDotRound /></el-icon>
                        <span>对话数据</span>
                    </div>
                    <div class="quick-entry-item" @click="goToAgent">
                        <el-icon class="entry-icon" style="background: #909399;"><Service /></el-icon>
                        <span>智能体管理</span>
                    </div>
                </div>
            </el-card>
        </div>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { MessageCircle as ChatDotRound, Clock, CheckSquare as Select, ArrowUp as Top, ArrowRight as Right, FileText as Document, Ticket as Tickets, Headphones as Service } from 'lucide-vue-next'

const questionStatPeriod = ref('today')

const dashboardData = ref({
    pendingTickets: 24,
    completedTickets: 856
})

const questionCategories = ref([
    { name: '设备故障', count: 156, percent: 85, color: '#409eff' },
    { name: '使用咨询', count: 98, percent: 65, color: '#67c23a' },
    { name: '配件更换', count: 45, percent: 35, color: '#e6a23c' },
    { name: '安装调试', count: 32, percent: 25, color: '#f56c6c' },
    { name: '其他问题', count: 28, percent: 18, color: '#909399' }
])

const productCloudData = ref([
    { name: 'TH-500GF', size: 24, weight: 0.9, color: '#409eff' },
    { name: 'TH-300D', size: 20, weight: 0.7, color: '#67c23a' },
    { name: 'TH-800GF', size: 22, weight: 0.8, color: '#e6a23c' },
    { name: 'S-200X', size: 18, weight: 0.6, color: '#f56c6c' },
    { name: 'S-150X', size: 16, weight: 0.5, color: '#909399' },
    { name: 'G-100S', size: 19, weight: 0.65, color: '#409eff' },
    { name: 'G-200S', size: 21, weight: 0.75, color: '#67c23a' }
])

const goToChat = () => {
    console.log('跳转到对话数据')
}

const goToWorkcase = (status?: string) => {
    console.log('跳转到工单管理', status)
}

const goToKnowledge = () => {
    console.log('跳转到知识库管理')
}

const goToAgent = () => {
    console.log('跳转到智能体管理')
}
</script>

<style lang="scss" scoped>
@import url("./OverviewView.scss");

.overview-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 1280px) {
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}
</style>