<script setup lang="ts">
import { AlertTriangle, CheckCircle2, Database, Loader2, RefreshCw } from '@lucide/vue'

import type { DatabaseHealthResponse } from '../../types/awards'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'

defineProps<{
  healthLoading: boolean
  healthError: string
  databaseHealth: DatabaseHealthResponse
  pendingMigrationCount: number
  healthLoadedLabel: string
  refreshDatabaseHealth: () => Promise<void> | void
}>()
</script>

<template>
  <Card class="p-5">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="flex items-start gap-3">
        <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl" :class="databaseHealth.canConnect ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
          <Database class="h-5 w-5" />
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Live-Systemstatus</p>
          <h2 class="mt-1 text-lg font-bold text-slate-900">Datenbank-Healthcheck</h2>
          <p class="mt-1 text-sm text-slate-500">Zuletzt geprüft: {{ healthLoadedLabel }}</p>
        </div>
      </div>
      <Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" :disabled="healthLoading" @click="refreshDatabaseHealth">
        <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': healthLoading }" />
        {{ healthLoading ? 'Prüft ...' : 'Aktualisieren' }}
      </Button>
    </div>

    <div class="mt-5 grid gap-3 md:grid-cols-3">
      <div class="rounded-2xl border border-violet-100 bg-white/80 px-4 py-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Provider</p>
        <strong class="mt-1 block text-sm text-slate-900">{{ databaseHealth.provider }}</strong>
      </div>
      <div class="rounded-2xl border border-violet-100 bg-white/80 px-4 py-3">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Connection</p>
        <strong class="mt-1 block text-sm text-slate-900">{{ databaseHealth.configuredConnection.source }}</strong>
      </div>
      <div class="rounded-2xl border px-4 py-3" :class="pendingMigrationCount > 0 ? 'border-amber-100 bg-amber-50/70' : 'border-emerald-100 bg-emerald-50/60'">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Migrationen</p>
        <div class="mt-1 flex items-center gap-2">
          <Loader2 v-if="healthLoading" class="h-4 w-4 animate-spin text-violet-600" />
          <AlertTriangle v-else-if="pendingMigrationCount > 0" class="h-4 w-4 text-amber-700" />
          <CheckCircle2 v-else class="h-4 w-4 text-emerald-700" />
          <strong class="block text-sm text-slate-900">{{ pendingMigrationCount > 0 ? `${pendingMigrationCount} offen` : 'Aktuell' }}</strong>
        </div>
      </div>
    </div>

    <div v-if="pendingMigrationCount > 0" class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
      <p class="font-semibold">Ausstehende Migrationen</p>
      <p class="mt-1">{{ databaseHealth.pendingMigrations.join(', ') }}</p>
    </div>
  </Card>
</template>
