<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { useRouter } from 'vue-router'
import { safeCurrency, safeLocaleString } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import StatCard from '@/components/ds/data/StatCard.vue'
import Icon from '@/components/ds/core/Icon.vue'

const api = useApi()
const router = useRouter()

interface PlatformStats {
  total_licenses: number
  active_licenses: number
  total_users: number
  module_mrr: number
  servers_online: number
  new_signups_this_week: number
}

const stats = ref<PlatformStats | null>(null)
const isLoading = ref(false)

const kpiCards = [
  { key: 'total_licenses' as const, label: 'Total licenses', icon: 'key', format: 'number' },
  { key: 'active_licenses' as const, label: 'Active licenses', icon: 'key', format: 'number' },
  { key: 'total_users' as const, label: 'Total users', icon: 'users', format: 'number' },
  { key: 'module_mrr' as const, label: 'Module MRR', icon: 'dollar-sign', format: 'currency' },
  { key: 'servers_online' as const, label: 'Servers online', icon: 'server', format: 'number' },
  { key: 'new_signups_this_week' as const, label: 'New signups this week', icon: 'users', format: 'number' },
]

const quickLinks = [
  { label: 'Licenses', description: 'Manage license keys and activations', icon: 'key', route: '/admin/licenses' },
  { label: 'Subscriptions', description: 'View module subscriptions and MRR', icon: 'credit-card', route: '/admin/subscriptions' },
  { label: 'Users', description: 'Manage platform users and permissions', icon: 'users', route: '/admin/users' },
  { label: 'Servers', description: 'Monitor connected game servers', icon: 'server-cog', route: '/admin/servers' },
]

function formatValue(value: number | undefined, format: string): string {
  if (format === 'currency') {
    return safeCurrency(value, '$', '—')
  }
  return safeLocaleString(value, '—')
}

async function fetchStats() {
  isLoading.value = true
  try {
    stats.value = await api.get<PlatformStats>('/admin/stats')
  } catch {
    // API not wired yet
  } finally {
    isLoading.value = false
  }
}

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

<template>
  <div class="pa-dash">
    <!-- Page head -->
    <div class="pa-dash__head">
      <div class="pa-dash__head-id">
        <div class="pa-dash__chip">
          <Icon name="layout-dashboard" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Platform admin</div>
          <h1 class="pa-dash__title">Dashboard</h1>
        </div>
      </div>
    </div>

    <!-- KPI row -->
    <div class="pa-dash__kpis">
      <StatCard
        v-for="card in kpiCards"
        :key="card.key"
        :icon="card.icon"
        :label="card.label"
        :value="isLoading ? '—' : (stats ? formatValue(stats[card.key], card.format) : '—')"
      />
    </div>

    <!-- Quick links -->
    <Panel title="Quick links">
      <div class="pa-dash__links">
        <button
          v-for="link in quickLinks"
          :key="link.route"
          class="pa-dash__link"
          @click="router.push(link.route)"
        >
          <div class="pa-dash__link-icon">
            <Icon :name="link.icon" :size="16" :stroke-width="2" />
          </div>
          <div class="pa-dash__link-body">
            <div class="pa-dash__link-label">{{ link.label }}</div>
            <div class="pa-dash__link-desc">{{ link.description }}</div>
          </div>
          <Icon name="chevron-right" :size="15" class="pa-dash__link-arrow" />
        </button>
      </div>
    </Panel>
  </div>
</template>

<style scoped>
.pa-dash { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.pa-dash__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pa-dash__head-id { display: flex; align-items: center; gap: 12px; }
.pa-dash__chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.pa-dash__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}

.pa-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

.pa-dash__links { display: flex; flex-direction: column; gap: 2px; }
.pa-dash__link {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  border-radius: var(--radius-md); background: transparent; border: 0;
  cursor: pointer; text-align: left; transition: var(--transition-colors);
  width: 100%;
}
.pa-dash__link:hover { background: var(--surface-hover); }
.pa-dash__link-icon {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-text); background: var(--accent-soft);
}
.pa-dash__link-body { flex: 1; min-width: 0; }
.pa-dash__link-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.pa-dash__link-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.pa-dash__link-arrow { color: var(--text-muted); flex: none; }

@media (max-width: 768px) {
  .pa-dash__kpis { grid-template-columns: repeat(2, 1fr); }
}
</style>
