<template>
  <PageLayout>
      <!-- Шапка с заголовком, фильтрами и статистикой -->
      <Header title="Доска задач">
        <!-- Десктоп: фильтры в одну строку -->
        <template #filters>
          <DepartmentTags 
            v-model="activeDepartment"
            @project-change="onProjectChange"
            @create-project="openCreateProjectPanel"
            @edit-project="openEditProjectPanel"
          />
        </template>

        <!-- Мобильный: Проект + Отделы -->
        <template #mobile-filters>
          <ProjectSelector 
            @change="onProjectChange"
            @edit="openEditProjectPanel"
          />
          <!-- Кнопки управления проектами (мобильные) -->
          <div class="mobile-project-actions">
            <button 
              v-if="store.isProjectAdmin"
              class="mobile-project-btn"
              title="Настройки проекта"
              @click="openEditProjectPanel(store.currentProject)"
            >
              <i data-lucide="settings"></i>
            </button>
            <button 
              class="mobile-project-btn"
              title="Создать проект"
              @click="openCreateProjectPanel"
            >
              <i data-lucide="plus"></i>
            </button>
          </div>
          <MobileSelect
            v-model="activeDepartment"
            :options="departmentOptions"
            title="Фильтр по отделам"
            placeholder="Все отделы"
            icon="filter"
            compact
          />
        </template>

        <!-- Десктоп: статистика -->
        <template #stats>
          <div class="header-stats">
            <div class="stat">
              <span class="stat-value">{{ stats.total }}</span>
              <span class="stat-label">задач</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">{{ stats.inProgress }}</span>
              <span class="stat-label">в работе</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">{{ stats.done }}</span>
              <span class="stat-label">готово</span>
            </div>
          </div>
        </template>
      </Header>
      
      <!-- Доска с колонками и карточками -->
      <main class="main" :class="{ mobile: isMobile }">
        <Loader v-if="loading" />
        <Board 
          v-else
          ref="boardRef"
          :active-department="activeDepartment"
          :cards="cards"
          @stats-updated="stats = $event"
          @open-task="openTaskPanel"
          @create-task="openNewTaskPanel"
          @cards-moved="onCardsMoved"
        />
      </main>

    <!-- Модальные окна -->
    <template #modals>
      <TaskPanel 
        :show="panelOpen"
        :card="editingCard"
        :column-id="editingColumnId"
        :on-save="handleSaveTask"
        :on-archive="handleArchiveTask"
        @close="closePanel"
        @delete="handleDeleteTask"
      />
      
      <ProjectPanel
        :show="projectPanelOpen"
        :project="editingProject"
        @close="closeProjectPanel"
        @saved="onProjectSaved"
      />
    </template>
  </PageLayout>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import PageLayout from '../components/PageLayout.vue'
import Header from '../components/Header.vue'
import Board from '../components/Board.vue'
import TaskPanel from '../components/TaskPanel'
import ProjectPanel from '../components/ProjectPanel.vue'
import DepartmentTags from '../components/DepartmentTags.vue'
import ProjectSelector from '../components/ProjectSelector.vue'
import MobileSelect from '../components/ui/MobileSelect.vue'
import Loader from '../components/ui/Loader.vue'
import { useProjectsStore } from '../stores/projects'
import { cardsApi } from '../api'
import { useMobile } from '../composables/useMobile'
import { useDepartmentFilter } from '../composables/useDepartmentFilter'
import { useAutoRefresh } from '../composables/useAutoRefresh'

const { isMobile } = useMobile()

// ==================== STORE ====================
const store = useProjectsStore()

// ==================== ФИЛЬТР ПО ОТДЕЛАМ ====================
const { activeDepartment, departmentOptions, resetFilter } = useDepartmentFilter()

// ==================== КАРТОЧКИ ====================
const cards = ref([])
const loading = ref(true)

// Загрузка карточек текущего проекта (silent = тихое обновление без Loader)
const fetchCards = async (silent = false) => {
  if (!store.currentProjectId) {
    loading.value = false
    return
  }
  
  if (!silent) {
    loading.value = true
  }
  try {
    const result = await cardsApi.getAll(store.currentProjectId)
    if (result.success) cards.value = result.data
  } finally {
    if (!silent) {
      loading.value = false
    }
  }
}

// При смене проекта — перезагружаем карточки
const onProjectChange = async () => {
  resetFilter()
  loading.value = true
  await fetchCards()
}

// После перемещения карточки — тихо обновляем данные с сервера
const onCardsMoved = async () => {
  await fetchCards(true)
}

// ==================== СТАТИСТИКА ====================
const stats = ref({ total: 0, inProgress: 0, done: 0 })

// ==================== ПАНЕЛЬ РЕДАКТИРОВАНИЯ ====================
const boardRef = ref(null)
const panelOpen = ref(false)
const editingCard = ref(null)
const editingColumnId = ref(null)

const openTaskPanel = ({ card, columnId }) => {
  editingCard.value = card
  editingColumnId.value = columnId
  panelOpen.value = true
}

const openNewTaskPanel = (columnId) => {
  editingCard.value = null
  editingColumnId.value = columnId
  panelOpen.value = true
}

const closePanel = () => {
  panelOpen.value = false
  editingCard.value = null
  editingColumnId.value = null
}

const handleSaveTask = async (taskData) => {
  if (!taskData.id && store.currentProjectId) {
    taskData.id_project = store.currentProjectId
  }
  await boardRef.value?.saveTask(taskData, editingColumnId.value)
  closePanel()
}

const handleDeleteTask = async (cardId) => {
  await boardRef.value?.deleteTask(cardId, editingColumnId.value)
  closePanel()
}

const handleArchiveTask = async (cardId) => {
  await boardRef.value?.archiveTask(cardId)
  closePanel()
}

// ==================== ПАНЕЛЬ ПРОЕКТА ====================
const projectPanelOpen = ref(false)
const editingProject = ref(null)

const openCreateProjectPanel = () => {
  editingProject.value = null
  projectPanelOpen.value = true
}

const openEditProjectPanel = (project) => {
  editingProject.value = project
  projectPanelOpen.value = true
}

const closeProjectPanel = () => {
  projectPanelOpen.value = false
  editingProject.value = null
}

const onProjectSaved = async (projectId) => {
  // Перезагружаем данные если изменился текущий проект
  if (projectId === store.currentProjectId) {
    await store.fetchProjectData()
    await fetchCards()
  }
}

// ==================== АВТООБНОВЛЕНИЕ (POLLING) ====================
const { start: startCardsPolling, stop: stopCardsPolling } = useAutoRefresh('cards', async () => {
  // Не обновляем когда открыта модалка — это может прерывать клики
  if (panelOpen.value || projectPanelOpen.value) return
  console.log('[AutoRefresh] Обновление данных...')
  await fetchCards(true) // silent = true, без Loader
})

const { start: startInvitesPolling, stop: stopInvitesPolling } = useAutoRefresh('invites', async () => {
  await store.fetchPendingInvitesCount()
})

const startPolling = () => {
  startCardsPolling()
  startInvitesPolling()
}

const stopPolling = () => {
  stopCardsPolling()
  stopInvitesPolling()
}

// ==================== ИНИЦИАЛИЗАЦИЯ ====================
onMounted(async () => {
  // Store уже мог быть инициализирован при логине (prefetch) или в роутере
  await store.init()
  
  // Проверяем предзагруженные карточки
  const prefetchedCards = sessionStorage.getItem('prefetchedCards')
  if (prefetchedCards) {
    try {
      cards.value = JSON.parse(prefetchedCards)
      sessionStorage.removeItem('prefetchedCards')
      loading.value = false
    } catch (e) {
      await fetchCards()
    }
  } else {
    await fetchCards()
  }
  
  startPolling()
  
  if (window.lucide) window.lucide.createIcons()
})

onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped>
/* Специфичные стили для доски (горизонтальный скролл) */
.main {
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Мобильная доска — без padding, Board сам управляет layout */
.main.mobile {
  padding: 0;
}

/* Мобильные кнопки управления проектами */
.mobile-project-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.mobile-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.mobile-project-btn:active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

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