<template>
  <el-card class="kpi-card" :class="[`type-${type}`]" shadow="hover">
    <div class="kpi-header">
      <div class="kpi-title-wrapper">
        <div class="kpi-icon-wrapper" v-if="icon">
          <el-icon class="kpi-icon"><component :is="icon" /></el-icon>
        </div>
        <span class="kpi-title">{{ title }}</span>
      </div>
      <slot name="header-suffix"></slot>
    </div>
    <div class="kpi-content">
      <div v-if="loading" class="kpi-loading">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="h1" style="width: 60%" />
          </template>
        </el-skeleton>
      </div>
      <div v-else class="kpi-value-container">
        <span class="kpi-value">{{ value }}</span>
        <span v-if="unit" class="kpi-unit">{{ unit }}</span>
      </div>
      <div v-if="subtext" class="kpi-subtext">{{ subtext }}</div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  title: string;
  value: string | number;
  subtext?: string;
  loading?: boolean;
  icon?: any;
  unit?: string;
  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
});
</script>

<style scoped>
.kpi-card {
  border: 1px solid var(--ctms-border-color);
  transition: all 0.3s ease;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  --el-card-padding: 12px 16px; 
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.kpi-card.type-primary::before { background-color: var(--el-color-primary); }
.kpi-card.type-success::before { background-color: var(--el-color-success); }
.kpi-card.type-warning::before { background-color: var(--el-color-warning); }
.kpi-card.type-danger::before { background-color: var(--el-color-danger); }
.kpi-card.type-info::before { background-color: var(--el-color-info); }

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.kpi-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--ctms-bg-color-page);
  color: var(--ctms-text-secondary);
}

.type-primary .kpi-icon-wrapper { color: var(--el-color-primary); background-color: var(--el-color-primary-light-9); }
.type-success .kpi-icon-wrapper { color: var(--el-color-success); background-color: var(--el-color-success-light-9); }
.type-warning .kpi-icon-wrapper { color: var(--el-color-warning); background-color: var(--el-color-warning-light-9); }
.type-danger .kpi-icon-wrapper { color: var(--el-color-danger); background-color: var(--el-color-danger-light-9); }
.type-info .kpi-icon-wrapper { color: var(--el-color-info); background-color: var(--el-color-info-light-9); }

.kpi-title {
  color: var(--ctms-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.kpi-icon {
  font-size: 16px;
}

.kpi-content {
  display: flex;
  flex-direction: column;
}

.kpi-value-container {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ctms-text-main);
  line-height: 1.2;
  font-family: var(--el-font-family);
}

.kpi-unit {
  font-size: 14px;
  color: var(--ctms-text-secondary);
  font-weight: 500;
  margin-left: 2px;
}

.kpi-subtext {
  color: var(--ctms-text-secondary);
  font-size: 13px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ctms-border-color-lighter);
}

.kpi-loading {
  height: 38px;
  display: flex;
  align-items: center;
}
</style>
