<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { respondJoinRequest } from '@/api/groups'
import type { JoinRequest } from '@/types'

const props = defineProps<JoinRequest>()
const emit = defineEmits<{ responded: [] }>()

const loading = ref(false)

async function handleApprove() {
  loading.value = true
  try {
    await respondJoinRequest(props.id, 'approved')
    ElMessage.success('已通过申请')
    emit('responded')
  } catch (error: any) {
    ElMessage.error(error.message || '操作失败')
  } finally {
    loading.value = false
  }
}

async function handleReject() {
  try {
    const { value } = await ElMessageBox.prompt('拒绝原因（可选）', '拒绝申请', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '输入拒绝原因...'
    })
    loading.value = true
    await respondJoinRequest(props.id, 'rejected', value || undefined)
    ElMessage.success('已拒绝申请')
    emit('responded')
  } catch {
    // 用户取消
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="join-request-card">
    <div class="request-info">
      <img
        :src="(props as any).expand?.user?.avatar || '/default-avatar.svg'"
        :alt="(props as any).expand?.user?.username"
        class="avatar"
      />
      <div class="info-text">
        <span class="username">{{ (props as any).expand?.user?.username || '用户' }}</span>
        <span class="group-name">申请加入「{{ (props as any).expand?.group?.name || '群组' }}」</span>
      </div>
    </div>
    <div class="request-actions">
      <button class="approve-btn" :disabled="loading" @click="handleApprove">同意</button>
      <button class="reject-btn" :disabled="loading" @click="handleReject">拒绝</button>
    </div>
  </div>
</template>

<style scoped>
.join-request-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--gg-bg);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
  gap: 12px;
}

.request-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gg-border);
  flex-shrink: 0;
}

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

.username {
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-text);
}

.group-name {
  font-size: 12px;
  color: var(--gg-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.approve-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: var(--gg-gradient-green);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.approve-btn:hover:not(:disabled) { opacity: 0.85; }
.approve-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.reject-btn {
  padding: 5px 14px;
  border: 1px solid var(--gg-border);
  border-radius: 6px;
  background: transparent;
  color: var(--gg-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.reject-btn:hover:not(:disabled) {
  border-color: var(--gg-danger);
  color: var(--gg-danger);
}

.reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }
</style>
