<template>
  <PageLayout>
    <Header title="Команда">
      <template #filters>
        <ProjectSelector />
        <div v-if="canManageMembers" class="team-actions desktop">
          <button 
            class="team-action-btn" 
            title="Пригласить участника"
            @click="openMemberPanel(null)"
          >
            <i data-lucide="plus"></i>
          </button>
        </div>
      </template>

      <template #mobile-filters>
        <ProjectSelector />
        <div v-if="canManageMembers" class="team-actions">
          <button 
            class="team-action-btn" 
            title="Пригласить участника"
            @click="openMemberPanel(null)"
          >
            <i data-lucide="plus"></i>
          </button>
        </div>
      </template>

      <template #stats>
        <div v-if="users.length > 0" class="header-stats">
          <div class="stat">
            <span class="stat-value">{{ users.length }}</span>
            <span class="stat-label">в команде</span>
          </div>
        </div>
      </template>
    </Header>

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

        <!-- Desktop: grid -->
        <div v-else-if="!isMobile" class="team-grid">
          <div 
            v-for="user in users" 
            :key="user.id_user" 
            class="team-card"
          >
            <div 
              class="card-avatar"
              :class="{ clickable: canEditUser(user) }"
              @click="canEditUser(user) && openMemberPanel(user)"
            >
              <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || user.username || ''">
              <span v-else class="avatar-placeholder">{{ (user.name || user.username || '?')[0] }}</span>
            </div>
            <div class="card-info">
              <h3 class="card-name">{{ user.name || user.username || 'Без имени' }}</h3>
              <div class="card-meta">
                <button 
                  v-if="canEditUser(user)" 
                  class="card-edit-btn"
                  title="Редактировать права"
                  @click="openMemberPanel(user)"
                >
                  <i data-lucide="pencil"></i>
                </button>
                <span v-if="user.is_owner" class="card-role owner">Создатель</span>
                <span v-else-if="user.is_admin" class="card-role admin">Админ</span>
                <span v-else class="card-role member">Участник</span>
                <button 
                  v-if="canRemoveUser(user)" 
                  class="card-remove-btn"
                  title="Удалить из проекта"
                  @click="confirmRemoveUser(user)"
                >
                  <i data-lucide="trash-2"></i>
                </button>
                <!-- Кнопка выхода - только для себя -->
                <button 
                  v-if="isCurrentUser(user)" 
                  class="card-leave-btn"
                  title="Выйти из проекта"
                  @click="confirmLeaveProject"
                >
                  <i data-lucide="log-out"></i>
                </button>
              </div>
              <a 
                v-if="user.telegram" 
                :href="`https://t.me/${user.telegram}`" 
                target="_blank" 
                class="card-telegram"
              >
                <i data-lucide="send"></i>
                @{{ user.telegram }}
              </a>
            </div>
          </div>
        </div>

        <!-- Mobile: swipe cards -->
        <template v-else>
          <div class="mobile-cards" ref="mobileCardsRef" @scroll="onCardsScroll">
            <div 
              v-for="user in users" 
              :key="user.id_user" 
              class="mobile-card"
            >
              <div 
                class="mobile-avatar"
                :class="{ clickable: canEditUser(user) }"
                @click="canEditUser(user) && openMemberPanel(user)"
              >
                <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || user.username || ''">
                <span v-else class="avatar-placeholder">{{ (user.name || user.username || '?')[0] }}</span>
              </div>
              
              <div class="mobile-info">
                <h2 class="mobile-name">{{ user.name || user.username || 'Без имени' }}</h2>
                <div class="mobile-role-row">
                  <button 
                    v-if="canEditUser(user)" 
                    class="mobile-edit-btn"
                    title="Редактировать права"
                    @click="openMemberPanel(user)"
                  >
                    <i data-lucide="pencil"></i>
                  </button>
                  <span v-if="user.is_owner" class="mobile-role owner">Создатель</span>
                  <span v-else-if="user.is_admin" class="mobile-role admin">Администратор</span>
                  <span v-else class="mobile-role member">Участник</span>
                  <button 
                    v-if="canRemoveUser(user)" 
                    class="mobile-remove-btn"
                    title="Удалить из проекта"
                    @click="confirmRemoveUser(user)"
                  >
                    <i data-lucide="trash-2"></i>
                  </button>
                  <!-- Кнопка выхода - только для себя -->
                  <button 
                    v-if="isCurrentUser(user)" 
                    class="mobile-leave-btn"
                    title="Выйти из проекта"
                    @click="confirmLeaveProject"
                  >
                    <i data-lucide="log-out"></i>
                  </button>
                </div>
                <a 
                  v-if="user.telegram" 
                  :href="`https://t.me/${user.telegram}`" 
                  target="_blank" 
                  class="mobile-telegram"
                >
                  <i data-lucide="send"></i>
                  Написать в Telegram
                </a>
              </div>
            </div>
          </div>
        </template>
      </main>

      <!-- Фиксированные индикаторы над навигацией -->
      <div v-if="isMobile && !loading && users.length > 0" class="mobile-team-footer">
        <div class="team-indicators">
          <button 
            v-for="(user, index) in users" 
            :key="user.id_user" 
            class="indicator-dot"
            :class="{ active: currentUserIndex === index }"
            @click="scrollToUser(index)"
          >
            <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || user.username || ''">
            <span v-else class="avatar-placeholder-small">{{ (user.name || user.username || '?')[0] }}</span>
          </button>
        </div>
      </div>

      <!-- Панель участника -->
      <MemberPanel 
        :show="showMemberPanel"
        :member="selectedMember"
        @close="closeMemberPanel"
        @saved="store.fetchUsers()"
      />

      <!-- Диалог подтверждения удаления -->
      <ConfirmDialog
        :show="showRemoveDialog"
        type="removeMember"
        :message="removeDialogMessage"
        :action="doRemoveMember"
        @confirm="showRemoveDialog = false"
        @cancel="showRemoveDialog = false"
      />

      <!-- Диалог подтверждения выхода из проекта -->
      <ConfirmDialog
        :show="showLeaveDialog"
        type="leaveProject"
        :action="doLeaveProject"
        @confirm="showLeaveDialog = false"
        @cancel="showLeaveDialog = false"
      />
  </PageLayout>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUpdated, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import PageLayout from '../components/PageLayout.vue'
import Header from '../components/Header.vue'
import Loader from '../components/ui/Loader.vue'
import ProjectSelector from '../components/ProjectSelector.vue'
import MemberPanel from '../components/MemberPanel.vue'
import ConfirmDialog from '../components/ConfirmDialog.vue'
import { getFullUrl, projectAccessApi } from '../api'
import { useMobile } from '../composables/useMobile'
import { useProjectsStore } from '../stores/projects'
import { useToast } from '../composables/useToast'

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

const { users, loading, currentProjectId } = storeToRefs(store)

// Права на управление участниками (приглашать/редактировать - только админ)
const canManageMembers = computed(() => store.isProjectAdmin)

// Права на удаление участников (remove_members или админ)
const canRemoveMembers = computed(() => store.isProjectAdmin || store.can('remove_members'))

// Можно ли редактировать пользователя (не себя и не владельца) - только админ
const canEditUser = (user) => {
  return canManageMembers.value && Number(user.id_user) !== store.currentUserId && !user.is_owner
}

// Можно ли удалить пользователя (только для не-админов с правом remove_members)
// Админы удаляют через панель редактирования
const canRemoveUser = (user) => {
  return !store.isProjectAdmin && store.can('remove_members') && Number(user.id_user) !== store.currentUserId && !user.is_owner
}

// Это текущий пользователь? (для кнопки выхода)
const isCurrentUser = (user) => {
  return Number(user.id_user) === store.currentUserId && !user.is_owner
}

// Диалог удаления участника
const showRemoveDialog = ref(false)
const removeDialogMessage = ref('')
const userToRemove = ref(null)

// Открыть диалог удаления
const confirmRemoveUser = (user) => {
  userToRemove.value = user
  removeDialogMessage.value = `<b>${user.name || user.username}</b> будет удалён из проекта.`
  showRemoveDialog.value = true
}

// Выполнить удаление
const doRemoveMember = async () => {
  if (!userToRemove.value) return
  
  const result = await projectAccessApi.removeMember(store.currentProjectId, userToRemove.value.id_user)
  if (result.success) {
    await store.fetchUsers()
  } else {
    throw new Error(result.errors?.member || 'Ошибка удаления')
  }
}

// Диалог выхода из проекта
const showLeaveDialog = ref(false)

const confirmLeaveProject = () => {
  showLeaveDialog.value = true
}

// Выполнить выход из проекта
const doLeaveProject = async () => {
  const projectIdToLeave = store.currentProjectId
  const result = await projectAccessApi.removeMember(projectIdToLeave, store.currentUserId)
  if (result.success) {
    toast.success('Вы вышли из проекта')
    
    // Очищаем текущий проект из localStorage чтобы избежать ошибок доступа
    localStorage.removeItem('currentProjectId')
    localStorage.removeItem('currentProjectName')
    store.currentProjectId = null
    
    // Принудительно перезагружаем список проектов
    await store.refreshProjects()
    
    // Проверяем есть ли другие проекты
    if (store.projects.length > 0) {
      // Переключаемся на первый доступный проект
      await store.selectProject(store.projects[0].id)
      router.push('/')
    } else {
      router.push('/no-projects')
    }
  } else {
    toast.error(result.errors?.member || 'Ошибка выхода из проекта')
    throw new Error(result.errors?.member || 'Ошибка выхода из проекта')
  }
}

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

// Инициализация store при прямом открытии страницы
onMounted(async () => {
  // Store уже мог быть инициализирован в роутере
  if (!store.initialized) {
    await store.init()
  }
  refreshIcons()
})

// Панель участника
const showMemberPanel = ref(false)
const selectedMember = ref(null)

const openMemberPanel = (member = null) => {
  selectedMember.value = member
  showMemberPanel.value = true
}

const closeMemberPanel = () => {
  showMemberPanel.value = false
  selectedMember.value = null
}

const mobileCardsRef = ref(null)
const currentUserIndex = ref(0)

const onCardsScroll = () => {
  if (!mobileCardsRef.value) return
  const container = mobileCardsRef.value
  const cardWidth = container.offsetWidth
  const scrollLeft = container.scrollLeft
  currentUserIndex.value = Math.round(scrollLeft / cardWidth)
}

const scrollToUser = (index, smooth = true) => {
  if (!mobileCardsRef.value) return
  const container = mobileCardsRef.value
  const cardWidth = container.offsetWidth
  container.scrollTo({
    left: index * cardWidth,
    behavior: smooth ? 'smooth' : 'instant'
  })
}

// При ресайзе — пересчитываем scroll позицию чтобы карточка не съезжала
const onResize = () => {
  if (mobileCardsRef.value && currentUserIndex.value > 0) {
    scrollToUser(currentUserIndex.value, false)
  }
}

// При смене режима mobile/desktop - сбрасываем и перерисовываем иконки
watch(isMobile, async (newVal) => {
  if (!newVal) {
    // Переключились на desktop — сбрасываем индекс
    currentUserIndex.value = 0
  }
  await nextTick()
  refreshIcons()
})

// Слушаем ресайз окна
onMounted(() => {
  window.addEventListener('resize', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})

// Загружаем участников при смене проекта
watch(currentProjectId, async (newId, oldId) => {
  if (newId && oldId && newId !== oldId) {
    await store.fetchUsers()
    refreshIcons()
  }
})

onUpdated(refreshIcons)
</script>

<style scoped>
/* Кнопки действий (как на главной) */
.team-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.team-actions.desktop {
  margin-left: -16px;
}

.team-action-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;
}

.team-action-btn:hover,
.team-action-btn:active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

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

.main {
  flex: 1;
  padding: 0 20px 20px;
  overflow-y: auto;
  min-height: 0;
}

.main::-webkit-scrollbar {
  width: 6px;
}

.main::-webkit-scrollbar-track {
  background: transparent;
}

.main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}


.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.team-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.2s ease;
}

.team-card:hover {
  border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
}

.card-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.card-avatar.clickable {
  cursor: pointer;
}

.card-avatar.clickable:hover {
  box-shadow: 0 0 0 3px var(--accent);
}

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

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-username {
  font-size: 14px;
  color: var(--text-muted);
}

.card-role {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 4px;
}

.card-role.owner {
  color: var(--accent);
  background: rgba(0, 212, 170, 0.15);
}

.card-role.admin {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}

.card-role.member {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.1);
}

.card-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.card-edit-btn:hover {
  color: var(--accent);
}

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

.card-remove-btn,
.card-leave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.card-remove-btn {
  color: #f87171;
}

.card-remove-btn:hover {
  color: #ef4444;
}

.card-leave-btn {
  color: var(--text-muted);
}

.card-leave-btn:hover {
  color: #f87171;
}

.card-remove-btn i,
.card-leave-btn i {
  width: 14px;
  height: 14px;
}

.card-telegram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(0, 136, 204, 0.15);
  color: #0088cc;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  width: fit-content;
}

.card-telegram:hover {
  background: rgba(0, 136, 204, 0.25);
}

.card-telegram i {
  width: 14px;
  height: 14px;
}

/* Mobile styles */
.main.mobile {
  padding: 0;
  overflow: hidden;
}

/* Mobile swipe cards */
.mobile-cards {
  width: 100%;
  /* Высота = экран - header(60px) - индикаторы(70px) - навигация(64px) - safe-area */
  height: calc(100dvh - 60px - 70px - 64px - var(--safe-area-bottom, 0px));
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-cards::-webkit-scrollbar {
  display: none;
}

.mobile-card {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: 0;
  gap: 20px;
  box-sizing: border-box;
}

.mobile-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 0 0 4px rgba(0, 212, 170, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.mobile-avatar.clickable {
  cursor: pointer;
}

.mobile-avatar.clickable:active {
  transform: scale(0.96);
}

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

.mobile-avatar .avatar-placeholder {
  font-size: 64px;
}

.mobile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mobile-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.mobile-username {
  font-size: 16px;
  color: var(--text-muted);
}

.mobile-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.mobile-role {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 20px;
}

.mobile-role.owner {
  color: var(--accent);
  background: rgba(0, 212, 170, 0.15);
}

.mobile-role.admin {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}

.mobile-role.member {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.1);
}

.mobile-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.mobile-edit-btn:active {
  color: var(--accent);
}

.mobile-edit-btn i {
  width: 16px;
  height: 16px;
}

.mobile-remove-btn,
.mobile-leave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.mobile-remove-btn {
  color: #f87171;
}

.mobile-remove-btn:active {
  color: #ef4444;
}

.mobile-leave-btn {
  color: var(--text-muted);
}

.mobile-leave-btn:active {
  color: #f87171;
}

.mobile-remove-btn i,
.mobile-leave-btn i {
  width: 16px;
  height: 16px;
}

.mobile-telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #0088cc 0%, #00a0dc 100%);
  color: white;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
  margin-top: 8px;
}

.mobile-telegram:active {
  transform: scale(0.96);
}

.mobile-telegram i {
  width: 20px;
  height: 20px;
}

/* Mobile team footer - фиксированный над навигацией */
.mobile-team-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(64px + var(--safe-area-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-body);
  z-index: 100;
}

.team-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.team-indicators .indicator-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.5;
}

.team-indicators .indicator-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-indicators .indicator-dot.active {
  border-color: var(--accent);
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
}

.avatar-placeholder-small {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}
</style>
