<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
import { useApi } from '@/composables/useApi'
import { useAuthStore } from '@/stores/auth'
import { useToastStore } from '@/stores/toast'
import type { AnalyticsSummary, TimeseriesData } from '@/types'
import { safeFixed } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import StatCard from '@/components/ds/data/StatCard.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Tabs from '@/components/ds/navigation/Tabs.vue'

const api = useApi()
const authStore = useAuthStore()
const toast = useToastStore()

const timeRange = ref<'24h' | '7d' | '30d'>('7d')
const loading = ref(true)
const summary = ref<AnalyticsSummary | null>(null)
const timeseries = ref<TimeseriesData | null>(null)

const playerChart = ref<HTMLElement | null>(null)
const perfChart = ref<HTMLElement | null>(null)
let playerChartInstance: ECharts | null = null
let perfChartInstance: ECharts | null = null

const rangeToHours = (range: string): number => {
  switch (range) {
    case '24h': return 24
    case '7d': return 168
    case '30d': return 720
    default: return 168
  }
}

const loadAnalytics = async () => {
  loading.value = true
  try {
    const hours = rangeToHours(timeRange.value)

    const [summaryRes, timeseriesRes] = await Promise.all([
      api.get<AnalyticsSummary>(`/analytics/summary?range=${hours}`),
      api.get<TimeseriesData>(`/analytics/timeseries?range=${hours}&granularity=hourly`)
    ])

    summary.value = summaryRes
    timeseries.value = timeseriesRes

    await nextTick()
    renderCharts()
  } catch {
    toast.error('Failed to load analytics data')
  } finally {
    loading.value = false
  }
}

function cssVar(name: string): string {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}

const renderCharts = () => {
  if (!timeseries.value) return

  const accent = cssVar('--accent') || '#CE422B'
  const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
  const axisLine = cssVar('--border-default') || '#404040'
  const labelColor = cssVar('--text-tertiary') || '#808080'
  const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
  const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
  const tooltipText = cssVar('--text-primary') || '#e5e5e5'
  const mono = 'JetBrains Mono, monospace'

  // Player count chart
  if (playerChart.value) {
    if (playerChartInstance) {
      playerChartInstance.dispose()
    }
    playerChartInstance = echarts.init(playerChart.value)

    playerChartInstance.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: tooltipBg,
        borderColor: tooltipBorder,
        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: (timeseries.value.timestamps ?? []).map(ts => new Date(ts).toLocaleString('en-US', {
          month: 'short',
          day: 'numeric',
          hour: '2-digit'
        })),
        axisLine: { lineStyle: { color: axisLine } },
        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: axisLine } },
        splitLine: { lineStyle: { color: grid } },
        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
      },
      series: [
        {
          name: 'Players',
          type: 'line',
          data: timeseries.value.player_count ?? [],
          smooth: true,
          lineStyle: { color: accent, width: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: accent + '55' },
              { offset: 1, color: accent + '00' }
            ])
          },
          itemStyle: { color: accent }
        }
      ]
    })
  }

  // Performance chart (FPS + Entities)
  if (perfChart.value) {
    if (perfChartInstance) {
      perfChartInstance.dispose()
    }
    perfChartInstance = echarts.init(perfChart.value)

    perfChartInstance.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: tooltipBg,
        borderColor: tooltipBorder,
        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
      },
      legend: {
        data: ['FPS', 'Entities'],
        textStyle: { color: labelColor, fontFamily: mono },
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: (timeseries.value.timestamps ?? []).map(ts => new Date(ts).toLocaleString('en-US', {
          month: 'short',
          day: 'numeric',
          hour: '2-digit'
        })),
        axisLine: { lineStyle: { color: axisLine } },
        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
      },
      yAxis: [
        {
          type: 'value',
          name: 'FPS',
          position: 'left',
          axisLine: { lineStyle: { color: axisLine } },
          splitLine: { lineStyle: { color: grid } },
          axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
        },
        {
          type: 'value',
          name: 'Entities',
          position: 'right',
          axisLine: { lineStyle: { color: axisLine } },
          splitLine: { show: false },
          axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
        }
      ],
      series: [
        {
          name: 'FPS',
          type: 'line',
          yAxisIndex: 0,
          data: timeseries.value.fps ?? [],
          smooth: true,
          lineStyle: { color: '#10b981', width: 2 },
          itemStyle: { color: '#10b981' }
        },
        {
          name: 'Entities',
          type: 'line',
          yAxisIndex: 1,
          data: timeseries.value.entity_count ?? [],
          smooth: true,
          lineStyle: { color: '#6366f1', width: 2 },
          itemStyle: { color: '#6366f1' }
        }
      ]
    })
  }
}

const downloadCSV = async () => {
  try {
    const hours = rangeToHours(timeRange.value)
    const response = await fetch(`/api/analytics/export?range=${hours}`, {
      headers: {
        'Authorization': `Bearer ${authStore.accessToken}`
      }
    })
    const blob = await response.blob()
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `server_stats_${timeRange.value}.csv`
    a.click()
    window.URL.revokeObjectURL(url)
  } catch {
    toast.error('Failed to download analytics export')
  }
}

watch(timeRange, () => {
  loadAnalytics()
})

onMounted(() => {
  loadAnalytics()
})
</script>

<template>
  <div class="analytics-view">
    <!-- Header -->
    <div class="analytics-view__header">
      <h1 class="analytics-view__title">Analytics</h1>
      <div class="analytics-view__controls">
        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
          Export CSV
        </Button>
        <Tabs
          :items="(['24h', '7d', '30d'] as const).map(v => ({ value: v, label: v }))"
          v-model="timeRange"
          variant="pill"
        />
      </div>
    </div>

    <!-- Loading state -->
    <div v-if="loading" class="analytics-view__loading">
      <span class="analytics-view__loading-text">Loading analytics...</span>
    </div>

    <template v-else-if="summary">
      <!-- Stat cards -->
      <div class="analytics-view__stats">
        <StatCard
          label="Peak players"
          :value="summary.peak_players ?? '—'"
          icon="users"
          :note="`Last ${timeRange}`"
        />
        <StatCard
          label="Avg players"
          :value="safeFixed(summary?.avg_players, 1)"
          icon="trending-up"
          :note="`Last ${timeRange}`"
        />
        <StatCard
          label="Uptime"
          :value="safeFixed(summary?.uptime_percentage, 1)"
          unit="%"
          icon="clock"
          :note="`Last ${timeRange}`"
        />
        <StatCard
          label="Unique players"
          :value="summary.unique_players ?? '—'"
          icon="bar-chart-3"
          note="Coming soon"
        />
      </div>

      <!-- Charts -->
      <div class="analytics-view__charts">
        <Panel title="Player count over time">
          <div ref="playerChart" class="analytics-view__chart-area"></div>
        </Panel>
        <Panel title="Server performance">
          <div ref="perfChart" class="analytics-view__chart-area"></div>
        </Panel>
      </div>

      <!-- Player Retention placeholder -->
      <Panel eyebrow="Coming soon" title="Player retention">
        <template #title-append>
          <Badge tone="neutral">Coming soon</Badge>
        </template>
        <div class="analytics-view__retention-grid">
          <div class="analytics-view__retention-cell">
            <p class="analytics-view__retention-label">New players</p>
            <p class="analytics-view__retention-value">—</p>
            <p class="analytics-view__retention-note">First-time visitors</p>
          </div>
          <div class="analytics-view__retention-cell">
            <p class="analytics-view__retention-label">Returning players</p>
            <p class="analytics-view__retention-value">—</p>
            <p class="analytics-view__retention-note">Seen more than once</p>
          </div>
          <div class="analytics-view__retention-cell">
            <p class="analytics-view__retention-label">Avg session duration</p>
            <p class="analytics-view__retention-value">—</p>
            <p class="analytics-view__retention-note">Per visit</p>
          </div>
        </div>
        <p class="analytics-view__retention-footer">
          Player retention analytics are coming soon.
        </p>
      </Panel>
    </template>
  </div>
</template>

<style scoped>
.analytics-view {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.analytics-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analytics-view__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.analytics-view__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-view__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.analytics-view__loading-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.analytics-view__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 1024px) {
  .analytics-view__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.analytics-view__charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 1024px) {
  .analytics-view__charts {
    grid-template-columns: 1fr 1fr;
  }
}

.analytics-view__chart-area {
  height: 256px;
}

.analytics-view__retention-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 1024px) {
  .analytics-view__retention-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.analytics-view__retention-cell {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-view__retention-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.analytics-view__retention-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.analytics-view__retention-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.analytics-view__retention-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}
</style>
