<script setup lang="ts">
const props = defineProps<{
  modelValue: string
  rowCount: number
  totalCount: number
  selectedCount: number
  visibleColCount: number
  totalColCount: number
  copied: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  copyAll: []
}>()

function updateFilter(e: Event) {
  emit('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>

<template>
  <div class="filter-bar">
    <div class="filter-input-wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
      </svg>
      <input
        :value="modelValue"
        @input="updateFilter"
        type="text"
        placeholder="Filter results..."
        class="filter-input"
      />
      <button v-if="modelValue" class="clear-filter" @click="emit('update:modelValue', '')">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
        </svg>
      </button>
    </div>
    <div class="filter-actions">
      <span class="filter-count">
        <template v-if="selectedCount > 0">
          {{ selectedCount }} selected
        </template>
        <template v-else>
          {{ rowCount }} of {{ totalCount }} rows
        </template>
        <template v-if="visibleColCount < totalColCount">
          ({{ visibleColCount }}/{{ totalColCount }} cols)
        </template>
      </span>
      <button
        class="btn-copy-all"
        :class="{ copied }"
        @click="emit('copyAll')"
        :disabled="rowCount === 0 || visibleColCount === 0"
      >
        <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
        {{ copied ? 'Copied!' : (selectedCount > 0 ? 'Copy Selected' : 'Copy All') }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.filter-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
}

.filter-input-wrapper:focus-within {
  border-color: var(--accent);
}

.filter-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
}

.filter-input::placeholder {
  color: var(--text-muted);
}

.clear-filter {
  padding: 0.25rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.clear-filter:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

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

.btn-copy-all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-copy-all:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-copy-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-copy-all.copied {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
</style>
