<template>
  <div class="filters">
    <ProjectSelector 
      @change="$emit('project-change')" 
      @edit="$emit('edit-project', $event)"
    />
    <button 
      class="add-project-btn"
      title="Создать проект"
      @click="$emit('create-project')"
    >
      <i data-lucide="plus"></i>
    </button>
    <div class="filter-divider"></div>
    <button 
      class="filter-tag"
      :class="{ active: modelValue === null }"
      @click="$emit('update:modelValue', null)"
    >
      Все
    </button>
    <button 
      v-for="dept in store.departments" 
      :key="dept.id"
      class="filter-tag"
      :class="{ active: modelValue === dept.id }"
      @click="$emit('update:modelValue', modelValue === dept.id ? null : dept.id)"
    >
      {{ dept.name_departments }}
    </button>
  </div>
</template>

<script setup>
import { onMounted, onUpdated } from 'vue'
import ProjectSelector from './ProjectSelector.vue'
import { useProjectsStore } from '../stores/projects'

const store = useProjectsStore()

defineProps({
  modelValue: {
    type: Number,
    default: null
  }
})

defineEmits(['update:modelValue', 'project-change', 'create-project', 'edit-project'])

const refreshIcons = () => {
  if (window.lucide) window.lucide.createIcons()
}

onMounted(refreshIcons)
onUpdated(refreshIcons)
</script>

<style scoped>
.add-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  margin-left: 6px;
}

.add-project-btn:hover {
  color: var(--accent);
}

.add-project-btn i {
  width: 14px;
  height: 14px;
}
</style>
