<script setup lang="ts">
import { ref, onMounted, watch, nextTick, computed } from 'vue'
import { Map, TrendingUp, Award, Target, Download } from 'lucide-vue-next'
import * as echarts from 'echarts'
import type { ECharts } from 'echarts'
import { useApi } from '@/composables/useApi'
import type { MapAnalyticsSummary } from '@/types'
import { safeFixed } from '@/utils/formatters'

const api = useApi()

const timeRange = ref<'30d' | '90d' | 'all'>('90d')
const loading = ref(true)
const analytics = ref<MapAnalyticsSummary | null>(null)

const performanceChart = ref<HTMLElement | null>(null)
let performanceChartInstance: ECharts | null = null

const loadMapAnalytics = async () => {
  loading.value = true
  try {
    const response = await api.get<MapAnalyticsSummary>(`/analytics/maps?range=${timeRange.value}`)
    analytics.value = response
    await nextTick()
    renderCharts()
  } catch (error) {
    console.error('Failed to load map analytics:', error)
  } finally {
    loading.value = false
  }
}

const renderCharts = () => {
  if (!analytics.value || analytics.value.maps.length === 0) return

  // Map performance bar chart (avg players per map)
  if (performanceChart.value) {
    if (performanceChartInstance) {
      performanceChartInstance.dispose()
    }
    performanceChartInstance = echarts.init(performanceChart.value)

    const mapNames = analytics.value.maps.map(m => m.map_name)
    const avgPlayers = analytics.value.maps.map(m => m.avg_players)
    const peakPlayers = analytics.value.maps.map(m => m.peak_players)

    performanceChartInstance.setOption({
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#1a1a1a',
        borderColor: '#2a2a2a',
        textStyle: { color: '#e5e5e5' },
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['Avg Players', 'Peak Players'],
        textStyle: { color: '#a3a3a3' },
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: mapNames,
        axisLine: { lineStyle: { color: '#404040' } },
        axisLabel: { color: '#808080', rotate: 45 }
      },
      yAxis: {
        type: 'value',
        name: 'Players',
        axisLine: { lineStyle: { color: '#404040' } },
        splitLine: { lineStyle: { color: '#2a2a2a' } },
        axisLabel: { color: '#808080' }
      },
      series: [
        {
          name: 'Avg Players',
          type: 'bar',
          data: avgPlayers,
          itemStyle: { color: '#CE422B' },
          barGap: '10%'
        },
        {
          name: 'Peak Players',
          type: 'bar',
          data: peakPlayers,
          itemStyle: { color: '#10b981' },
          barGap: '10%'
        }
      ]
    })
  }
}

const sortedMaps = computed(() => {
  if (!analytics.value) return []
  return [...analytics.value.maps].sort((a, b) => b.avg_players - a.avg_players)
})

const downloadCSV = () => {
  if (!analytics.value) return

  const headers = ['Map Name', 'Seed', 'Times Used', 'Avg Players', 'Peak Players', 'Effectiveness Score (%)']
  const rows = analytics.value.maps.map(m => [
    m.map_name,
    m.seed ?? 'N/A',
    m.times_used,
    safeFixed(m.avg_players, 1),
    m.peak_players,
    safeFixed(m.effectiveness_score, 1)
  ])

  const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n')
  const blob = new Blob([csv], { type: 'text/csv' })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `map_analytics_${timeRange.value}.csv`
  a.click()
  window.URL.revokeObjectURL(url)
}

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

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

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <Map class="w-5 h-5 text-oxide-500" />
        <h1 class="text-2xl font-bold text-neutral-100">Map Analytics</h1>
      </div>
      <div class="flex items-center gap-3">
        <button
          @click="downloadCSV"
          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
        >
          <Download class="w-4 h-4" />
          Export CSV
        </button>
        <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
          <button
            v-for="opt in (['30d', '90d', 'all'] 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>
    </div>

    <!-- Loading state -->
    <div v-if="loading" class="flex items-center justify-center py-12">
      <div class="text-neutral-500">Loading map analytics...</div>
    </div>

    <template v-else-if="analytics">
      <!-- Summary cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
          <div class="flex items-center gap-2 mb-2">
            <Award class="w-4 h-4 text-oxide-400" />
            <p class="text-sm text-neutral-400">Best Performing Map</p>
          </div>
          <p class="text-xl font-bold text-neutral-100">
            {{ analytics.best_performing_map ?? 'No data' }}
          </p>
          <p class="text-xs text-neutral-600 mt-1" v-if="analytics.maps.length > 0">
            Avg {{ safeFixed(analytics?.maps?.[0]?.avg_players, 1) }} players
          </p>
        </div>

        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
          <div class="flex items-center gap-2 mb-2">
            <Target class="w-4 h-4 text-green-400" />
            <p class="text-sm text-neutral-400">Rotation Effectiveness</p>
          </div>
          <p class="text-xl font-bold text-neutral-100">
            {{ safeFixed(analytics?.rotation_effectiveness, 1) }}%
          </p>
          <p class="text-xs text-neutral-600 mt-1">Overall rotation health</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-blue-400" />
            <p class="text-sm text-neutral-400">Total Maps Tracked</p>
          </div>
          <p class="text-xl font-bold text-neutral-100">{{ analytics.maps.length }}</p>
          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
        </div>
      </div>

      <!-- Performance chart -->
      <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">
          Map Performance Comparison
        </h2>
        <div v-if="analytics.maps.length > 0" ref="performanceChart" class="h-80"></div>
        <div v-else class="h-80 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
          <p class="text-sm text-neutral-600">No map data available for this time range</p>
        </div>
      </div>

      <!-- Map performance table -->
      <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">
          Detailed Map Metrics
        </h2>
        <div v-if="sortedMaps.length > 0" class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead class="border-b border-neutral-800">
              <tr>
                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Map Name</th>
                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Seed</th>
                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Times Used</th>
                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Avg Players</th>
                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Peak Players</th>
                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Effectiveness</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="map in sortedMaps"
                :key="map.map_id"
                class="border-b border-neutral-800/50 hover:bg-neutral-800/30 transition-colors"
              >
                <td class="py-3 px-4 text-neutral-200 font-medium">{{ map.map_name }}</td>
                <td class="py-3 px-4 text-neutral-400">{{ map.seed ?? '—' }}</td>
                <td class="py-3 px-4 text-right text-neutral-300">{{ map.times_used }}</td>
                <td class="py-3 px-4 text-right text-neutral-300">{{ safeFixed(map.avg_players, 1) }}</td>
                <td class="py-3 px-4 text-right text-neutral-300">{{ map.peak_players }}</td>
                <td class="py-3 px-4 text-right">
                  <span
                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
                    :class="{
                      'bg-green-500/10 text-green-400': map.effectiveness_score >= 80,
                      'bg-yellow-500/10 text-yellow-400': map.effectiveness_score >= 60 && map.effectiveness_score < 80,
                      'bg-red-500/10 text-red-400': map.effectiveness_score < 60
                    }"
                  >
                    {{ safeFixed(map.effectiveness_score, 1) }}%
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="py-8 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
          <p class="text-sm text-neutral-600">No map data available</p>
        </div>
      </div>

      <!-- Insights section -->
      <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">
          Actionable Insights
        </h2>
        <div class="space-y-3">
          <div v-if="analytics.best_performing_map" class="flex items-start gap-3 p-3 bg-neutral-800/50 rounded-lg">
            <Award class="w-5 h-5 text-oxide-400 mt-0.5 flex-shrink-0" />
            <div>
              <p class="text-sm text-neutral-200 font-medium">
                Your best map is <span class="text-oxide-400">{{ analytics.best_performing_map }}</span>
              </p>
              <p class="text-xs text-neutral-500 mt-1">
                Consider featuring this map more frequently in your rotation for maximum player engagement.
              </p>
            </div>
          </div>

          <div
            v-if="analytics.rotation_effectiveness < 70"
            class="flex items-start gap-3 p-3 bg-yellow-500/5 border border-yellow-500/20 rounded-lg"
          >
            <Target class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
            <div>
              <p class="text-sm text-neutral-200 font-medium">Rotation effectiveness is below optimal</p>
              <p class="text-xs text-neutral-500 mt-1">
                Consider removing low-performing maps (effectiveness &lt; 60%) and testing new maps to improve overall rotation health.
              </p>
            </div>
          </div>

          <div
            v-else-if="analytics.rotation_effectiveness >= 80"
            class="flex items-start gap-3 p-3 bg-green-500/5 border border-green-500/20 rounded-lg"
          >
            <TrendingUp class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
            <div>
              <p class="text-sm text-neutral-200 font-medium">Excellent rotation effectiveness!</p>
              <p class="text-xs text-neutral-500 mt-1">
                Your current map rotation is driving strong player engagement. Keep monitoring for any changes.
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
