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

import Card from '../ui/Card.vue'

const props = defineProps<{
  readinessItems: Array<{ label: string; complete: boolean; note: string; to: string }>
  readinessScore: { done: number; total: number }
}>()

const readinessPercent = computed(() =>
  props.readinessScore.total === 0
    ? 0
    : Math.round((props.readinessScore.done / props.readinessScore.total) * 100),
)
</script>

<template>
  <Card class="p-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Readiness</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Show-Bereitschaft</h2>
        <p class="mt-2 text-sm leading-5 text-slate-500">
          {{ readinessScore.done }}/{{ readinessScore.total }} Checks bereit
        </p>
      </div>
      <div class="grid h-16 w-16 shrink-0 place-items-center rounded-full border border-violet-100 bg-violet-50 text-lg font-black text-violet-800">
        {{ readinessPercent }}%
      </div>
    </div>

    <div class="mt-5 h-3 rounded-full bg-violet-50">
      <div class="h-3 rounded-full bg-gradient-to-r from-emerald-300 to-violet-500" :style="{ width: `${readinessPercent}%` }"></div>
    </div>

    <div class="mt-5 space-y-3">
      <RouterLink
        v-for="item in readinessItems"
        :key="item.label"
        :to="item.to"
        class="block rounded-[20px] border p-4 transition hover:-translate-y-0.5 hover:bg-violet-50/60"
        :class="item.complete ? 'border-emerald-100 bg-emerald-50/50' : 'border-amber-100 bg-amber-50/50'"
      >
        <div class="flex items-start gap-3">
          <CheckCircle2 v-if="item.complete" class="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
          <CircleAlert v-else class="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
          <div class="min-w-0">
            <p class="font-semibold text-slate-800">{{ item.label }}</p>
            <p class="mt-1 text-sm leading-5 text-slate-600">{{ item.note }}</p>
          </div>
        </div>
      </RouterLink>
    </div>
  </Card>
</template>
