<template>
  <div class="dashboard-wrapper">
    <!-- Modern Hero Header Section -->
    <div class="dashboard-hero">
      <!-- Geometric Background Pattern -->
      <div class="hero-pattern">
        <div class="pattern-circle circle-1"></div>
        <div class="pattern-circle circle-2"></div>
        <div class="pattern-circle circle-3"></div>
        <div class="pattern-lines">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>

      <v-container fluid class="pa-4 hero-container">
        <v-row align="center" class="hero-row">
          <!-- Left Section: Welcome & Title -->
          <v-col cols="12" md="6" class="hero-left">
            <div class="welcome-section">
              <div class="welcome-badge-new">
                <div class="badge-dot"></div>
                <span class="badge-text-new">DASHBOARD ANTREAN</span>
              </div>
              
              <h1 class="hero-title-new">
                Selamat Datang Kembali! 👋
              </h1>
              
              <div v-if="user" class="hero-subtitle-new">
                <div class="greeting-row">
                  <span class="greeting-text">Halo,</span>
                  <span class="user-name-new">{{ user.name || user.preferred_username }}</span>
                </div>
                <span class="subtitle-desc">Berikut adalah ringkasan aktivitas hari ini</span>
              </div>

              <!-- Quick Info Pills -->
              <div class="quick-info-pills">
                <div class="info-pill">
                  <v-icon size="16" color="white">mdi-clock-outline</v-icon>
                  <span>Real-time Data</span>
                </div>
                <div class="info-pill">
                  <v-icon size="16" color="white">mdi-calendar-today</v-icon>
                  <span>{{ currentDate }}</span>
                </div>
              </div>
            </div>
          </v-col>

          <!-- Right Section: Actions & Stats -->
          <v-col cols="12" md="6" class="hero-right">
              <div class="hero-actions-new">
                <!-- Date Filter Section -->
                <div class="date-filter-row">
                  <div class="date-input-group">
                    <label class="date-label">Dari</label>
                    <input type="date" v-model="filterDateFrom" class="modern-datepicker" />
                  </div>
                  <div class="date-input-group">
                    <label class="date-label">Hingga</label>
                    <input type="date" v-model="filterDateTo" class="modern-datepicker" />
                  </div>
                  <v-btn
                    color="white"
                    variant="flat"
                    icon="mdi-magnify"
                    size="small"
                    class="filter-submit-btn"
                    @click="applyDateFilter"
                    :loading="isLoading"
                  ></v-btn>
                </div>

                <div class="action-divider"></div>

                <!-- Export Button -->
                <v-menu v-if="false" offset-y>
                  <template v-slot:activator="{ props }">
                    <v-btn
                      v-bind="props"
                      color="white"
                      variant="flat"
                      class="modern-btn export-btn-new"
                      size="large"
                      prepend-icon="mdi-download"
                    >
                      <span class="btn-text">Export Data</span>
                      <v-icon end size="18">mdi-chevron-down</v-icon>
                    </v-btn>
                  </template>
                <v-list class="export-menu-new">
                  <v-list-item 
                    v-for="(item, index) in exportOptions" 
                    :key="index"
                    @click="handleExport(item.type)"
                    class="export-item-new"
                  >
                    <template v-slot:prepend>
                      <v-icon :icon="item.icon" size="20"></v-icon>
                    </template>
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>

              <!-- Mini Stats Cards in Header -->
              <div class="header-mini-stats">
                <div class="mini-stat-card">
                  <div class="mini-stat-icon">
                    <v-icon size="20" color="white">mdi-account-multiple</v-icon>
                  </div>
                  <div class="mini-stat-content">
                    <div class="mini-stat-value">{{ stats[0].value }}</div>
                    <div class="mini-stat-label">{{ stats[0].label }}</div>
                  </div>
                </div>

                <div class="mini-stat-card">
                  <div class="mini-stat-icon secondary">
                    <v-icon size="20" color="white">mdi-clock-fast</v-icon>
                  </div>
                  <div class="mini-stat-content">
                    <div class="mini-stat-value">{{ stats[1].value }}</div>
                    <div class="mini-stat-label">{{ stats[1].label }}</div>
                  </div>
                </div>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </div>

    <!-- Main Content -->
    <v-container fluid class="pa-3 dashboard-bg">

    <!-- Compact Stats Cards Section -->
    <v-row class="mb-2 stats-row">
      <v-col cols="12" sm="6" lg="3" v-for="(stat, index) in stats" :key="index">
        <v-card 
          class="stat-card innovative-card" 
          :class="`stat-card-${stat.color}`"
          elevation="0"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <!-- Animated Background Pattern -->
          <div class="card-pattern">
            <div class="pattern-dot"></div>
            <div class="pattern-dot"></div>
            <div class="pattern-dot"></div>
          </div>
          
          <!-- Card Content -->
          <div class="stat-card-content">
            <div class="stat-header">
              <div class="stat-icon-wrapper modern-icon" :class="`icon-${stat.color}`">
                <v-icon :size="32" :color="stat.iconColor">{{ stat.icon }}</v-icon>
                <div class="icon-glow"></div>
              </div>
              <div v-if="stat.change" class="stat-badge" :class="stat.changeType">
                <v-icon size="12">{{ stat.changeIcon }}</v-icon>
                <span>{{ stat.change }}</span>
              </div>
            </div>
            
            <div class="stat-body">
              <div class="stat-value-wrapper">
                <div class="stat-value modern-value">{{ stat.value }}</div>
                <div class="value-sparkline"></div>
              </div>
              <div class="stat-label modern-label">{{ stat.label }}</div>
            </div>
          </div>

          <!-- Hover Effect Gradient -->
          <div class="hover-gradient"></div>
          
          <!-- Progress Bar -->
          <div class="stat-progress">
            <div class="progress-bar" :class="`progress-${stat.color}`"></div>
          </div>
        </v-card>
      </v-col>
    </v-row>

      <!-- Charts Section -->
      <v-row class="mb-2">
        <!-- Chart 1: Tren Kunjungan Pasien (Area Chart) -->
        <v-col cols="12" lg="8" md="12">
          <v-card class="modern-card chart-card">
            <div class="chart-header-modern">
              <div class="chart-header-left">
                <div class="chart-icon-wrapper chart-icon-primary">
                  <v-icon size="small">mdi-chart-timeline-variant</v-icon>
                </div>
                <div>
                  <h3 class="chart-title">Tren Kunjungan Pasien</h3>
                  <p class="chart-subtitle">Perbandingan kunjungan bulanan</p>
                </div>
              </div>
              <div class="chart-controls">
                <v-btn
                  v-if="false"
                  icon="mdi-download"
                  variant="text"
                  size="small"
                  color="primary"
                  class="chart-download-btn-dark"
                  @click="handleChartExport('visitTrend', 'Tren Kunjungan Pasien')"
                  density="comfortable"
                ></v-btn>
                <v-menu offset-y transition="scale-transition">
                  <template v-slot:activator="{ props }">
                    <v-chip
                      v-bind="props"
                      class="live-chip interactive-year-chip"
                      size="small"
                    >
                      <v-icon class="pulse-icon" size="14">mdi-circle</v-icon>
                      <span class="ml-1">{{ selectedYear }}</span>
                      <v-icon end size="14">mdi-chevron-down</v-icon>
                    </v-chip>
                  </template>
                  <v-list class="year-dropdown-list">
                    <v-list-item
                      v-for="year in availableYears"
                      :key="year"
                      @click="selectedYear = year"
                      :class="{ 'year-item-active': selectedYear === year }"
                    >
                      <v-list-item-title class="dropdown-year-text">{{ year }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </div>
            </div>
            <div class="chart-container">
              <ClientOnly>
                <Line
                  v-if="visitTrendData.labels && visitTrendData.labels.length > 0 && visitTrendData.datasets[0].data.length > 0 && visitTrendData.datasets[0].data.some(v => v > 0)"
                  :data="visitTrendData"
                  :options="areaChartOptions"
                  class="chart-wrapper"
                />
                <div v-else class="empty-chart-state">
                  <div class="empty-state-content">
                    <v-icon size="64" color="grey-lighten-2" class="mb-2">mdi-chart-timeline-variant</v-icon>
                    <h4 class="text-h6 text-grey-darken-1 font-weight-medium mb-1">Belum Ada Data</h4>
                    <p class="text-caption text-grey">Tren kunjungan bulanan akan tampil di sini</p>
                  </div>
                </div>
                <template #fallback>
                  <div class="chart-loading">
                    <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
                    <p class="loading-text">Loading chart...</p>
                  </div>
                </template>
              </ClientOnly>
            </div>
          </v-card>
        </v-col>

        <!-- Chart 2: Status Pembayaran (Doughnut Chart) -->
        <v-col cols="12" lg="4" md="6">
          <v-card class="modern-card chart-card">
            <div class="chart-header-modern">
              <div class="chart-header-left">
                <div class="chart-icon-wrapper chart-icon-success">
                  <v-icon size="small">mdi-cash-multiple</v-icon>
                </div>
                <div>
                  <h3 class="chart-title">Status Pembayaran</h3>
                  <p class="chart-subtitle">Distribusi metode bayar</p>
                </div>
              </div>
              <div class="chart-controls">
                <v-btn
                  v-if="false"
                  icon="mdi-download"
                  variant="text"
                  size="small"
                  color="success"
                  class="chart-download-btn-dark"
                  @click="handleChartExport('paymentStatus', 'Status Pembayaran')"
                  density="comfortable"
                ></v-btn>
              </div>
            </div>
            <div class="chart-container">
              <ClientOnly>
                <Doughnut
                  v-if="paymentStatusData.labels && paymentStatusData.labels.length > 0 && paymentStatusData.datasets[0].data.length > 0 && paymentStatusData.datasets[0].data.some(v => v > 0)"
                  :data="paymentStatusData"
                  :options="doughnutOptions"
                  class="chart-wrapper pie-chart"
                />
                <div v-else class="empty-chart-state">
                  <div class="empty-state-content">
                    <v-icon size="64" color="grey-lighten-2" class="mb-2">mdi-chart-donut-variant</v-icon>
                    <h4 class="text-h6 text-grey-darken-1 font-weight-medium mb-1">Belum Ada Data</h4>
                    <p class="text-caption text-grey">Distribusi metode bayar akan tampil di sini</p>
                  </div>
                </div>
                <template #fallback>
                  <div class="chart-loading">
                    <v-progress-circular indeterminate color="success" size="50"></v-progress-circular>
                    <p class="loading-text">Loading chart...</p>
                  </div>
                </template>
              </ClientOnly>
            </div>
          </v-card>
        </v-col>

        <!-- Chart 3: Waktu Tunggu per Poli (Bar Chart) -->
        <v-col cols="12" lg="6" md="6">
          <v-card class="modern-card chart-card">
            <div class="chart-header-modern">
              <div class="chart-header-left">
                <div class="chart-icon-wrapper chart-icon-secondary">
                  <v-icon size="small">mdi-clock-outline</v-icon>
                </div>
                <div>
                  <h3 class="chart-title">Waktu Tunggu per Poli</h3>
                  <p class="chart-subtitle">Rata-rata waktu tunggu (menit)</p>
                </div>
              </div>
              <div class="chart-controls">
                <v-btn
                  v-if="false"
                  icon="mdi-download"
                  variant="text"
                  size="small"
                  color="secondary"
                  class="chart-download-btn-dark"
                  @click="handleChartExport('waitingTime', 'Waktu Tunggu per Poli')"
                  density="comfortable"
                ></v-btn>
              </div>
            </div>
            <div class="chart-container">
              <ClientOnly>
                <Bar
                  v-if="waitingTimeData.labels && waitingTimeData.labels.length > 0 && waitingTimeData.datasets[0].data.length > 0 && waitingTimeData.datasets[0].data.some(v => v > 0)"
                  :data="waitingTimeData"
                  :options="horizontalBarOptions"
                  class="chart-wrapper"
                />
                <div v-else class="empty-chart-state">
                  <div class="empty-state-content">
                    <v-icon size="64" color="grey-lighten-2" class="mb-2">mdi-clock-outline</v-icon>
                    <h4 class="text-h6 text-grey-darken-1 font-weight-medium mb-1">Belum Ada Data</h4>
                    <p class="text-caption text-grey">Data waktu tunggu poli akan tampil di sini</p>
                  </div>
                </div>
                <template #fallback>
                  <div class="chart-loading">
                    <v-progress-circular indeterminate color="secondary" size="50"></v-progress-circular>
                    <p class="loading-text">Loading chart...</p>
                  </div>
                </template>
              </ClientOnly>
            </div>
          </v-card>
        </v-col>

        <!-- Chart 4: Tingkat Kehadiran (Polar Area) -->
        <v-col cols="12" lg="6" md="6">
          <v-card class="modern-card chart-card">
            <div class="chart-header-modern">
              <div class="chart-header-left">
                <div class="chart-icon-wrapper chart-icon-primary">
                  <v-icon size="small">mdi-account-check</v-icon>
                </div>
                <div>
                  <h3 class="chart-title">Tingkat Kehadiran</h3>
                  <p class="chart-subtitle">Perbandingan hadir vs tidak hadir</p>
                </div>
              </div>
              <div class="chart-controls">
                <v-btn
                  v-if="false"
                  icon="mdi-download"
                  variant="text"
                  size="small"
                  color="primary"
                  class="chart-download-btn-dark"
                  @click="handleChartExport('attendance', 'Tingkat Kehadiran')"
                  density="comfortable"
                ></v-btn>
                <v-chip class="live-chip" size="small">
                  <v-icon class="pulse-icon" size="16">mdi-circle</v-icon>
                  Minggu Ini
                </v-chip>
              </div>
            </div>
            <div class="chart-container">
              <ClientOnly>
                <PolarArea
                  v-if="attendanceData.labels && attendanceData.labels.length > 0 && attendanceData.datasets[0].data.length > 0 && attendanceData.datasets[0].data.some(v => v > 0)"
                  :data="attendanceData"
                  :options="polarAreaOptions"
                  class="chart-wrapper pie-chart"
                />
                <div v-else class="empty-chart-state">
                  <div class="empty-state-content">
                    <v-icon size="64" color="grey-lighten-2" class="mb-2">mdi-account-check</v-icon>
                    <h4 class="text-h6 text-grey-darken-1 font-weight-medium mb-1">Belum Ada Data</h4>
                    <p class="text-caption text-grey">Statistik tingkat kehadiran akan tampil di sini</p>
                  </div>
                </div>
                <template #fallback>
                  <div class="chart-loading">
                    <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
                    <p class="loading-text">Loading chart...</p>
                  </div>
                </template>
              </ClientOnly>
            </div>
          </v-card>
        </v-col>
      </v-row>

    <v-overlay v-model="isLoading" contained class="align-center justify-center">
      <v-progress-circular indeterminate size="64" color="secondary-600"></v-progress-circular>
      <p class="loading-text">Loading dashboard...</p>
    </v-overlay>
    </v-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Bar, Doughnut, Line, PolarArea } from 'vue-chartjs';
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ArcElement,
  LineElement,
  PointElement,
  Filler,
  RadialLinearScale
} from 'chart.js';

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ArcElement,
  LineElement,
  PointElement,
  Filler,
  RadialLinearScale
);

import { useAuth } from '~/composables/useAuth';
import { useVisitAPI } from '~/composables/useVisitAPI';
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import 'dayjs/locale/id';

dayjs.extend(weekday);
dayjs.extend(weekOfYear);
dayjs.locale('id');

definePageMeta({
  middleware:['auth', 'check-page-access']
})

const user = ref(null);
const isLoading = ref(false);
const { checkAuth } = useAuth();
const { fetchStats } = useVisitAPI();

// Color palette from assets/scss/_colors.scss
const colors = {
  primary: {
    700: '#3556AE',
    600: '#3A61C9',
    500: '#567EE7',
    400: '#7898EC',
    300: '#9AB2F1',
    200: '#BBCBF5',
  },
  secondary: {
    700: '#E65A0D',
    600: '#F16F29',
    500: '#FF8441',
    400: '#FF9D67',
    300: '#FFB58D',
  },
  success: {
    700: '#008D65',
    600: '#33A484',
    500: '#59B59B',
    400: '#80C6B2',
  },
  neutral: {
    100: '#FFFFFF',
    300: '#F5F7FA',
    500: '#CDD4DC',
    700: '#717171',
    900: '#212121',
  },
};

const exportType = ref('JSON');
const exportOptions = ref([
  { title: 'JSON (.json)', type: 'json', icon: 'mdi-code-json' },
  { title: 'CSV (.csv)', type: 'csv', icon: 'mdi-file-delimited' },
  { title: 'Excel (.xlsx) - Server Only', type: 'excel', icon: 'mdi-file-excel' },
  { title: 'PDF (.pdf) - Placeholder', type: 'pdf', icon: 'mdi-file-pdf' },
]);

const currentDate = ref('');
const filterDateFrom = ref(dayjs().format('YYYY-MM-DD'));
const filterDateTo = ref(dayjs().format('YYYY-MM-DD'));
const currentYear = dayjs().year();
const selectedYear = ref(currentYear);
const availableYears = ref([currentYear - 1, currentYear, currentYear + 1]);

// New Stats Data - Updated Metrics
const stats = ref([
  {
    label: 'Pasien Hari Ini',
    value: '-',
    icon: 'mdi-account-heart',
    iconSize: 24,
    iconColor: 'white',
    color: 'primary',
    change: '-',
    changeType: 'neutral',
    changeIcon: 'mdi-minus'
  },
  {
    label: 'Antrean Aktif',
    value: '-',
    icon: 'mdi-clock-fast',
    iconSize: 24,
    iconColor: 'white',
    color: 'secondary',
    change: '-',
    changeType: 'neutral',
    changeIcon: 'mdi-minus'
  },
  {
    label: 'Rata-rata Tunggu',
    value: '-',
    icon: 'mdi-timer-outline',
    iconSize: 24,
    iconColor: 'white',
    color: 'success',
    change: '-',
    changeType: 'neutral',
    changeIcon: 'mdi-minus'
  },
  {
    label: 'Tingkat Kehadiran',
    value: '-',
    icon: 'mdi-check-circle',
    iconSize: 24,
    iconColor: 'white',
    color: 'primary',
    change: '-',
    changeType: 'neutral',
    changeIcon: 'mdi-minus'
  }
]);

// New Data: Monthly Visit Trend (Area Chart)
const visitTrendData = ref({
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'],
  datasets: [
    {
      label: 'Pasien Umum',
      data: [],
      backgroundColor: 'rgba(86, 126, 231, 0.2)',
      borderColor: colors.primary[500],
      borderWidth: 3,
      fill: true,
      tension: 0.4,
      pointRadius: 4,
      pointHoverRadius: 6,
      pointBackgroundColor: colors.primary[600],
      pointBorderColor: '#fff',
      pointBorderWidth: 2,
    },
    {
      label: 'Pasien BPJS',
      data: [],
      backgroundColor: 'rgba(255, 132, 65, 0.2)',
      borderColor: colors.secondary[500],
      borderWidth: 3,
      fill: true,
      tension: 0.4,
      pointRadius: 4,
      pointHoverRadius: 6,
      pointBackgroundColor: colors.secondary[600],
      pointBorderColor: '#fff',
      pointBorderWidth: 2,
    }
  ]
});

// Payment Status Data (Doughnut Chart)
const paymentStatusData = ref({
  labels: [],
  datasets: [
    {
      data: [],
      backgroundColor: [
        colors.primary[500],
        colors.secondary[500],
        colors.success[500],
        colors.primary[300],
      ],
      borderColor: '#fff',
      borderWidth: 3,
      hoverOffset: 15,
    }
  ]
});

// Waiting Time per Poli Data (Horizontal Bar Chart)
const waitingTimeData = ref({
  labels: [],
  datasets: [
    {
      label: 'Waktu Tunggu (menit)',
      data: [],
      backgroundColor: [
        colors.primary[400],
        colors.secondary[400],
        colors.success[400],
        colors.primary[500],
        colors.secondary[500],
        colors.success[500],
      ],
      borderColor: [
        colors.primary[600],
        colors.secondary[600],
        colors.success[600],
        colors.primary[700],
        colors.secondary[700],
        colors.success[700],
      ],
      borderWidth: 2,
      borderRadius: 8,
    }
  ]
});

// Attendance Data (Polar Area Chart)
const attendanceData = ref({
  labels: [],
  datasets: [
    {
      data: [],
      backgroundColor: [
        colors.success[400],
        colors.primary[400],
        colors.secondary[400],
        colors.neutral[500],
        colors.primary[300],
      ],
      borderColor: '#fff',
      borderWidth: 2,
    }
  ]
});

// Area Chart Options (Visit Trend)
const areaChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  animation: { 
    duration: 1000,
    easing: 'easeInOutQuart'
  },
  plugins: {
    legend: {
      display: true,
      position: 'top',
      align: 'end',
      labels: {
        usePointStyle: true,
        padding: 12,
        font: {
          size: 11,
          weight: '600',
          family: "'Inter', sans-serif"
        },
        color: colors.neutral[700],
      }
    },
    tooltip: {
      enabled: true,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: colors.neutral[900],
      bodyColor: colors.neutral[700],
      borderColor: colors.neutral[500],
      borderWidth: 1,
      padding: 12,
      boxPadding: 6,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return `${context.dataset.label}: ${context.parsed.y.toLocaleString('id-ID')} pasien`;
        }
      }
    },
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        color: colors.neutral[700],
        font: {
          size: 10,
          weight: '500'
        }
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        drawBorder: false,
      },
      ticks: {
        color: colors.neutral[700],
        font: {
          size: 10,
          weight: '600'
        },
        callback: function(value) {
          return value.toLocaleString('id-ID');
        }
      }
    }
  },
  interaction: {
    intersect: false,
    mode: 'index'
  }
});

// Doughnut Options (Payment Status)
const doughnutOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  animation: {
    animateRotate: true,
    animateScale: true,
    duration: 1200,
    easing: 'easeInOutQuart'
  },
  cutout: '65%',
  plugins: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        usePointStyle: true,
        padding: 12,
        font: {
          size: 10,
          weight: '600',
          family: "'Inter', sans-serif"
        },
        color: colors.neutral[700],
        generateLabels: function(chart) {
          const data = chart.data;
          if (data.labels.length && data.datasets.length) {
            return data.labels.map((label, i) => {
              const value = data.datasets[0].data[i];
              const total = data.datasets[0].data.reduce((a, b) => a + b, 0);
              const percentage = ((value / total) * 100).toFixed(1);
              return {
                text: `${label}: ${percentage}%`,
                fillStyle: data.datasets[0].backgroundColor[i],
                hidden: false,
                index: i
              };
            });
          }
          return [];
        }
      }
    },
    tooltip: {
      enabled: true,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: colors.neutral[900],
      bodyColor: colors.neutral[700],
      borderColor: colors.neutral[500],
      borderWidth: 1,
      padding: 12,
      boxPadding: 6,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          const label = context.label || '';
          const value = context.parsed;
          const total = context.dataset.data.reduce((a, b) => a + b, 0);
          const percentage = ((value / total) * 100).toFixed(1);
          return `${label}: ${value.toLocaleString('id-ID')} (${percentage}%)`;
        }
      }
    }
  }
});

// Horizontal Bar Options (Waiting Time)
const horizontalBarOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: 'y',
  animation: {
    duration: 1000,
    easing: 'easeInOutQuart'
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: true,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: colors.neutral[900],
      bodyColor: colors.neutral[700],
      borderColor: colors.neutral[500],
      borderWidth: 1,
      padding: 12,
      boxPadding: 6,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return `Waktu tunggu: ${context.parsed.x} menit`;
        }
      }
    },
  },
  scales: {
    x: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        drawBorder: false,
      },
      ticks: {
        color: colors.neutral[700],
        font: {
          size: 10,
          weight: '600'
        },
        callback: function(value) {
          return value + ' min';
        }
      }
    },
    y: {
      grid: {
        display: false,
      },
      ticks: {
        color: colors.neutral[700],
        font: {
          size: 10,
          weight: '500'
        }
      }
    }
  }
});

// Polar Area Options (Attendance)
const polarAreaOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  animation: {
    animateRotate: true,
    animateScale: true,
    duration: 1200,
    easing: 'easeInOutQuart'
  },
  plugins: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        usePointStyle: true,
        padding: 10,
        font: {
          size: 10,
          weight: '600',
          family: "'Inter', sans-serif"
        },
        color: colors.neutral[700],
      }
    },
    tooltip: {
      enabled: true,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: colors.neutral[900],
      bodyColor: colors.neutral[700],
      borderColor: colors.neutral[500],
      borderWidth: 1,
      padding: 12,
      boxPadding: 6,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          const label = context.label || '';
          const value = context.parsed.r;
          const total = context.dataset.data.reduce((a, b) => a + b, 0);
          const percentage = ((value / total) * 100).toFixed(1);
          return `${label}: ${value.toLocaleString('id-ID')} (${percentage}%)`;
        }
      }
    }
  },
  scales: {
    r: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: colors.neutral[700],
        font: {
          size: 9,
          weight: '500'
        },
        backdropColor: 'transparent'
      }
    }
  }
});

const refreshDashboardStats = async (filterParams = {}) => {
  isLoading.value = true;
  try {
    // Merge provided filters with UI dates if not explicitly provided
    const params = {
      from: filterDateFrom.value,
      to: filterDateTo.value,
      ...filterParams
    };
    
    const data = await fetchStats(params);
    console.log('📡 API Response Data:', data);
    if (data) {
      // 1. Update Stats Cards
      // If we are looking at a range, sum up the total from payment distribution 
      // because today_patients only counts for the current actual 'Today'
      const isDateRange = filterDateFrom.value !== filterDateTo.value;
      
      if (isDateRange && data.total_by_payment_type) {
        const totalInRange = Object.values(data.total_by_payment_type).reduce((a, b) => a + b, 0);
        stats.value[0].value = totalInRange.toString();
        stats.value[0].label = 'Total Pasien';
        stats.value[1].label = 'Total Antrean';
      } else {
        stats.value[0].value = data.today_patients.toString();
        stats.value[0].label = 'Pasien Hari Ini';
        stats.value[1].label = 'Antrean Aktif';
      }
      
      const activeQueuesTotal = Object.values(data.today_active_queues_by_service).reduce((sum, val) => sum + val, 0);
      stats.value[1].value = activeQueuesTotal.toString();
      
      const waitMinutes = Math.floor(data.average_waiting_seconds / 60);
      stats.value[2].value = `${waitMinutes} min`;

      // 2. Update Payment Status Chart
      if (data.total_by_payment_type) {
        const labelMap = {
          'JKN': 'JKN / BPJS',
          'UMUM': 'Umum / Mandiri',
          'UNKNOWN': 'Lainnya'
        };
        
        const labels = Object.keys(data.total_by_payment_type).map(key => labelMap[key] || key);
        const values = Object.values(data.total_by_payment_type);
        
        paymentStatusData.value = {
          labels: labels,
          datasets: [{
            ...paymentStatusData.value.datasets[0],
            data: values,
            backgroundColor: [
              colors.primary[500],
              colors.secondary[500],
              colors.success[500],
              colors.primary[300],
              colors.secondary[300]
            ]
          }]
        };
      }

      // 3. Update Waiting Time by Service Chart
      if (data.average_waiting_by_service_seconds && Object.keys(data.average_waiting_by_service_seconds).length > 0) {
        waitingTimeData.value = {
          labels: Object.keys(data.average_waiting_by_service_seconds).map(key => key.split('|')[0]),
          datasets: [{
            ...waitingTimeData.value.datasets[0],
            data: Object.values(data.average_waiting_by_service_seconds).map(sec => Math.round(sec / 60))
          }]
        };
      }

      // 4. Update Monthly Trend (Map API into datasets)
      if (data.monthly_trend && data.monthly_trend.length > 0) {
        // TODO: Map 'data.monthly_trend' to 'visitTrendData'
        // Example:
        // visitTrendData.value.labels = data.monthly_trend.map(m => m.month_name);
        // visitTrendData.value.datasets[0].data = data.monthly_trend.map(m => m.umum_count);
        // visitTrendData.value.datasets[1].data = data.monthly_trend.map(m => m.bpjs_count);
      }

      // 5. Update Attendance Data
      if (data.attendance_stats && Object.keys(data.attendance_stats).length > 0) {
        // TODO: Map 'data.attendance_stats' to 'attendanceData'
        // Example:
        // attendanceData.value = {
        //   labels: Object.keys(data.attendance_stats),
        //   datasets: [{
        //     ...attendanceData.value.datasets[0],
        //     data: Object.values(data.attendance_stats)
        //   }]
        // };
      }
    }
  } catch (error) {
    console.error('❌ Error refreshing stats:', error);
  } finally {
    isLoading.value = false;
  }
};

const applyDateFilter = () => {
  refreshDashboardStats();
};

onMounted(async () => {
  console.log('📊 Dashboard mounted');
  try {
    const sessionUser = await checkAuth();
    if (sessionUser) {
      user.value = sessionUser;
      currentDate.value = dayjs().format('dddd, DD MMMM YYYY');
      
      // Load real-time stats
      await refreshDashboardStats();
      console.log('✅ Dashboard loaded successfully');
    }
  } catch (error) {
    console.error('❌ Auth check error:', error);
  }
});

const handleExport = (type) => {
  // 1. Prepare Export Data
  const exportData = {
    metadata: {
      report_name: 'Dashboard Antrean Statistics',
      generated_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      period_from: filterDateFrom.value,
      period_to: filterDateTo.value,
      user: user.value?.name || user.value?.preferred_username || 'System'
    },
    summary_stats: stats.value.map(s => ({
      label: s.label,
      value: s.value
    })),
    payment_distribution: paymentStatusData.value.labels.map((label, i) => ({
      method: label,
      total: paymentStatusData.value.datasets[0].data[i]
    })),
    waiting_time_by_service: waitingTimeData.value.labels.map((label, i) => ({
      service: label,
      average_minutes: waitingTimeData.value.datasets[0].data[i]
    }))
  };

  // 2. Process Export based on type
  if (type === 'json') {
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    downloadBlob(blob, `report_antrean_${dayjs().format('YYYYMMDD_HHmm')}.json`);
  } else if (type === 'csv') {
    // Generate CSV String
    let csv = 'Dashboard Antrean Statistics\n';
    csv += `Periode: ${filterDateFrom.value} - ${filterDateTo.value}\n\n`;
    
    csv += 'RINGKASAN STATISTIK\n';
    csv += 'Metrik,Nilai\n';
    exportData.summary_stats.forEach(s => {
      csv += `"${s.label}","${s.value}"\n`;
    });
    
    csv += '\nSTATUS PEMBAYARAN\n';
    csv += 'Metode,Jumlah\n';
    exportData.payment_distribution.forEach(p => {
      csv += `"${p.method}",${p.total}\n`;
    });
    
    csv += '\nWAKTU TUNGGU PER POLI\n';
    csv += 'Layanan,Rata-rata (Menit)\n';
    exportData.waiting_time_by_service.forEach(w => {
      csv += `"${w.service}",${w.average_minutes}\n`;
    });

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    downloadBlob(blob, `report_antrean_${dayjs().format('YYYYMMDD_HHmm')}.csv`);
  } else {
    alert(`Export ${type} - Feature coming soon!`);
  }
};

const handleChartExport = (chartId, title) => {
  let csv = `${title}\n`;
  csv += `Periode: ${filterDateFrom.value} - ${filterDateTo.value}\n\n`;

  if (chartId === 'visitTrend') {
    csv += 'Bulan,' + visitTrendData.value.datasets.map(d => d.label).join(',') + '\n';
    visitTrendData.value.labels.forEach((label, i) => {
      csv += `"${label}",` + visitTrendData.value.datasets.map(d => d.data[i]).join(',') + '\n';
    });
  } else if (chartId === 'paymentStatus') {
    csv += 'Metode Pembayaran,Jumlah\n';
    paymentStatusData.value.labels.forEach((label, i) => {
      csv += `"${label}",${paymentStatusData.value.datasets[0].data[i]}\n`;
    });
  } else if (chartId === 'waitingTime') {
    csv += 'Layanan,Rata-rata Waktu Tunggu (Menit)\n';
    waitingTimeData.value.labels.forEach((label, i) => {
      csv += `"${label}",${waitingTimeData.value.datasets[0].data[i]}\n`;
    });
  } else if (chartId === 'attendance') {
    csv += 'Status Kehadiran,Jumlah\n';
    attendanceData.value.labels.forEach((label, i) => {
      csv += `"${label}",${attendanceData.value.datasets[0].data[i]}\n`;
    });
  }

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  downloadBlob(blob, `${chartId}_${dayjs().format('YYYYMMDD_HHmm')}.csv`);
};

// Helper function for file download
const downloadBlob = (blob, filename) => {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/_colors.scss';
@import '@/assets/scss/_variables.scss';

.dashboard-wrapper {
  min-height: 100vh;
  background: var(--color-neutral-300);
}

/* Modern Hero Header Section */
.dashboard-hero {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  box-shadow: 0 4px 24px rgba(58, 97, 201, 0.2);

  /* Geometric Pattern Background */
  .hero-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.1;
    pointer-events: none;
  }

  .pattern-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid white;
    
    &.circle-1 {
      width: 400px;
      height: 400px;
      top: -200px;
      right: -100px;
      animation: rotate-slow 30s linear infinite;
    }
    
    &.circle-2 {
      width: 250px;
      height: 250px;
      bottom: -100px;
      left: -50px;
      animation: rotate-slow 25s linear infinite reverse;
    }
    
    &.circle-3 {
      width: 150px;
      height: 150px;
      top: 50%;
      left: 40%;
      animation: pulse-circle 4s ease-in-out infinite;
    }
  }

  .pattern-lines {
    position: absolute;
    inset: 0;
    
    .line {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, transparent, white, transparent);
      width: 100%;
      
      &:nth-child(1) {
        top: 20%;
        animation: slide-line 8s linear infinite;
      }
      
      &:nth-child(2) {
        top: 50%;
        animation: slide-line 10s linear infinite;
      }
      
      &:nth-child(3) {
        top: 80%;
        animation: slide-line 12s linear infinite;
      }
    }
  }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-circle {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

@keyframes slide-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hero-container {
  position: relative;
  z-index: 2;
}

.hero-row {
  min-height: 180px;
}

/* Left Section */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-section {
  .welcome-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .badge-dot {
      width: 8px;
      height: 8px;
      background: var(--color-secondary-500);
      border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    
    .badge-text-new {
      font-size: 11px;
      font-weight: 700;
      color: white;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }
  }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.hero-title-new {
  font-size: 36px;
  font-weight: 900;
  color: white;
  margin: 0 0 12px 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.hero-subtitle-new {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px 0;

  .greeting-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
  }
  
  .greeting-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .user-name-new {
    font-size: 22px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  
  .subtitle-desc {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
  }
}

.quick-info-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  
  .info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    span {
      font-size: 12px;
      font-weight: 600;
      color: white;
    }
  }
}

/* Right Section */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-actions-new {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 450px;
}

.date-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  
  .date-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .modern-datepicker {
    background: transparent;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    width: 100%;
    
    &::-webkit-calendar-picker-indicator {
      filter: invert(1);
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
      
      &:hover {
        opacity: 1;
      }
    }
  }
}

.filter-submit-btn {
  background: white !important;
  color: var(--color-primary-600) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
  }
}

.action-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  margin: 4px 0;
}

.modern-btn {
  text-transform: none;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  }
}

.export-btn-new {
  padding: 12px 20px !important;
  height: 48px !important;
  
  .btn-text {
    font-size: 14px;
    letter-spacing: 0.3px;
  }
}

.export-menu-new {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  .export-item-new {
    padding: 12px 16px;
    transition: all 0.2s ease;
    
    &:hover {
      background: var(--color-primary-50);
    }
  }
}

.header-mini-stats {
  display: flex;
  gap: 10px;
}

.mini-stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.mini-stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-500);
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(86, 126, 231, 0.3);
  
  &.secondary {
    background: var(--color-secondary-500);
    box-shadow: 0 4px 12px rgba(255, 132, 65, 0.3);
  }
}

.mini-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  
  .mini-stat-value {
    font-size: 20px;
    font-weight: 900;
    color: white;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .mini-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.2;
  }
}

/* Compact Background */
.dashboard-bg {
  background: var(--color-neutral-300);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: auto;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(58, 97, 201, 0.02) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(241, 111, 41, 0.02) 0%, transparent 50%);
    pointer-events: none;
  }
}

/* Compact Stats Cards */
.stats-row {
  margin-top: 8px;
  margin-bottom: 12px !important;
  position: relative;
  z-index: 3;
  
  :deep(.v-col) {
    padding: 6px !important;
    display: flex;
  }
}

.innovative-card {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--color-primary-200);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeIn 0.6s ease-out;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  
  .pattern-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-primary-600);
    border-radius: 50%;
    animation: pulse-dot 3s ease-in-out infinite;
    
    &:nth-child(1) {
      top: 20%;
      left: 15%;
      animation-delay: 0s;
    }
    
    &:nth-child(2) {
      top: 60%;
      right: 20%;
      animation-delay: 1s;
    }
    
    &:nth-child(3) {
      bottom: 25%;
      left: 50%;
      animation-delay: 2s;
    }
  }
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
}

/* Compact Stat Card Layout */
.stat-card-content {
  padding: 16px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
  height: 100%;
  flex: 1;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modern-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  .icon-glow {
    position: absolute;
    inset: -6px;
    background: currentColor;
    border-radius: 16px;
    opacity: 0;
    filter: blur(16px);
    transition: all 0.4s ease;
  }
  
  :deep(.v-icon) {
    font-size: 24px !important;
  }
}

.innovative-card:hover .modern-icon {
  transform: scale(1.1) rotate(-5deg);
  
  .icon-glow {
    opacity: 0.4;
  }
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  
  &.positive {
    background: var(--color-success-100);
    color: var(--color-success-700);
    box-shadow: 0 2px 8px rgba(51, 164, 132, 0.2);
  }
}

.stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.stat-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.modern-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-neutral-900);
  line-height: 1;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.5px;
}

.modern-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.3;
}

.icon-primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.3);
}

.icon-secondary {
  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(241, 111, 41, 0.3);
}

.icon-success {
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(51, 164, 132, 0.3);
}

.hover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(86, 126, 231, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.innovative-card:hover .hover-gradient {
  opacity: 1;
}

.stat-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.progress-primary {
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  }
  
  &.progress-secondary {
    background: linear-gradient(90deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
  }
  
  &.progress-success {
    background: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
  }
}

.innovative-card:hover .progress-bar {
  width: 100%;
}

/* Compact Chart Cards */
.v-row:not(.stats-row) {
  :deep(.v-col) {
    padding: 6px !important;
    display: flex;
  }
}

.modern-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(58, 97, 201, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  &:hover {
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);

    &::before {
      opacity: 1;
    }

    &::after {
      opacity: 1;
    }
  }
}

.chart-card {
  height: 320px;
  display: flex;
  flex-direction: column;
}

.interactive-year-chip {
  cursor: pointer;
  transition: all 0.3s ease !important;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(51, 164, 132, 0.4) !important;
  }
}

.year-dropdown-list {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px !important;
  padding: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.year-item-active {
  background: var(--color-success-50) !important;
  color: var(--color-success-600) !important;
  
  .dropdown-year-text {
    font-weight: 700;
  }
}

.dropdown-year-text {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.chart-download-btn-dark {
  opacity: 0.7 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  &:hover {
    opacity: 1 !important;
    transform: scale(1.15) !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 247, 250, 0.3) 100%);
  position: relative;
  z-index: 1;

  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
    opacity: 0.5;
    border-radius: 2px;
  }
}

.chart-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: inherit;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.4s ease;
  }
  
  :deep(.v-icon) {
    font-size: 18px !important;
  }
}

.chart-header-modern:hover .chart-icon-wrapper {
  transform: scale(1.08) rotate(5deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  
  &::before {
    opacity: 0.5;
  }
}

.chart-icon-primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
  color: white;
}

.chart-icon-secondary {
  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
  color: white;
}

.chart-icon-success {
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
  color: white;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.chart-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-neutral-600);
  margin: 3px 0 0 0;
  opacity: 0.8;
  letter-spacing: 0.2px;
}

.chart-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(245, 247, 250, 0.1) 100%);
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

.chart-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  
  canvas {
    max-height: 100% !important;
  }
}

.pie-chart {
  max-width: 100%;
  margin: 0 auto;
}

:deep(canvas) {
  border-radius: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.02);
  }
}

.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  
  .loading-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin: 0;
  }
}

.empty-chart-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  margin: 16px;
  padding: 24px;
  
  .empty-state-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.live-chip {
  font-weight: 700;
  font-size: 11px;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
  box-shadow: 0 2px 10px rgba(51, 164, 132, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 12px !important;
  border-radius: 50px !important;
}

.pulse-icon {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* Responsive */
@media (max-width: 960px) {
  .dashboard-hero {
    min-height: 200px;
  }

  .hero-row {
    min-height: auto;
  }

  .hero-left,
  .hero-right {
    text-align: left;
  }

  .hero-right {
    justify-content: flex-start;
    margin-top: 16px;
  }

  .hero-title-new {
    font-size: 28px;
  }

  .hero-subtitle-new {
    .user-name-new {
      font-size: 18px;
    }
  }

  .hero-actions-new {
    max-width: 100%;
  }

  .header-mini-stats {
    flex-direction: column;
  }

  .mini-stat-card {
    width: 100%;
  }

  .stats-row {
    margin-top: -30px;
    
    :deep(.v-col) {
      display: flex;
    }
  }
  
  .innovative-card {
    height: 100%;
  }

  .stat-card-content {
    padding: 14px;
    min-height: 120px;
  }

  .modern-value {
    font-size: 24px;
  }

  .modern-label {
    font-size: 10px;
  }

  .modern-icon {
    width: 42px;
    height: 42px;
  }

  .chart-header-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }

  .chart-title {
    font-size: 14px;
  }
  
  .chart-subtitle {
    font-size: 10px;
  }
  
  .chart-card {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .dashboard-hero {
    min-height: 240px;
  }

  .hero-title-new {
    font-size: 24px;
  }

  .hero-subtitle-new {
    .user-name-new {
      font-size: 16px;
    }
    
    .subtitle-desc {
      font-size: 12px;
    }
  }

  .quick-info-pills {
    .info-pill {
      font-size: 11px;
      padding: 5px 10px;
    }
  }

  .export-btn-new {
    height: 44px !important;
    
    .btn-text {
      font-size: 13px;
    }
  }

  .mini-stat-card {
    padding: 10px 12px;
  }

  .mini-stat-icon {
    width: 32px;
    height: 32px;
  }

  .mini-stat-content {
    .mini-stat-value {
      font-size: 18px;
    }
    
    .mini-stat-label {
      font-size: 10px;
    }
  }

  .dashboard-bg {
    padding: 8px !important;
  }
  
  .stats-row,
  .v-row:not(.stats-row) {
    :deep(.v-col) {
      display: flex;
    }
  }
  
  .innovative-card,
  .modern-card {
    height: 100%;
  }

  .stat-card-content {
    padding: 12px;
    min-height: 110px;
  }

  .modern-icon {
    width: 40px;
    height: 40px;
  }
  
  .chart-card {
    height: 260px;
  }
}
</style>
