<template>
  <SlidePanel 
    :show="show" 
    @close="handleClose"
  >
    <template #header>
      <h2>{{ isEdit ? 'Редактирование участника' : 'Пригласить участника' }}</h2>
    </template>

    <template #default>
      <!-- Поиск пользователя (только для нового) -->
      <div v-if="!isEdit" class="form-section">
        <label class="form-label">Логин пользователя</label>
        <TextInput 
          v-model="form.username" 
          placeholder="Введите логин для поиска"
        />
        <p v-if="searching" class="form-hint">Поиск...</p>
        <p v-else-if="searchError" class="form-error">{{ searchError }}</p>
        <div v-else-if="foundUser" class="found-user" :class="{ 'is-me': isFoundUserMe, 'is-member': isFoundUserAlreadyMember, 'is-pending': isFoundUserPendingInvite }">
          <div class="found-user-avatar">
            <img v-if="foundUser.avatar_url" :src="getFullUrl(foundUser.avatar_url)" :alt="foundUser.name || foundUser.username">
            <span v-else class="avatar-placeholder">{{ (foundUser.name || foundUser.username || '?')[0] }}</span>
          </div>
          <div class="found-user-info">
            <span v-if="isFoundUserMe" class="found-user-me">Это же вы...</span>
            <span v-else-if="isFoundUserAlreadyMember" class="found-user-member">Участник уже в этом проекте</span>
            <span v-else-if="isFoundUserPendingInvite" class="found-user-pending">Пользователь уже приглашён, ожидается ответ</span>
            <template v-else>
              <span class="found-user-name">{{ foundUser.name || foundUser.username }}</span>
              <span v-if="foundUser.name" class="found-user-username">@{{ foundUser.username }}</span>
            </template>
          </div>
          <i v-if="!isFoundUserMe && !isFoundUserAlreadyMember && !isFoundUserPendingInvite" data-lucide="check-circle" class="found-user-check"></i>
          <i v-else-if="isFoundUserPendingInvite" data-lucide="clock" class="found-user-pending-icon"></i>
        </div>
      </div>

      <!-- Инфо о пользователе (для редактирования) -->
      <div v-else class="member-info">
        <div class="member-avatar">
          <img v-if="member?.avatar_url" :src="getFullUrl(member.avatar_url)" :alt="member.name || member.username">
          <span v-else class="avatar-placeholder">{{ (member?.name || member?.username || '?')[0] }}</span>
        </div>
        <div class="member-details">
          <h3>{{ member?.name || member?.username || 'Без имени' }}</h3>
          <span v-if="member?.is_owner" class="member-badge owner">Создатель</span>
          <span v-else-if="member?.is_admin" class="member-badge admin">Администратор</span>
        </div>
      </div>

      <!-- Админ чекбокс (не для владельцев) -->
      <div v-if="!member?.is_owner" class="form-section">
        <label class="admin-toggle" :class="{ active: form.is_admin }">
          <div class="admin-toggle-info">
            <i data-lucide="shield"></i>
            <div class="admin-toggle-text">
              <span class="admin-toggle-label">Администратор</span>
              <span class="admin-toggle-hint">Полный доступ ко всем функциям проекта</span>
            </div>
          </div>
          <div class="toggle-switch large" :class="{ on: form.is_admin }">
            <input type="checkbox" v-model="form.is_admin" @click.stop />
            <span class="toggle-slider"></span>
          </div>
        </label>
      </div>

      <!-- Права (скрыты для админов) -->
      <div v-if="!form.is_admin && !member?.is_owner" class="form-section permissions-section">
        <label class="form-label">Права доступа</label>
        
        <div v-for="group in permissionsGroups" :key="group.title" class="permission-group">
          <div class="permission-group-title">{{ group.title }}</div>
          <div class="permission-group-list">
            <label 
              v-for="perm in group.permissions" 
              :key="perm.key"
              v-show="!isPermissionHidden(perm)"
              class="permission-row"
              :class="{ 
                active: form.permissions[perm.key],
                sub: perm.hiddenBy
              }"
            >
              <i v-if="perm.hiddenBy" data-lucide="corner-down-right" class="permission-branch"></i>
              <span class="permission-name">{{ perm.label }}</span>
              <div class="toggle-switch" :class="{ on: form.permissions[perm.key] }">
                <input 
                  type="checkbox" 
                  v-model="form.permissions[perm.key]"
                  @click.stop
                />
                <span class="toggle-slider"></span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </template>

    <template #footer>
      <!-- Кнопка удаления (только для редактирования, не для владельцев) -->
      <button 
        v-if="isEdit && !member?.is_owner"
        class="btn-delete"
        @click="confirmRemove"
        :disabled="saving"
      >
        <i data-lucide="trash-2"></i>
        <span class="btn-delete-text">Удалить из проекта</span>
      </button>
      <span v-else></span>

      <ActionButtons
        :cancelText="'Отмена'"
        :saveText="isEdit ? 'Сохранить' : 'Пригласить'"
        :saveIcon="isEdit ? '' : 'send'"
        :loading="saving"
        :disabled="!canSave"
        @cancel="handleClose"
        @save="handleSave"
      />
    </template>
  </SlidePanel>

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

  <!-- Диалог несохранённых изменений -->
  <ConfirmDialog
    :show="showUnsavedDialog"
    type="unsavedChanges"
    @confirm="saveAndClose"
    @cancel="showUnsavedDialog = false"
    @discard="discardAndClose"
  />
</template>

<script setup>
import { ref, computed, watch, onMounted, onUpdated } from 'vue'
import SlidePanel from './ui/SlidePanel.vue'
import TextInput from './ui/TextInput.vue'
import ActionButtons from './ui/ActionButtons.vue'
import ConfirmDialog from './ConfirmDialog.vue'
import { getFullUrl, usersApi, projectAccessApi, projectInviteApi } from '../api'
import { useProjectsStore } from '../stores/projects'
import { useToast } from '../composables/useToast'

const toast = useToast()

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  member: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['close', 'saved'])

const store = useProjectsStore()

// Режим редактирования
const isEdit = computed(() => !!props.member)

// Форма
const form = ref({
  username: '',
  is_admin: false,
  permissions: {}
})

// Состояния
const saving = ref(false)
const searching = ref(false)
const searchError = ref('')
const foundUser = ref(null)
let searchTimeout = null

// Найденный пользователь — это я?
const isFoundUserMe = computed(() => 
  foundUser.value && Number(foundUser.value.id) === store.currentUserId
)

// Найденный пользователь уже участник проекта?
const isFoundUserAlreadyMember = computed(() => {
  if (!foundUser.value) return false
  const userId = Number(foundUser.value.id)
  return store.users.some(u => Number(u.id_user) === userId)
})

// Найденный пользователь уже приглашён (pending)?
const isFoundUserPendingInvite = ref(false)

// Поиск пользователя с debounce
const searchUser = async (username) => {
  if (!username || username.length < 2) {
    foundUser.value = null
    searchError.value = ''
    isFoundUserPendingInvite.value = false
    return
  }
  
  searching.value = true
  searchError.value = ''
  isFoundUserPendingInvite.value = false
  
  try {
    const result = await usersApi.search(username)
    if (result.success) {
      foundUser.value = result.data
      searchError.value = ''
      
      // Проверяем, нет ли уже pending-приглашения
      const userId = Number(result.data.id)
      if (userId !== store.currentUserId && !store.users.some(u => Number(u.id_user) === userId)) {
        const pendingCheck = await projectInviteApi.checkPending(store.currentProjectId, userId)
        isFoundUserPendingInvite.value = pendingCheck.success && pendingCheck.has_pending
      }
    } else {
      foundUser.value = null
      searchError.value = result.errors?.username || 'Пользователь не найден'
    }
  } catch (error) {
    foundUser.value = null
    searchError.value = 'Ошибка поиска'
  } finally {
    searching.value = false
  }
}

// Debounced поиск при вводе
watch(() => form.value.username, (newVal) => {
  if (searchTimeout) clearTimeout(searchTimeout)
  foundUser.value = null
  searchError.value = ''
  isFoundUserPendingInvite.value = false
  
  if (newVal && newVal.length >= 2) {
    searchTimeout = setTimeout(() => searchUser(newVal), 400)
  }
})

// Группы прав с зависимостями
// hiddenBy: если указанное право активно — это право скрывается и автоматически включается
// Порядок: включённые по умолчанию первыми
const permissionsGroups = [
  {
    title: 'Задачи',
    permissions: [
      { key: 'create_task', label: 'Создание задач' },
      { key: 'archive_task', label: 'Архивирование задач' },
      { key: 'edit_task', label: 'Редактирование любых задач' },
      { key: 'edit_own_task_only', label: 'Только назначенные на себя', hiddenBy: 'edit_task' },
      { key: 'move_task', label: 'Перемещение любых задач' },
      { key: 'move_own_task_only', label: 'Только назначенные на себя', hiddenBy: 'move_task' },
      { key: 'delete_task', label: 'Удаление задач' }
    ]
  },
  {
    title: 'Комментарии',
    permissions: [
      { key: 'create_comment', label: 'Создание в любых задачах' },
      { key: 'create_comment_own_task_only', label: 'Только в назначенных на себя', hiddenBy: 'create_comment' },
      { key: 'delete_all_comments', label: 'Удаление любых комментариев' },
      { key: 'delete_own_comments', label: 'Только своих комментариев', hiddenBy: 'delete_all_comments' }
    ]
  },
  {
    title: 'Файлы',
    permissions: [
      { key: 'upload_files', label: 'Загрузка файлов' },
      { key: 'upload_images', label: 'Загрузка картинок' }
    ]
  },
  {
    title: 'Колонки',
    permissions: [
      { key: 'create_column', label: 'Создание колонок' },
      { key: 'edit_column', label: 'Редактирование колонок' },
      { key: 'delete_column', label: 'Удаление колонок' }
    ]
  },
  {
    title: 'Управление',
    permissions: [
      { key: 'manage_departments', label: 'Управление отделами' },
      { key: 'remove_members', label: 'Удаление участников' }
    ]
  }
]

// Проверка, должно ли право быть скрыто
const isPermissionHidden = (perm) => {
  if (!perm.hiddenBy) return false
  return form.value.permissions[perm.hiddenBy] === true
}

// Права по умолчанию
const defaultPermissions = {
  create_task: true,
  edit_task: false,
  edit_own_task_only: true,
  delete_task: false,
  move_task: false,
  move_own_task_only: true,
  archive_task: true,
  create_column: false,
  edit_column: false,
  delete_column: false,
  manage_departments: false,
  remove_members: false,
  create_comment: false,
  create_comment_own_task_only: true,
  delete_own_comments: true,
  delete_all_comments: false,
  upload_files: true,
  upload_images: true
}

// Можно сохранять
const canSave = computed(() => {
  if (isEdit.value) {
    return !props.member?.is_owner
  }
  // Для приглашения нужен найденный пользователь (не я, не уже участник, не pending)
  return !!foundUser.value && !searching.value && !isFoundUserMe.value && !isFoundUserAlreadyMember.value && !isFoundUserPendingInvite.value
})

// Инициализация формы
const initForm = () => {
  if (props.member) {
    form.value = {
      username: '',
      is_admin: props.member.is_admin || false,
      permissions: { ...defaultPermissions, ...(props.member.permissions || {}) }
    }
  } else {
    form.value = {
      username: '',
      is_admin: false,
      permissions: { ...defaultPermissions }
    }
  }
  // Сохраняем начальное состояние для проверки изменений
  initialForm.value = JSON.parse(JSON.stringify(form.value))
  searchError.value = ''
  foundUser.value = null
  isFoundUserPendingInvite.value = false
}

// Следим за открытием панели
watch(() => props.show, (newVal) => {
  if (newVal) {
    initForm()
  }
})

// Начальное состояние для проверки изменений
const initialForm = ref(null)

// Проверка есть ли изменения
const hasChanges = computed(() => {
  if (!initialForm.value) return false
  if (!isEdit.value) {
    // Для нового — есть изменения если найден пользователь
    return !!foundUser.value
  }
  // Для редактирования — сравниваем с начальным состоянием
  return JSON.stringify(form.value) !== JSON.stringify(initialForm.value)
})

// Диалоги
const showRemoveDialog = ref(false)
const removeDialogMessage = ref('')
const showUnsavedDialog = ref(false)

// Закрытие
const handleClose = () => {
  if (hasChanges.value) {
    showUnsavedDialog.value = true
    return
  }
  emit('close')
}

// Сохранить и закрыть (из диалога unsavedChanges)
const saveAndClose = async () => {
  showUnsavedDialog.value = false
  await handleSave()
}

// Отменить изменения и закрыть
const discardAndClose = () => {
  showUnsavedDialog.value = false
  emit('close')
}

// Сохранение
const handleSave = async () => {
  saving.value = true
  
  try {
    const projectId = store.currentProjectId
    
    if (isEdit.value) {
      // Обновление прав участника
      const result = await projectAccessApi.updateMember(
        projectId,
        props.member.id_user,
        {
          is_admin: form.value.is_admin,
          permissions: form.value.permissions
        }
      )
      
      if (!result.success) {
        console.error('Error updating member:', result.errors)
        toast.error('Ошибка сохранения прав')
        return
      }
      
      toast.success('Права участника сохранены')
    } else {
      // Отправка приглашения новому участнику
      if (!foundUser.value) return
      
      const result = await projectInviteApi.send(
        projectId,
        foundUser.value.id,
        form.value.is_admin,
        form.value.permissions
      )
      
      if (!result.success) {
        searchError.value = result.errors?.invite || 'Ошибка при отправке приглашения'
        toast.error(searchError.value)
        return
      }
      
      toast.success(`Приглашение отправлено ${foundUser.value.name || foundUser.value.username}`)
    }
    
    emit('saved')
    emit('close')  // Закрываем напрямую, без проверки hasChanges
  } catch (error) {
    console.error('Error saving member:', error)
  } finally {
    saving.value = false
  }
}

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

// Выполнить удаление
const doRemoveMember = async () => {
  const result = await projectAccessApi.removeMember(
    store.currentProjectId,
    props.member.id_user
  )
  
  if (!result.success) {
    toast.error(result.errors?.member || 'Ошибка удаления')
    throw new Error(result.errors?.member || 'Ошибка удаления')
  }
  
  toast.success('Участник удалён из проекта')
  emit('saved')
  emit('close')
}

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

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

<style scoped>
.form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Уменьшаем отступ между первой секцией и админ-чекбоксом */
.form-section:first-child {
  margin-bottom: -8px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-error {
  color: #ef4444;
  font-size: 13px;
  margin: 0;
}

.form-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* Найденный пользователь */
.found-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 212, 170, 0.1);
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 10px;
  margin-top: 4px;
}

.found-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}

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

.found-user-avatar .avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.found-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.found-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.found-user-username {
  font-size: 12px;
  color: var(--text-muted);
}

.found-user-check {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Найденный пользователь — это я */
.found-user.is-me,
.found-user.is-member {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.found-user-me,
.found-user-member {
  font-size: 14px;
  color: #f87171;
}

/* Найденный пользователь уже приглашён */
.found-user.is-pending {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.found-user-pending {
  font-size: 14px;
  color: #fbbf24;
}

.found-user-pending-icon {
  width: 20px;
  height: 20px;
  color: #fbbf24;
  flex-shrink: 0;
}

/* Инфо участника */
.member-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  margin-bottom: -8px;
}

.member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-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: 24px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-details h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.member-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 4px;
  width: fit-content;
}

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

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

/* Тогл админа */
.admin-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-toggle.active {
  background: rgba(0, 212, 170, 0.1);
  border-color: rgba(0, 212, 170, 0.3);
}

.admin-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-toggle-info > i {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

.admin-toggle.active .admin-toggle-info > i {
  color: var(--accent);
}

.admin-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-toggle-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.admin-toggle-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.toggle-switch.large {
  width: 52px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: all 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.large .toggle-slider::before {
  width: 22px;
  height: 22px;
}

.toggle-switch.on .toggle-slider {
  background: var(--accent);
}

.toggle-switch.on .toggle-slider::before {
  left: calc(100% - 21px);
}

.toggle-switch.large.on .toggle-slider::before {
  left: calc(100% - 25px);
}

/* Группы прав */
.permissions-section {
  margin-top: 8px;
}

.permission-group {
  margin-bottom: 16px;
}

.permission-group:last-child {
  margin-bottom: 0;
}

.permission-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}

.permission-group-list {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  overflow: hidden;
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.permission-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.permission-row.active {
  background: rgba(255, 255, 255, 0.03);
}

.permission-row.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 3px;
  background: rgba(0, 212, 170, 0.5);
  z-index: 1;
}

.permission-row:not(.sub) + .permission-row:not(.sub) {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Первый элемент без отрицательного top */
.permission-row.active:first-child::before {
  top: 0;
}

.permission-row.sub {
  padding-left: 14px;
  font-size: 13px;
}

.permission-branch {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  opacity: 0.4;
  margin-right: 4px;
  flex-shrink: 0;
}

.permission-row.sub .permission-name {
  color: var(--text-muted);
}

.permission-name {
  font-size: 14px;
  color: var(--text-secondary);
  flex: 1;
}

.permission-row.active .permission-name {
  color: var(--text-secondary);
}

/* Кнопка удаления */
.btn-delete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #ef4444;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.2);
}

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

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

/* Мобильная версия: только иконка */
@media (max-width: 480px) {
  .btn-delete {
    padding: 10px;
  }
  
  .btn-delete-text {
    display: none;
  }
}
</style>
