<script setup lang="ts">
import { ref } from 'vue'
import { BarChart3, TrendingUp, Users, Clock } from 'lucide-vue-next'

const timeRange = ref<'24h' | '7d' | '30d'>('7d')
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <BarChart3 class="w-5 h-5 text-oxide-500" />
        <h1 class="text-2xl font-bold text-neutral-100">Analytics</h1>
      </div>
      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
        <button
          v-for="opt in (['24h', '7d', '30d'] as const)"
          :key="opt"
          @click="timeRange = opt"
          class="px-3 py-2 text-sm font-medium transition-colors"
          :class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
        >
          {{ opt }}
        </button>
      </div>
    </div>

    <!-- Stat cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-2 mb-2">
          <Users class="w-4 h-4 text-neutral-500" />
          <p class="text-sm text-neutral-400">Peak Players</p>
        </div>
        <p class="text-2xl font-bold text-neutral-100">\u2014</p>
        <p class="text-xs text-neutral-600 mt-1">No data yet</p>
      </div>
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-2 mb-2">
          <TrendingUp class="w-4 h-4 text-neutral-500" />
          <p class="text-sm text-neutral-400">Avg Players</p>
        </div>
        <p class="text-2xl font-bold text-neutral-100">\u2014</p>
        <p class="text-xs text-neutral-600 mt-1">No data yet</p>
      </div>
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-2 mb-2">
          <Clock class="w-4 h-4 text-neutral-500" />
          <p class="text-sm text-neutral-400">Uptime</p>
        </div>
        <p class="text-2xl font-bold text-neutral-100">\u2014</p>
        <p class="text-xs text-neutral-600 mt-1">No data yet</p>
      </div>
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-2 mb-2">
          <BarChart3 class="w-4 h-4 text-neutral-500" />
          <p class="text-sm text-neutral-400">Unique Players</p>
        </div>
        <p class="text-2xl font-bold text-neutral-100">\u2014</p>
        <p class="text-xs text-neutral-600 mt-1">No data yet</p>
      </div>
    </div>

    <!-- Chart placeholders -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Player Count Over Time</h2>
        <div class="h-48 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
          <p class="text-sm text-neutral-600">Chart will render when data is available</p>
        </div>
      </div>
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Server Performance</h2>
        <div class="h-48 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
          <p class="text-sm text-neutral-600">FPS, entity count, and memory usage</p>
        </div>
      </div>
    </div>

    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Player Retention</h2>
      <div class="h-48 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
        <p class="text-sm text-neutral-600">New vs returning players, session duration distribution</p>
      </div>
    </div>
  </div>
</template>
