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

defineProps<{
  tableName: string
  schema: TableSchema[]
  hiddenColumns: Set<string>
}>()

const emit = defineEmits<{
  toggleColumn: [column: string]
}>()
</script>

<template>
  <div class="schema-info">
    <div class="schema-header">
      <h3>{{ tableName }}</h3>
      <span class="schema-hint">Click columns to show/hide</span>
    </div>
    <div class="schema-columns">
      <span
        v-for="col in schema"
        :key="col.name"
        class="schema-col clickable"
        :class="{ pk: col.pk, hidden: hiddenColumns.has(col.name) }"
        @click="emit('toggleColumn', col.name)"
        :title="hiddenColumns.has(col.name) ? 'Click to show' : 'Click to hide'"
      >
        <svg v-if="!hiddenColumns.has(col.name)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
          <line x1="1" y1="1" x2="23" y2="23"/>
        </svg>
        {{ col.name }}
        <small>{{ col.type }}</small>
      </span>
    </div>
  </div>
</template>

<style scoped>
.schema-info {
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.schema-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.schema-info h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.schema-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.schema-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schema-col {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.schema-col.clickable {
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.schema-col.clickable:hover {
  background: var(--bg-hover);
}

.schema-col.hidden {
  opacity: 0.5;
  text-decoration: line-through;
}

.schema-col.pk {
  background: var(--accent-muted);
  color: var(--accent);
}

.schema-col.pk.hidden {
  background: var(--bg-tertiary);
}

.schema-col small {
  color: var(--text-muted);
  font-size: 0.7rem;
}
</style>
