<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import Select from '@/components/common/Select.vue'
import { adminAPI } from '@/api'
import type { OpsDashboardOverview, OpsWSStatus } from '@/api/admin/ops'
import { formatNumber } from '@/utils/format'

interface Props {
  overview?: OpsDashboardOverview | null
  wsStatus: OpsWSStatus
  wsReconnectInMs?: number | null
  wsHasData?: boolean
  realTimeQps: number
  realTimeTps: number
  platform: string
  groupId: number | null
  timeRange: string
  queryMode: string
  loading: boolean
  lastUpdated: Date | null
}

interface Emits {
  (e: 'update:platform', value: string): void
  (e: 'update:group', value: number | null): void
  (e: 'update:timeRange', value: string): void
  (e: 'update:queryMode', value: string): void
  (e: 'refresh'): void
  (e: 'openRequestDetails'): void
  (e: 'openErrorDetails', kind: 'request' | 'upstream'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const { t } = useI18n()

const groups = ref<Array<{ id: number; name: string; platform: string }>>([])

const platformOptions = computed(() => [
  { value: '', label: t('common.all') },
  { value: 'openai', label: 'OpenAI' },
  { value: 'anthropic', label: 'Anthropic' },
  { value: 'gemini', label: 'Gemini' },
  { value: 'antigravity', label: 'Antigravity' }
])

const timeRangeOptions = computed(() => [
  { value: '5m', label: '5m' },
  { value: '30m', label: '30m' },
  { value: '1h', label: '1h' },
  { value: '6h', label: '6h' },
  { value: '24h', label: '24h' }
])

const queryModeOptions = computed(() => [
  { value: 'auto', label: t('admin.ops.queryMode.auto') },
  { value: 'raw', label: t('admin.ops.queryMode.raw') },
  { value: 'preagg', label: t('admin.ops.queryMode.preagg') }
])

const groupOptions = computed(() => {
  const filtered = props.platform ? groups.value.filter((g) => g.platform === props.platform) : groups.value
  return [{ value: null, label: t('common.all') }, ...filtered.map((g) => ({ value: g.id, label: g.name }))]
})

watch(
  () => props.platform,
  (newPlatform) => {
    if (!newPlatform) return
    const currentGroup = groups.value.find((g) => g.id === props.groupId)
    if (currentGroup && currentGroup.platform !== newPlatform) {
      emit('update:group', null)
    }
  }
)

onMounted(async () => {
  try {
    const list = await adminAPI.groups.getAll()
    groups.value = list.map((g) => ({ id: g.id, name: g.name, platform: g.platform }))
  } catch (e) {
    console.error('[OpsDashboardHeader] Failed to load groups', e)
    groups.value = []
  }
})

function handlePlatformChange(val: string | number | boolean | null) {
  emit('update:platform', String(val || ''))
}

function handleGroupChange(val: string | number | boolean | null) {
  if (val === null || val === '' || typeof val === 'boolean') {
    emit('update:group', null)
    return
  }
  const id = typeof val === 'number' ? val : Number.parseInt(String(val), 10)
  emit('update:group', Number.isFinite(id) && id > 0 ? id : null)
}

function handleTimeRangeChange(val: string | number | boolean | null) {
  emit('update:timeRange', String(val || '1h'))
}

function handleQueryModeChange(val: string | number | boolean | null) {
  emit('update:queryMode', String(val || 'auto'))
}

const updatedAtLabel = computed(() => {
  if (!props.lastUpdated) return t('common.unknown')
  return props.lastUpdated.toLocaleTimeString()
})

const totalRequestsLabel = computed(() => {
  const n = props.overview?.request_count_total ?? 0
  return formatNumber(n)
})

const totalTokensLabel = computed(() => {
  const n = props.overview?.token_consumed ?? 0
  return formatNumber(n)
})

const qpsLabel = computed(() => {
  const useRealtime = props.wsStatus === 'connected' && !!props.wsHasData
  const n = useRealtime ? props.realTimeQps : props.overview?.qps?.current
  if (typeof n !== 'number') return '-'
  return n.toFixed(1)
})

const tpsLabel = computed(() => {
  const useRealtime = props.wsStatus === 'connected' && !!props.wsHasData
  const n = useRealtime ? props.realTimeTps : props.overview?.tps?.current
  if (typeof n !== 'number') return '-'
  return n.toFixed(1)
})

const qpsPeakLabel = computed(() => {
  const n = props.overview?.qps?.peak
  if (typeof n !== 'number') return '-'
  return n.toFixed(1)
})

const tpsPeakLabel = computed(() => {
  const n = props.overview?.tps?.peak
  if (typeof n !== 'number') return '-'
  return n.toFixed(1)
})

const slaLabel = computed(() => {
  const v = props.overview?.sla
  if (typeof v !== 'number') return '-'
  return `${(v * 100).toFixed(3)}%`
})

const errorRateLabel = computed(() => {
  const v = props.overview?.error_rate
  if (typeof v !== 'number') return '-'
  return `${(v * 100).toFixed(2)}%`
})

const upstreamErrorRateLabel = computed(() => {
  const v = props.overview?.upstream_error_rate
  if (typeof v !== 'number') return '-'
  return `${(v * 100).toFixed(2)}%`
})

const wsStatusLabel = computed(() => {
  switch (props.wsStatus) {
    case 'connected':
      return t('admin.ops.realtime.connected')
    case 'connecting':
      return t('admin.ops.realtime.connecting')
    case 'reconnecting':
      return t('admin.ops.realtime.reconnecting')
    case 'offline':
      return t('admin.ops.realtime.offline')
    case 'closed':
    default:
      return t('admin.ops.realtime.closed')
  }
})

const wsStatusDotClass = computed(() => {
  switch (props.wsStatus) {
    case 'connected':
      return 'bg-green-500'
    case 'reconnecting':
    case 'connecting':
      return 'bg-yellow-500'
    case 'offline':
      return 'bg-orange-500'
    case 'closed':
    default:
      return 'bg-gray-400'
  }
})

const wsReconnectHint = computed(() => {
  if (props.wsStatus !== 'reconnecting') return ''
  const delayMs = props.wsReconnectInMs ?? null
  if (typeof delayMs !== 'number' || !Number.isFinite(delayMs) || delayMs <= 0) return ''
  const sec = Math.max(1, Math.ceil(delayMs / 1000))
  return t('admin.ops.realtime.reconnectIn', { seconds: sec })
})
</script>

<template>
  <div class="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
    <!-- Top Toolbar (style aligned with docs/sub2api baseline) -->
    <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 pb-4 dark:border-dark-700">
      <div>
        <h1 class="flex items-center gap-2 text-xl font-black text-gray-900 dark:text-white">
          <svg class="h-6 w-6 text-blue-500" 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 01-2 2h-2a2 2 0 01-2-2z"
            />
          </svg>
          {{ t('admin.ops.title') }}
        </h1>
        <div class="mt-1 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
          <span class="flex items-center gap-1.5" :title="props.loading ? t('admin.ops.loadingText') : t('admin.ops.ready')">
            <span class="relative flex h-2 w-2">
              <span
                class="relative inline-flex h-2 w-2 rounded-full"
                :class="props.loading ? 'bg-gray-400' : 'bg-green-500'"
              ></span>
            </span>
            {{ props.loading ? t('admin.ops.loadingText') : t('admin.ops.ready') }}
          </span>
          <span>·</span>
          <span>{{ t('common.refresh') }}: {{ updatedAtLabel }}</span>
          <span>·</span>
          <span class="flex items-center gap-1.5">
            <span class="relative flex h-2 w-2">
              <span class="relative inline-flex h-2 w-2 rounded-full" :class="wsStatusDotClass"></span>
            </span>
            <span>{{ wsStatusLabel }}</span>
            <span v-if="wsReconnectHint" class="text-[11px] text-gray-400">({{ wsReconnectHint }})</span>
          </span>
        </div>
      </div>

      <div class="flex flex-wrap items-center gap-3">
        <Select
          :model-value="platform"
          :options="platformOptions"
          class="w-full sm:w-[140px]"
          @update:model-value="handlePlatformChange"
        />

        <Select
          :model-value="groupId"
          :options="groupOptions"
          class="w-full sm:w-[140px]"
          @update:model-value="handleGroupChange"
        />

        <div class="mx-1 hidden h-4 w-[1px] bg-gray-200 dark:bg-dark-700 sm:block"></div>

        <Select
          :model-value="timeRange"
          :options="timeRangeOptions"
          class="relative w-full sm:w-[150px]"
          @update:model-value="handleTimeRangeChange"
        />

        <Select
          :model-value="queryMode"
          :options="queryModeOptions"
          class="relative w-full sm:w-[170px]"
          @update:model-value="handleQueryModeChange"
        />

        <button
          type="button"
          class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-400 dark:hover:bg-dark-600"
          :disabled="loading"
          :title="t('common.refresh')"
          @click="emit('refresh')"
        >
          <svg class="h-4 w-4" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- Placeholder section to keep header height close to baseline.
         Will be progressively filled as Milestone 6 modules land. -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.requests') }}</div>
        <div class="mt-2 text-xl font-black text-gray-900 dark:text-white">
          {{ totalRequestsLabel }}
        </div>
        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
          {{ t('admin.ops.tokens') }}: {{ totalTokensLabel }}
        </div>
      </div>
      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">QPS / TPS</div>
        <div class="mt-2 flex items-end justify-between gap-3">
          <div class="text-xl font-black text-gray-900 dark:text-white">
            {{ qpsLabel }} <span class="text-xs font-semibold text-gray-400">/</span> {{ tpsLabel }}
          </div>
          <button
            type="button"
            class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
            :disabled="props.loading"
            :title="t('admin.ops.requestDetails.title')"
            @click="emit('openRequestDetails')"
          >
            {{ t('admin.ops.requestDetails.details') }}
          </button>
        </div>
        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
          {{ t('admin.ops.peak') }}: {{ qpsPeakLabel }} / {{ tpsPeakLabel }}
        </div>
      </div>
      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">SLA</div>
        <div class="mt-2 text-xl font-black text-gray-900 dark:text-white">
          {{ slaLabel }}
        </div>
        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
          {{ t('admin.ops.businessLimited') }}: {{ formatNumber(props.overview?.business_limited_count ?? 0) }}
        </div>
      </div>
      <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900/30">
        <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errors') }}</div>
        <div class="mt-2 flex items-center justify-between gap-3">
          <div class="text-xs font-semibold text-gray-700 dark:text-gray-200">
            {{ t('admin.ops.errorRate') }}: <span class="font-mono font-bold text-gray-900 dark:text-white">{{ errorRateLabel }}</span>
          </div>
          <div class="flex items-center gap-2">
            <button
              type="button"
              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
              :disabled="props.loading"
              @click="emit('openErrorDetails', 'request')"
            >
              {{ t('admin.ops.errorDetails.requestErrors') }}
            </button>
            <button
              type="button"
              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 dark:border-dark-700 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
              :disabled="props.loading"
              @click="emit('openErrorDetails', 'upstream')"
            >
              {{ t('admin.ops.errorDetails.upstreamErrors') }}
            </button>
          </div>
        </div>
        <div class="mt-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
          {{ t('admin.ops.upstreamRate') }}: <span class="font-mono font-bold text-gray-900 dark:text-white">{{ upstreamErrorRateLabel }}</span>
        </div>
        <div class="mt-1 text-xs font-medium text-gray-500 dark:text-gray-400">
          429: {{ formatNumber(props.overview?.upstream_429_count ?? 0) }} · 529:
          {{ formatNumber(props.overview?.upstream_529_count ?? 0) }}
        </div>
      </div>
    </div>
  </div>
</template>
