<script setup lang="ts">
import type { WorkbenchKpiCard } from '../homepage';

defineOptions({ name: 'WorkbenchKpi' });

interface Props {
  cards: WorkbenchKpiCard[];
}

defineProps<Props>();

function getTrendIcon(trend: WorkbenchKpiCard['trend']) {
  if (trend === 'up') return 'mdi:arrow-top-right-thin';
  if (trend === 'down') return 'mdi:arrow-bottom-right-thin';
  return 'mdi:minus';
}
</script>

<template>
  <section class="workbench-kpi">
    <article
      v-for="card in cards"
      :key="card.key"
      class="workbench-kpi__card"
      :class="`workbench-kpi__card--${card.tone}`"
    >
      <div class="workbench-kpi__card-header">
        <span class="workbench-kpi__card-label">{{ card.label }}</span>
        <span class="workbench-kpi__card-icon">
          <SvgIcon :icon="card.icon" />
        </span>
      </div>
      <strong class="workbench-kpi__card-value">{{ card.value }}</strong>
      <div class="workbench-kpi__card-trend" :class="`workbench-kpi__card-trend--${card.trend}`">
        <SvgIcon :icon="getTrendIcon(card.trend)" class="workbench-kpi__card-trend-icon" />
        <span>{{ card.trendText }}</span>
      </div>
      <p class="workbench-kpi__card-hint">{{ card.hint }}</p>
    </article>
  </section>
</template>

<style scoped>
.workbench-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.workbench-kpi__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  min-height: 148px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 96%));
  overflow: hidden;
}

.workbench-kpi__card::after {
  content: '';
  position: absolute;
  inset: -40% -30% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}

.workbench-kpi__card--sky::after {
  background: radial-gradient(circle, rgb(14 165 233 / 22%), transparent 70%);
}

.workbench-kpi__card--emerald::after {
  background: radial-gradient(circle, rgb(16 185 129 / 22%), transparent 70%);
}

.workbench-kpi__card--amber::after {
  background: radial-gradient(circle, rgb(245 158 11 / 22%), transparent 70%);
}

.workbench-kpi__card--rose::after {
  background: radial-gradient(circle, rgb(244 63 94 / 22%), transparent 70%);
}

.workbench-kpi__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.workbench-kpi__card-label {
  color: rgb(100 116 139 / 94%);
  font-size: 13px;
  font-weight: 600;
}

.workbench-kpi__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: rgb(255 255 255 / 88%);
  font-size: 18px;
}

.workbench-kpi__card--sky .workbench-kpi__card-icon {
  color: rgb(14 116 144 / 94%);
}

.workbench-kpi__card--emerald .workbench-kpi__card-icon {
  color: rgb(5 150 105 / 94%);
}

.workbench-kpi__card--amber .workbench-kpi__card-icon {
  color: rgb(217 119 6 / 94%);
}

.workbench-kpi__card--rose .workbench-kpi__card-icon {
  color: rgb(225 29 72 / 94%);
}

.workbench-kpi__card-value {
  position: relative;
  z-index: 1;
  color: rgb(15 23 42 / 98%);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.workbench-kpi__card-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.workbench-kpi__card-trend--up {
  color: rgb(5 150 105 / 96%);
  background-color: rgb(236 253 245 / 96%);
}

.workbench-kpi__card-trend--down {
  color: rgb(225 29 72 / 96%);
  background-color: rgb(255 241 242 / 96%);
}

.workbench-kpi__card-trend--flat {
  color: rgb(100 116 139 / 94%);
  background-color: rgb(241 245 249 / 96%);
}

.workbench-kpi__card-trend-icon {
  font-size: 14px;
}

.workbench-kpi__card-hint {
  margin: 0;
  position: relative;
  z-index: 1;
  color: rgb(100 116 139 / 88%);
  font-size: 12px;
  line-height: 1.6;
}

@media (width <= 1280px) {
  .workbench-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 600px) {
  .workbench-kpi {
    grid-template-columns: 1fr;
  }
}
</style>
