<script setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import VehicleShowcase from '@/components/garage/VehicleShowcase.vue'
import AchievementShowcase from '@/components/gamification/AchievementShowcase.vue'
import AnalyticsDashboard from '@/components/analytics/AnalyticsDashboard.vue'
import { useThemeStore } from '@/stores/themeStore'
import { useAuthStore } from '@/stores/authStore'

const report = ref(null)
const loading = ref(true)
const themeStore = useThemeStore()
const authStore = useAuthStore()

const themeClasses = computed(() => themeStore.themeClasses)

onMounted(async () => {
  const token = localStorage.getItem('token')
  try {
    // Fetch user profile
    await authStore.fetchUserProfile()
    
    // Fetch report summary
    const res = await axios.get(`${import.meta.env.VITE_API_BASE_URL || 'https://dev.servicefinder.hu'}/reports/summary/latest`, {
      headers: { Authorization: `Bearer ${token}` }
    })
    report.value = res.data
  } catch (err) {
    console.log("Még nincs rögzített adat.")
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="!loading" :class="['space-y-8 p-6 min-h-screen transition-all duration-500', themeClasses.background]">
    <!-- Vehicle Showcase (Dual-UI) -->
    <VehicleShowcase />

    <!-- Gamification Showcase (Dual-UI) -->
    <div class="backdrop-blur-md bg-white/80 rounded-2xl shadow-xl p-6 border border-slate-200/60 transition-all duration-300 hover:shadow-2xl hover:border-slate-300/80">
      <AchievementShowcase />
    </div>

    <!-- Analytics & TCO Dashboard (EPIC 11 - Ticket #126) -->
    <div class="backdrop-blur-md bg-gradient-to-br from-white to-blue-50/80 rounded-2xl shadow-xl p-6 border border-blue-200/60 transition-all duration-300 hover:shadow-2xl hover:border-blue-300/80">
      <AnalyticsDashboard />
    </div>

    <!-- Existing Report Section (if data exists) -->
    <div v-if="report" class="backdrop-blur-md bg-white/90 rounded-2xl shadow-lg p-6 border border-slate-200/60 transition-all duration-300">
      <h2 class="text-2xl font-bold text-slate-900 mb-6">Financial Summary</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gradient-to-br from-blue-50/80 to-blue-100/50 p-5 rounded-xl border border-blue-200/40 transition-all duration-200 hover:scale-[1.02] hover:shadow-md">
          <div class="text-sm text-blue-700 font-medium">Total Expenses</div>
          <div class="text-2xl font-bold text-slate-900">€{{ report.total_expenses?.toLocaleString() || '0' }}</div>
        </div>
        <div class="bg-gradient-to-br from-emerald-50/80 to-emerald-100/50 p-5 rounded-xl border border-emerald-200/40 transition-all duration-200 hover:scale-[1.02] hover:shadow-md">
          <div class="text-sm text-emerald-700 font-medium">Monthly Average</div>
          <div class="text-2xl font-bold text-slate-900">€{{ report.monthly_average?.toLocaleString() || '0' }}</div>
        </div>
        <div class="bg-gradient-to-br from-violet-50/80 to-violet-100/50 p-5 rounded-xl border border-violet-200/40 transition-all duration-200 hover:scale-[1.02] hover:shadow-md">
          <div class="text-sm text-violet-700 font-medium">Vehicles Tracked</div>
          <div class="text-2xl font-bold text-slate-900">{{ report.vehicle_count || '0' }}</div>
        </div>
      </div>
    </div>

    <!-- Empty State (no report data) -->
    <div v-else class="text-center py-12 bg-gradient-to-br from-slate-50/80 to-white rounded-2xl border border-slate-200/60 backdrop-blur-sm">
      <span class="text-6xl text-slate-300">📊</span>
      <h2 class="text-xl font-bold text-slate-500 mt-4">Még nincsenek rögzített költségeid.</h2>
      <p class="text-slate-600 mt-2 mb-6">Start tracking your vehicle expenses to see insights here.</p>
      <router-link 
        to="/expenses" 
        class="inline-block px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg"
      >
        Kezdd el itt! →
      </router-link>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <router-link 
        to="/expenses/add" 
        class="backdrop-blur-sm bg-white/90 p-6 rounded-xl shadow-sm border border-slate-200/60 hover:shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 group"
      >
        <div class="flex items-center">
          <div class="p-3 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg mr-4 group-hover:from-blue-200 group-hover:to-blue-300 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
          </div>
          <div>
            <h3 class="font-bold text-slate-900">Add Expense</h3>
            <p class="text-slate-600 text-sm">Record fuel, maintenance, etc.</p>
          </div>
        </div>
      </router-link>

      <router-link 
        to="/vehicles/add" 
        class="backdrop-blur-sm bg-white/90 p-6 rounded-xl shadow-sm border border-slate-200/60 hover:shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 group"
      >
        <div class="flex items-center">
          <div class="p-3 bg-gradient-to-br from-emerald-100 to-emerald-200 rounded-lg mr-4 group-hover:from-emerald-200 group-hover:to-emerald-300 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <div>
            <h3 class="font-bold text-slate-900">Add Vehicle</h3>
            <p class="text-slate-600 text-sm">Register a new vehicle</p>
          </div>
        </div>
      </router-link>

      <router-link 
        to="/expenses" 
        class="backdrop-blur-sm bg-white/90 p-6 rounded-xl shadow-sm border border-slate-200/60 hover:shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 group"
      >
        <div class="flex items-center">
          <div class="p-3 bg-gradient-to-br from-violet-100 to-violet-200 rounded-lg mr-4 group-hover:from-violet-200 group-hover:to-violet-300 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <div>
            <h3 class="font-bold text-slate-900">View Reports</h3>
            <p class="text-slate-600 text-sm">Analytics and insights</p>
          </div>
        </div>
      </router-link>
    </div>
  </div>

  <!-- Loading State -->
  <div v-else class="flex justify-center items-center h-64">
    <div class="text-center">
      <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
      <p class="mt-4 text-slate-600">Loading dashboard...</p>
    </div>
  </div>
</template>

<style scoped>
/* Custom styles */
</style>