<script setup lang="ts">
import type { DbStats, TableInfo } from '@/types/database'

defineProps<{
  stats: DbStats | null
  tables: TableInfo[]
}>()
</script>

<template>
  <div class="stats-tab">
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <ellipse cx="12" cy="5" rx="9" ry="3"/>
            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
          </svg>
        </div>
        <div class="stat-content">
          <span class="stat-title">Database Size</span>
          <span class="stat-value-lg">{{ stats?.size || '-' }}</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2"/>
            <path d="M3 9h18"/>
            <path d="M9 3v18"/>
          </svg>
        </div>
        <div class="stat-content">
          <span class="stat-title">Total Tables</span>
          <span class="stat-value-lg">{{ stats?.tables || 0 }}</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
          </svg>
        </div>
        <div class="stat-content">
          <span class="stat-title">Total Records</span>
          <span class="stat-value-lg">{{ stats?.totalRecords || 0 }}</span>
        </div>
      </div>
    </div>

    <div class="tables-breakdown">
      <h3>Tables Breakdown</h3>
      <div class="breakdown-list">
        <div v-for="table in tables" :key="table.name" class="breakdown-item">
          <span class="breakdown-name">{{ table.name }}</span>
          <div class="breakdown-bar">
            <div
              class="breakdown-fill"
              :style="{ width: `${(table.count / (stats?.totalRecords || 1)) * 100}%` }"
            ></div>
          </div>
          <span class="breakdown-count">{{ table.count }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-tab {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
  flex: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.stat-icon {
  padding: 0.75rem;
  background: var(--accent-muted);
  border-radius: 10px;
  color: var(--accent);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-title {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stat-value-lg {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tables-breakdown {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
}

.tables-breakdown h3 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.breakdown-name {
  width: 150px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.breakdown-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.3s ease;
}

.breakdown-count {
  width: 60px;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
