<template>
  <div class="dashboard-container page-container">
    <div class="dashboard-header">
      <h1 class="dashboard-title">\{{ $t("common.dashboard") }}</h1>
      <p class="dashboard-subtitle">
        Overview of your system performance and key metrics. 
        Everything looks good today.
      </p>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid">
      <div class="stat-card" v-for="(stat, index) in stats" :key="index">
        <div class="stat-content">
          <div class="stat-value">\{{ stat.value }}</div>
          <div class="stat-label">\{{ stat.label }}</div>
          <div class="stat-trend" :class="stat.trend > 0 ? 'positive' : 'negative'">
            <n-icon><TrendingUp v-if="stat.trend > 0" /><TrendingDown v-else /></n-icon>
            <span>\{{ Math.abs(stat.trend) }}% vs last month</span>
          </div>
        </div>
        <div class="stat-icon-wrapper">
          <n-icon size="24"><component :is="stat.icon" /></n-icon>
        </div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="section-header">
      <h2 class="section-title">Quick Actions</h2>
    </div>
    <div class="actions-grid">
      <button class="action-btn" v-for="(action, index) in actions" :key="index">
        <n-icon class="action-icon" size="20"><component :is="action.icon" /></n-icon>
        <span class="action-label">\{{ action.label }}</span>
      </button>
    </div>

    <!-- Features -->
    <div class="section-header">
      <h2 class="section-title">New Features</h2>
    </div>
    <div class="features-grid">
      <div class="feature-card" v-for="(feature, index) in features" :key="index">
        <div class="feature-image">
          <n-icon class="feature-icon-lg" size="48"><component :is="feature.icon" /></n-icon>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">\{{ feature.title }}</h3>
          <p class="feature-desc">\{{ feature.desc }}</p>
          <div class="feature-footer">
            <n-button type="primary" size="small">
              Try Now <n-icon><ArrowRight /></n-icon>
            </n-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { markRaw } from 'vue';
import { NIcon, NButton } from 'naive-ui';
import { $t } from "@/utils/i18n";
import { 
  TrendingUp, TrendingDown, ArrowRight,
  DollarSign, Users, ShoppingCart, Activity,
  Plus, FileText, Settings, Bell,
  BarChart3, Radio, Gauge
} from 'lucide-vue-next';

const stats = [
  { label: 'Total Revenue', value: '$48,290', trend: 12.5, icon: markRaw(DollarSign) },
  { label: 'Active Users', value: '2,450', trend: 8.2, icon: markRaw(Users) },
  { label: 'New Orders', value: '356', trend: -2.4, icon: markRaw(ShoppingCart) },
  { label: 'System Health', value: '98%', trend: 1.2, icon: markRaw(Activity) },
];

const actions = [
  { label: 'Add User', icon: markRaw(Plus) },
  { label: 'View Reports', icon: markRaw(FileText) },
  { label: 'Settings', icon: markRaw(Settings) },
  { label: 'Alerts', icon: markRaw(Bell) },
];

const features = [
  { 
    title: 'Advanced Analytics', 
    desc: 'Deep dive into your data with our new AI-powered analytics engine.', 
    icon: markRaw(BarChart3) 
  },
  { 
    title: 'Real-time Sync', 
    desc: 'Collaborate with your team in real-time with zero latency.', 
    icon: markRaw(Radio) 
  },
  { 
    title: 'Performance Boost', 
    desc: 'Optimized rendering engine making your app 3x faster.', 
    icon: markRaw(Gauge) 
  },
];
</script>

<style scoped>
@import "@/styles/dashboard.css";
</style>
