<template>
  <div class="dashboard">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载用户信息...</p>
    </div>
    
    <div v-else>
      <div class="top-bar">
        <div class="welcome">
          <h1>欢迎回来，{{ userInfo?.username || '访客' }}！</h1>
          <p>{{ userInfo ? '已登录' : '未登录' }}</p>
        </div>
        <div class="actions">
          <button class="profile-btn" @click="goToProfile">
            <span>👤</span>
            个人中心
          </button>
          <button class="logout-btn" @click="handleLogout">
            <span>🚪</span>
            退出登录
          </button>
        </div>
      </div>
      
      <!-- 状态面板 -->
      <div class="status-panel">
        <div class="status-card">
          <h3>登录状态</h3>
          <div class="status-badge" :class="{ active: isAuthenticated }">
            {{ isAuthenticated ? '已登录' : '未登录' }}
          </div>
        </div>
        
        <div class="status-card">
          <h3>用户角色</h3>
          <div class="roles">
            <span v-if="userInfo?.roles && userInfo.roles.length > 0" 
                  v-for="role in userInfo.roles" 
                  :key="role" 
                  class="role-tag">
              {{ role }}
            </span>
            <span v-else class="role-tag empty">暂无角色</span>
          </div>
        </div>
        
        <div class="status-card">
          <h3>权限数量</h3>
          <div class="count-badge">
            {{ userInfo?.permissions?.length || 0 }}
          </div>
        </div>
      </div>
      
      <h1>数据报表示例</h1>
      
      <div class="chart-grid">
        <!-- 折线图 -->
        <div class="chart-item">
          <EChartsReport 
            title="销售趋势" 
            chartType="line" 
            :data="lineChartData" 
          />
        </div>
        
        <!-- 柱状图 -->
        <div class="chart-item">
          <EChartsReport 
            title="产品销量" 
            chartType="bar" 
            :data="barChartData" 
          />
        </div>
        
        <!-- 饼图 -->
        <div class="chart-item">
          <EChartsReport 
            title="市场份额" 
            chartType="pie" 
            :data="pieChartData" 
          />
        </div>
        
        <!-- 雷达图 -->
        <div class="chart-item">
          <EChartsReport 
            title="产品性能评估" 
            chartType="radar" 
            :data="radarChartData" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import EChartsReport from '../components/EChartsReport.vue';
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { unifiedLoginSDK, type UserInfo } from "oauth2-login-sdk";

const router = useRouter();
const userInfo = ref<UserInfo | null>(null);
const loading = ref(true);
const isAuthenticated = ref(false);

// 获取用户信息
const loadUserInfo = async () => {
  try {
    console.log('📋 Dashboard: 开始获取用户信息');
    userInfo.value = await unifiedLoginSDK.getUserInfo();
    isAuthenticated.value = true;
    console.log('✅ Dashboard: 用户信息获取成功', userInfo.value);
  } catch (error) {
    console.error('❌ Dashboard: 获取用户信息失败:', error);
    userInfo.value = null;
    isAuthenticated.value = false;
  } finally {
    loading.value = false;
  }
};

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile');
};

// 退出登录
const handleLogout = async () => {
  try {
    await unifiedLoginSDK.logout();
    router.push('/login');
  } catch (error) {
    console.error('退出登录失败:', error);
  }
};

// 组件挂载时获取用户信息
onMounted(() => {
  loadUserInfo();
});
// 折线图数据
const lineChartData = {
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
  series: [
    {
      data: [120, 132, 101, 134, 90, 230],
      type: 'line',
      smooth: true
    },
    {
      data: [220, 182, 191, 234, 290, 330],
      type: 'line',
      smooth: true
    }
  ]
};

// 柱状图数据
const barChartData = {
  xAxis: ['产品A', '产品B', '产品C', '产品D', '产品E'],
  series: [
    {
      data: [120, 200, 150, 80, 70],
      type: 'bar'
    },
    {
      data: [180, 250, 120, 90, 60],
      type: 'bar'
    }
  ]
};

// 饼图数据
const pieChartData = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' },
  { value: 234, name: '联盟广告' },
  { value: 135, name: '视频广告' },
  { value: 1548, name: '搜索引擎' }
];

// 雷达图数据
const radarChartData = {
  indicator: [
    { name: '性能', max: 100 },
    { name: '功能', max: 100 },
    { name: '易用性', max: 100 },
    { name: '稳定性', max: 100 },
    { name: '安全性', max: 100 }
  ],
  series: [
    {
      value: [90, 80, 95, 85, 90],
      name: '产品A'
    },
    {
      value: [85, 90, 80, 95, 85],
      name: '产品B'
    }
  ]
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
  max-width: 100%; /* 铺满全屏 */
  width: 100%;
  margin: 0;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 30px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.welcome h1 {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: 600;
}

.welcome p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

.actions {
  display: flex;
  gap: 15px;
}

.profile-btn, .logout-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}

.profile-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.logout-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
}

.logout-btn:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 状态面板 */
.status-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.status-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
}

.status-card:hover {
  transform: translateY(-5px);
}

.status-card h3 {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 16px;
  font-weight: 500;
}

.status-badge {
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
}

.status-badge.active {
  background: #e8f5e8;
  color: #388e3c;
}

.roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.role-tag {
  padding: 6px 15px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.role-tag.empty {
  background: #ffebee;
  color: #c62828;
}

.count-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0 auto;
}

/* 图表区域 */
.chart-section {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}

.chart-section h2 {
  margin: 0 0 25px 0;
  color: #333;
  font-size: 24px;
  text-align: center;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* 减小最小宽度，更好适应宽屏 */
  gap: 25px;
}

.chart-item {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.chart-item:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* SDK功能演示区 */
.sdk-demo-section {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sdk-demo-section h2 {
  margin: 0 0 25px 0;
  color: #333;
  font-size: 24px;
  text-align: center;
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 增加最小宽度 */
  gap: 25px; /* 增加间距 */
}

.demo-card {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
}

.demo-card h3 {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 18px;
}

.demo-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 100%;
  margin: 10px 0;
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.token-display {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
  overflow-x: auto;
}

.token-display pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.permission-check, .role-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.permission-input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.permission-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.check-result {
  padding: 12px;
  border-radius: 6px;
  font-weight: 500;
  text-align: center;
}

.check-result:empty {
  display: none;
}

/* 响应式设计 */
/* 超宽屏优化 */
@media (min-width: 1800px) {
  .dashboard {
    max-width: 100%;
    padding: 30px 50px; /* 增加左右padding */
  }
  
  .chart-grid {
    grid-template-columns: repeat(4, 1fr); /* 在超宽屏上显示4列 */
    gap: 30px;
  }
  
  .demo-cards {
    grid-template-columns: repeat(3, 1fr); /* 在超宽屏上显示3列 */
    gap: 30px;
  }
  
  .status-panel {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* 大屏优化 */
@media (min-width: 1400px) and (max-width: 1799px) {
  .chart-grid {
    grid-template-columns: repeat(2, 1fr); /* 在大屏上显示2列 */
    gap: 30px;
  }
  
  .demo-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* 中等屏幕 */
@media (max-width: 1200px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 15px;
  }
  
  .top-bar {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .actions {
    width: 100%;
    justify-content: center;
  }
  
  .status-panel {
    grid-template-columns: 1fr;
  }
  
  .demo-cards {
    grid-template-columns: 1fr;
  }
  
  .chart-section, .sdk-demo-section {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .welcome h1 {
    font-size: 24px;
  }
  
  .welcome p {
    font-size: 14px;
  }
  
  .profile-btn, .logout-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}
</style>