<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import type { BranchInfo } from '@/types/git'

const props = defineProps<{
  branches: BranchInfo[]
  selected: string
  label?: string
}>()

const emit = defineEmits<{
  select: [branch: string]
}>()

const isOpen = ref(false)
const search = ref('')
const dropdownRef = ref<HTMLElement | null>(null)

const filteredBranches = computed(() => {
  const q = search.value.toLowerCase()
  return props.branches.filter(b => b.name.toLowerCase().includes(q))
})

const localBranches = computed(() => filteredBranches.value.filter(b => !b.isRemote))
const remoteBranches = computed(() => filteredBranches.value.filter(b => b.isRemote))

function selectBranch(name: string) {
  emit('select', name)
  isOpen.value = false
  search.value = ''
}

function handleClickOutside(e: MouseEvent) {
  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
    isOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<template>
  <div ref="dropdownRef" class="branch-selector">
    <label v-if="label" class="selector-label">{{ label }}</label>
    <button class="selector-button" @click="isOpen = !isOpen">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="6" y1="3" x2="6" y2="15" />
        <circle cx="18" cy="6" r="3" />
        <circle cx="6" cy="18" r="3" />
        <path d="M18 9a9 9 0 0 1-9 9" />
      </svg>
      <span class="selected-branch">{{ selected || 'Select branch' }}</span>
      <svg class="chevron" :class="{ open: isOpen }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </button>

    <div v-if="isOpen" class="dropdown">
      <input
        v-model="search"
        type="text"
        class="search-input"
        placeholder="Filter branches..."
        @click.stop
      />

      <div class="branch-list">
        <div v-if="localBranches.length > 0" class="branch-group">
          <div class="group-header">Local</div>
          <div
            v-for="branch in localBranches"
            :key="branch.name"
            :class="['branch-item', { current: branch.isCurrent, selected: branch.name === selected }]"
            @click="selectBranch(branch.name)"
          >
            <span v-if="branch.isCurrent" class="current-marker">●</span>
            {{ branch.name }}
          </div>
        </div>

        <div v-if="remoteBranches.length > 0" class="branch-group">
          <div class="group-header">Remote</div>
          <div
            v-for="branch in remoteBranches"
            :key="branch.name"
            :class="['branch-item', { selected: branch.name === selected }]"
            @click="selectBranch(branch.name)"
          >
            {{ branch.name }}
          </div>
        </div>

        <div v-if="filteredBranches.length === 0" class="no-results">
          No branches found
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.branch-selector {
  position: relative;
}

.selector-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.selector-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 180px;
  transition: all 0.15s;
}

.selector-button:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.selected-branch {
  flex: 1;
  text-align: left;
  font-size: 13px;
}

.chevron {
  transition: transform 0.15s;
}

.chevron.open {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 100;
  overflow: hidden;
}

.search-input {
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

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

.branch-list {
  max-height: 300px;
  overflow-y: auto;
}

.branch-group {
  padding: 0.5rem 0;
}

.group-header {
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.branch-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.branch-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.branch-item.selected {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
}

.branch-item.current {
  color: var(--text-primary);
}

.current-marker {
  color: #22c55e;
  font-size: 8px;
}

.no-results {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 768px) {
  .selector-button {
    min-width: 100%;
    padding: 0.5rem;
  }

  .selected-branch {
    font-size: 12px;
  }

  .dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
  }

  .branch-list {
    max-height: 50vh;
  }

  .branch-item {
    padding: 0.75rem 1rem;
  }
}
</style>
