<script setup lang="ts">
import { computed } from 'vue'
import { CheckCircle2, CircleDashed, ExternalLink } from '@lucide/vue'
import { RouterLink } from 'vue-router'

import type { AdminSettingsCheckItem, AdminSettingsGateItem, AdminSettingsStatusSummary, AdminSettingsTone } from './adminSettingsTypes'
import Card from '../ui/Card.vue'

const props = defineProps<{
  checks: AdminSettingsCheckItem[]
  gates: AdminSettingsGateItem[]
  contentChecks: AdminSettingsCheckItem[]
  contentCompletion: number
}>()

const readyChecks = computed(() => props.checks.filter((check) => check.value).length)
const activeGates = computed(() => props.gates.filter((gate) => gate.state).length)
const incompleteContentCount = computed(() => props.contentChecks.length - props.contentCompletion)

const summaryItems = computed<AdminSettingsStatusSummary[]>(() => [
  {
    label: 'Systemchecks',
    value: `${readyChecks.value}/${props.checks.length}`,
    note: readyChecks.value === props.checks.length ? 'Alles grün.' : 'Mindestens ein Check braucht Aufmerksamkeit.',
    tone: readyChecks.value === props.checks.length ? 'good' : 'warning',
  },
  {
    label: 'Betriebszustände',
    value: `${activeGates.value}/${props.gates.length}`,
    note: 'Aktive Phasen und offene Moderationspunkte.',
    tone: activeGates.value > 0 ? 'neutral' : 'warning',
  },
  {
    label: 'Landingpage',
    value: `${props.contentCompletion}/${props.contentChecks.length}`,
    note: incompleteContentCount.value === 0 ? 'Public-Inhalte vollständig.' : `${incompleteContentCount.value} Bereiche fehlen.`,
    tone: incompleteContentCount.value === 0 ? 'good' : 'warning',
  },
])

function toneClasses(tone: AdminSettingsTone) {
  if (tone === 'good') {
    return {
      panel: 'border-emerald-100 bg-emerald-50/55',
      text: 'text-emerald-700',
      icon: 'bg-emerald-100 text-emerald-700',
    }
  }

  if (tone === 'warning') {
    return {
      panel: 'border-amber-100 bg-amber-50/65',
      text: 'text-amber-700',
      icon: 'bg-amber-100 text-amber-700',
    }
  }

  if (tone === 'danger') {
    return {
      panel: 'border-rose-100 bg-rose-50/65',
      text: 'text-rose-700',
      icon: 'bg-rose-100 text-rose-700',
    }
  }

  return {
    panel: 'border-violet-100 bg-violet-50/55',
    text: 'text-violet-700',
    icon: 'bg-violet-100 text-violet-700',
  }
}

function booleanTone(value: boolean): AdminSettingsTone {
  return value ? 'good' : 'warning'
}
</script>

<template>
  <Card class="overflow-hidden">
    <div class="border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-amber-50/50 p-6">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Betriebsübersicht</p>
          <h2 class="mt-1 text-xl font-bold text-slate-900">Alles Wichtige auf einen Blick</h2>
          <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500">
            Systemchecks, aktive Phasen und Landingpage-Readiness stehen jetzt zusammen, ohne dieselben Inhalte noch einmal editierbar zu duplizieren.
          </p>
        </div>
        <RouterLink to="/admin/content" class="inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-violet-600 px-5 text-sm font-semibold !text-white shadow-lg shadow-violet-500/20 transition hover:bg-violet-500" style="color:#fff;">
          <ExternalLink class="h-4 w-4 !text-white" />
          Content Hub
        </RouterLink>
      </div>
    </div>

    <div class="grid gap-3 p-5 md:grid-cols-3">
      <div
        v-for="item in summaryItems"
        :key="item.label"
        class="rounded-2xl border px-4 py-3"
        :class="toneClasses(item.tone).panel"
      >
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{{ item.label }}</p>
        <strong class="mt-1 block text-2xl" :class="toneClasses(item.tone).text">{{ item.value }}</strong>
        <p class="mt-1 text-xs leading-5 text-slate-600">{{ item.note }}</p>
      </div>
    </div>

    <div class="grid border-t border-violet-100 lg:grid-cols-3">
      <section class="border-b border-violet-100 p-5 lg:border-b-0 lg:border-r">
        <h3 class="text-sm font-bold text-slate-900">Systemchecks</h3>
        <div class="mt-4 space-y-3">
          <component
            :is="check.to ? RouterLink : 'div'"
            v-for="check in checks"
            :key="check.label"
            :to="check.to ?? undefined"
            class="flex items-start gap-3 rounded-2xl border px-4 py-3 transition"
            :class="[toneClasses(booleanTone(check.value)).panel, check.to ? 'hover:bg-violet-50/60' : '']"
          >
            <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="toneClasses(booleanTone(check.value)).icon">
              <component :is="check.icon" class="h-4.5 w-4.5" />
            </div>
            <div class="min-w-0">
              <p class="text-sm font-semibold text-slate-900">{{ check.label }}</p>
              <p class="mt-0.5 text-xs leading-5 text-slate-500">{{ check.note }}</p>
            </div>
          </component>
        </div>
      </section>

      <section class="border-b border-violet-100 p-5 lg:border-b-0 lg:border-r">
        <h3 class="text-sm font-bold text-slate-900">Betriebszustände</h3>
        <div class="mt-4 space-y-3">
          <RouterLink
            v-for="gate in gates"
            :key="gate.label"
            :to="gate.to"
            class="flex items-start gap-3 rounded-2xl border px-4 py-3 transition hover:bg-violet-50/60"
            :class="toneClasses(gate.state ? 'good' : 'neutral').panel"
          >
            <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="toneClasses(gate.state ? 'good' : 'neutral').icon">
              <CheckCircle2 v-if="gate.state" class="h-4.5 w-4.5" />
              <CircleDashed v-else class="h-4.5 w-4.5" />
            </div>
            <div class="min-w-0">
              <p class="text-sm font-semibold text-slate-900">{{ gate.label }}</p>
              <p class="mt-0.5 text-xs leading-5 text-slate-500">{{ gate.note }}</p>
            </div>
          </RouterLink>
        </div>
      </section>

      <section class="p-5">
        <h3 class="text-sm font-bold text-slate-900">Landingpage-Readiness</h3>
        <div class="mt-4 space-y-3">
          <RouterLink
            v-for="check in contentChecks"
            :key="check.label"
            to="/admin/content"
            class="flex items-start gap-3 rounded-2xl border px-4 py-3 transition hover:bg-violet-50/60"
            :class="toneClasses(booleanTone(check.value)).panel"
          >
            <div class="grid h-9 w-9 shrink-0 place-items-center rounded-xl" :class="toneClasses(booleanTone(check.value)).icon">
              <component :is="check.icon" class="h-4.5 w-4.5" />
            </div>
            <div class="min-w-0">
              <p class="text-sm font-semibold text-slate-900">{{ check.label }}</p>
              <p class="mt-0.5 text-xs leading-5 text-slate-500">{{ check.note }}</p>
            </div>
          </RouterLink>
        </div>
      </section>
    </div>
  </Card>
</template>
