<script setup lang="ts">
interface Props {
  type?: 'text' | 'card' | 'avatar' | 'table' | 'list'
  rows?: number
  width?: string
  height?: string
}

defineProps<Props>()
</script>

<template>
  <div class="skeleton-loader" :class="[`skeleton-${type}`]">
    <!-- Text skeleton -->
    <template v-if="type === 'text'">
      <div class="skeleton-line" :style="{ width, height: height || '16px' }"></div>
      <div class="skeleton-line" :style="{ width: '90%', height: height || '16px', marginTop: '8px' }"></div>
      <div class="skeleton-line" :style="{ width: '75%', height: height || '16px', marginTop: '8px' }"></div>
    </template>

    <!-- Card skeleton -->
    <template v-else-if="type === 'card'">
      <div class="skeleton-card">
        <div class="skeleton-header">
          <div class="skeleton-line" style="width: 80%; height: 24px"></div>
          <div class="skeleton-avatar"></div>
        </div>
        <div class="skeleton-body">
          <div class="skeleton-line" style="width: 100%; height: 16px"></div>
          <div class="skeleton-line" style="width: 90%; height: 16px; margin-top: 8px"></div>
        </div>
      </div>
    </template>

    <!-- Avatar skeleton -->
    <template v-else-if="type === 'avatar'">
      <div class="skeleton-avatar"></div>
    </template>

    <!-- Table skeleton -->
    <template v-else-if="type === 'table'">
      <div class="skeleton-table">
        <div class="skeleton-table-header">
          <div v-for="j in 6" :key="j" class="skeleton-header-cell"></div>
        </div>
        <div v-for="i in (rows || 6)" :key="i" class="skeleton-table-row">
          <div v-for="j in 6" :key="j" class="skeleton-cell"></div>
        </div>
      </div>
    </template>

    <!-- List skeleton -->
    <template v-else-if="type === 'list'">
      <div v-for="i in (rows || 3)" :key="i" class="skeleton-list-item">
        <div class="skeleton-avatar"></div>
        <div class="skeleton-list-content">
          <div class="skeleton-line" style="width: 60%; height: 16px"></div>
          <div class="skeleton-line" style="width: 40%; height: 12px; margin-top: 8px"></div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.skeleton-loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-2);
}

.skeleton-line, .skeleton-cell, .skeleton-header-cell, .skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-highlight) 37%,
    var(--skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--ks-radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.skeleton-card {
  padding: var(--ks-space-3);
  background: var(--skeleton-bg);
  border: 1px solid var(--skeleton-border);
  border-radius: var(--ks-radius-md);
}

.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ks-space-2);
}

.skeleton-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--skeleton-border);
  border-radius: var(--ks-radius-md);
  padding: 6px;
  background: var(--skeleton-bg);
}

:root {
  --skeleton-base: var(--ks-color-neutral-100, #f3f4f6);
  --skeleton-highlight: var(--ks-color-neutral-200, #e5e7eb);
  --skeleton-bg: #ffffff;
  --skeleton-border: var(--ks-color-neutral-200, #e5e7eb);
}

@media (prefers-color-scheme: dark) {
  :root {
    --skeleton-base: #2d3748;
    --skeleton-highlight: #4a5568;
    --skeleton-bg: #1a202c;
    --skeleton-border: #4a5568;
  }
}

.skeleton-table-header {
  display: grid;
  grid-template-columns: 80px 2fr 2fr 1fr 1fr 1.5fr;
  gap: 8px;
  height: 30px;
  align-items: center;
  border-bottom: 1px solid var(--ks-color-neutral-200);
  padding-bottom: 4px;
}

.skeleton-header-cell {
  height: 20px;
  border-radius: var(--ks-radius-sm);
}

.skeleton-table-row {
  display: grid;
  grid-template-columns: 80px 2fr 2fr 1fr 1fr 1.5fr;
  gap: 8px;
  height: 28px;
  align-items: center;
}

.skeleton-cell {
  height: 18px;
  border-radius: var(--ks-radius-sm);
}

.skeleton-list-item {
  display: flex;
  gap: var(--ks-space-3);
  margin-bottom: var(--ks-space-2);
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-2);
}
</style>
