<template>
  <PageLayout>
    <Header title="Приглашения">
      <template #stats>
        <div v-if="invites.length > 0" class="header-stats">
          <div class="stat">
            <span class="stat-value">{{ invites.length }}</span>
            <span class="stat-label">{{ invitesLabel }}</span>
          </div>
        </div>
      </template>
    </Header>

    <main class="main" :class="{ mobile: isMobile }">
      <Loader v-if="loading" />

      <div v-else-if="invites.length === 0" class="empty-state" :class="{ mobile: isMobile }">
        <i data-lucide="inbox"></i>
        <p>Нет приглашений</p>
        <span>Когда вас пригласят в проект, приглашение появится здесь</span>
      </div>

      <div v-else class="invites-list" :class="{ mobile: isMobile }">
        <div 
          v-for="invite in invites" 
          :key="invite.id" 
          class="invite-card"
          :class="{ processing: processingId === invite.id, mobile: isMobile }"
        >
          <!-- Desktop версия -->
          <template v-if="!isMobile">
            <!-- Аватар пользователя -->
            <div class="user-avatar">
              <img v-if="invite.from_user.avatar_url" :src="getFullUrl(invite.from_user.avatar_url)" :alt="invite.from_user.name || invite.from_user.username">
              <span v-else class="avatar-initials">{{ (invite.from_user.name || invite.from_user.username || '?')[0] }}</span>
            </div>

            <!-- Основной контент -->
            <div class="card-main">
              <span class="user-name">{{ invite.from_user.name || invite.from_user.username }}</span>
              <span class="invite-separator">→</span>
              <div class="project-info">
                <i data-lucide="folder"></i>
                <span class="project-label">Проект:</span>
                <span class="project-name">{{ invite.project_name }}</span>
              </div>
              <span v-if="invite.is_admin" class="admin-badge">Админ</span>
            </div>

            <!-- Дата -->
            <div class="card-date">{{ formatDate(invite.created_at) }}</div>

            <!-- Кнопки -->
            <div class="card-actions">
              <button 
                class="btn-action btn-decline"
                :disabled="processingId === invite.id"
                @click.stop="declineInvite(invite)"
                title="Отклонить"
              >
                <i data-lucide="x"></i>
                Отклонить
              </button>
              <button 
                class="btn-action btn-accept"
                :disabled="processingId === invite.id"
                @click.stop="acceptInvite(invite)"
                title="Принять"
              >
                <i data-lucide="check"></i>
                Принять
              </button>
            </div>
          </template>

          <!-- Mobile версия -->
          <template v-else>
            <div class="card-row">
              <div class="user-avatar">
                <img v-if="invite.from_user.avatar_url" :src="getFullUrl(invite.from_user.avatar_url)" :alt="invite.from_user.name || invite.from_user.username">
                <span v-else class="avatar-initials">{{ (invite.from_user.name || invite.from_user.username || '?')[0] }}</span>
              </div>
              <div class="card-info">
                <div class="card-top">
                  <span class="user-name">{{ invite.from_user.name || invite.from_user.username }}</span>
                  <span v-if="invite.is_admin" class="admin-badge">Админ</span>
                </div>
                <div class="card-bottom">
                  <div class="project-info">
                    <i data-lucide="folder"></i>
                    <span class="project-label">Проект:</span>
                    <span class="project-name">{{ invite.project_name }}</span>
                  </div>
                  <span class="card-date">{{ formatDate(invite.created_at) }}</span>
                </div>
              </div>
            </div>

            <div class="card-actions">
              <button 
                class="btn-action btn-decline"
                :disabled="processingId === invite.id"
                @click.stop="declineInvite(invite)"
              >
                <i data-lucide="x"></i>
                Отклонить
              </button>
              <button 
                class="btn-action btn-accept"
                :disabled="processingId === invite.id"
                @click.stop="acceptInvite(invite)"
              >
                <i data-lucide="check"></i>
                Принять
              </button>
            </div>
          </template>
        </div>
      </div>
    </main>
  </PageLayout>
</template>

<script setup>
import { ref, computed, onMounted, onUpdated, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import PageLayout from '../components/PageLayout.vue'
import Header from '../components/Header.vue'
import Loader from '../components/ui/Loader.vue'
import { getFullUrl, projectInviteApi } from '../api'
import { useMobile } from '../composables/useMobile'
import { useDateFormat } from '../composables/useDateFormat'
import { useProjectsStore } from '../stores/projects'
import { useToast } from '../composables/useToast'

const router = useRouter()
const store = useProjectsStore()
const toast = useToast()
const { isMobile } = useMobile()
const { formatRelative } = useDateFormat()

const loading = ref(true)
const invites = ref([])
const processingId = ref(null)

// Склонение слова "приглашение"
const invitesLabel = computed(() => {
  const count = invites.value.length
  if (count === 1) return 'приглашение'
  if (count >= 2 && count <= 4) return 'приглашения'
  return 'приглашений'
})

// Форматирование даты
const formatDate = (dateStr) => {
  return formatRelative(dateStr)
}

// Загрузка приглашений
const loadInvites = async () => {
  loading.value = true
  try {
    const result = await projectInviteApi.getMyPending()
    if (result.success) {
      invites.value = result.data
      // Обновляем счётчик в store
      store.pendingInvitesCount = result.count
    }
  } catch (error) {
    console.error('Ошибка загрузки приглашений:', error)
  } finally {
    loading.value = false
  }
}

// Принять приглашение
const acceptInvite = async (invite) => {
  processingId.value = invite.id
  try {
    const result = await projectInviteApi.accept(invite.id)
    if (result.success) {
      toast.success(`Вы присоединились к проекту «${invite.project_name}»`)
      // Удаляем из списка
      invites.value = invites.value.filter(i => i.id !== invite.id)
      // Обновляем счётчик
      store.pendingInvitesCount = invites.value.length
      // Принудительно обновляем список проектов
      await store.refreshProjects()
      // Переходим к проекту
      await store.selectProject(result.project_id)
      router.push('/')
    } else {
      toast.error('Ошибка принятия приглашения')
    }
  } catch (error) {
    console.error('Ошибка принятия приглашения:', error)
    toast.error('Ошибка принятия приглашения')
  } finally {
    processingId.value = null
  }
}

// Отклонить приглашение
const declineInvite = async (invite) => {
  processingId.value = invite.id
  try {
    const result = await projectInviteApi.decline(invite.id)
    if (result.success) {
      toast.info('Приглашение отклонено')
      invites.value = invites.value.filter(i => i.id !== invite.id)
      // Обновляем счётчик
      store.pendingInvitesCount = invites.value.length
    } else {
      toast.error('Ошибка отклонения приглашения')
    }
  } catch (error) {
    console.error('Ошибка отклонения приглашения:', error)
    toast.error('Ошибка отклонения приглашения')
  } finally {
    processingId.value = null
  }
}

// Обновление иконок
const refreshIcons = () => {
  if (window.lucide) {
    window.lucide.createIcons()
  }
}

// Следим за сменой режима mobile/desktop
watch(isMobile, async () => {
  await nextTick()
  refreshIcons()
})

// Обновляем иконки когда данные загрузились
watch(loading, async (newVal, oldVal) => {
  if (oldVal === true && newVal === false) {
    await nextTick()
    refreshIcons()
  }
})

onMounted(async () => {
  loadInvites()
  await nextTick()
  refreshIcons()
})

onUpdated(refreshIcons)
</script>

<style scoped>
/* ========== MAIN ========== */
.main {
  overflow-y: auto;
}

.main.mobile {
  padding: 0 16px 16px;
}

/* ========== ПУСТОЕ СОСТОЯНИЕ ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state i {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}

.empty-state span {
  font-size: 13px;
}

.empty-state.mobile {
  padding: 40px 20px;
}

.empty-state.mobile i {
  width: 40px;
  height: 40px;
}

/* ========== СПИСОК ========== */
.invites-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 1200px;
  min-height: 200px;
}

.invites-list.mobile {
  max-width: none;
  gap: 8px;
}

/* ========== DESKTOP: КАРТОЧКА ========== */
.invite-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.invite-card:hover {
  background: rgba(255, 255, 255, 0.04);
}

.invite-card.processing {
  opacity: 0.5;
  pointer-events: none;
}

/* Аватар пользователя */
.user-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

/* Основной контент */
.card-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.invite-separator {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 12px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.project-info i {
  width: 12px;
  height: 12px;
}

.project-label,
.project-name {
  font-size: 13px;
}

.project-name {
  white-space: nowrap;
}

.admin-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 6px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-radius: 4px;
}

/* Дата */
.card-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
}

/* Кнопки */
.card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action i {
  width: 14px;
  height: 14px;
}

.btn-decline:hover {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.btn-accept {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

.btn-accept:hover {
  background: #00e6b8;
  border-color: #00e6b8;
}

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

/* ========== MOBILE: КАРТОЧКА ========== */
.invite-card.mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.invite-card.mobile .card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.invite-card.mobile .user-avatar {
  width: 40px;
  height: 40px;
}

.invite-card.mobile .avatar-initials {
  font-size: 15px;
}

.invite-card.mobile .card-info {
  flex: 1;
  min-width: 0;
}

.invite-card.mobile .card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.invite-card.mobile .user-name {
  font-size: 15px;
}

.invite-card.mobile .card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invite-card.mobile .project-label,
.invite-card.mobile .project-name {
  font-size: 12px;
}

.invite-card.mobile .project-info i {
  width: 11px;
  height: 11px;
}

.invite-card.mobile .card-date {
  font-size: 11px;
}

.invite-card.mobile .card-actions {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.invite-card.mobile .btn-action {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
}
</style>
