<template>
  <div class="facebook-auth-container">
    <div class="auth-card">
      <div class="header">
        <h1>Facebook账号授权</h1>
        <p>请点击下方按钮完成Facebook账号授权</p>
      </div>

      <!-- 授权状态显示 -->
      <div v-if="authStatus" class="status-container">
        <div v-if="authStatus === 'success'" class="success-message">
          <div class="icon">✓</div>
          <h2>授权成功</h2>
          <p>您的Facebook账号已成功授权，可以关闭此页面。</p>
        </div>

        <div v-if="authStatus === 'error'" class="error-message">
          <div class="icon">✗</div>
          <h2>授权失败</h2>
          <p>{{ errorMessage || '授权过程中出现错误，请重试。' }}</p>
          <button @click="resetAuth" class="retry-btn">重新授权</button>
        </div>
      </div>

      <!-- 授权按钮 -->
      <div v-else class="auth-button-container">
        <button
          @click="startFacebookAuth"
          :disabled="loading"
          class="facebook-auth-btn"
        >
          <span v-if="loading">授权中...</span>
          <span v-else>
            <svg class="facebook-icon" viewBox="0 0 24 24">
              <path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
            </svg>
            使用Facebook授权
          </span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getFacebookAuthUrl } from '@/api/accountManagement'

export default {
  name: 'FacebookAuth',
  data() {
    return {
      loading: false,
      authStatus: null, // null, 'success', 'error'
      errorMessage: ''
    }
  },
  mounted() {
    // 检查URL参数，看是否是从Facebook回调过来的
    this.checkAuthCallback()
  },
  methods: {
    // 开始Facebook授权
    async startFacebookAuth() {
      this.loading = true
      try {
        const res = await getFacebookAuthUrl()
        console.log("Facebook授权URL响应：", JSON.stringify(res))

        if (res.status === 200) {
          // 跳转到Facebook授权页面
          window.location.href = res.result.data.authorizationUrl
        } else {
          this.showError(res.message || 'Facebook授权失败')
        }
      } catch (error) {
        console.error('Facebook授权异常', error)
        this.showError('获取Facebook授权链接失败')
      } finally {
        this.loading = false
      }
    },

    // 检查授权回调
    checkAuthCallback() {
      const urlParams = new URLSearchParams(window.location.search)
      const authStatus = urlParams.get('authStatus')
      const errorMessage = urlParams.get('errorMessage')
      
      // 直接从URL参数获取状态
      if (authStatus) {
        this.authStatus = authStatus
        
        // 如果有错误消息，设置错误消息
        if (errorMessage) {
          this.errorMessage = decodeURIComponent(errorMessage)
        }
        
        // 清理URL参数
        this.cleanUrl()
      } else {
        // 兼容原有的code/error参数检查（可选）
        const code = urlParams.get('code')
        const error = urlParams.get('error')
        
        if (code) {
          // 授权成功
          this.authStatus = 'success'
          this.cleanUrl()
        } else if (error) {
          // 授权失败
          this.authStatus = 'error'
          this.errorMessage = '用户拒绝授权或授权过程中出现错误'
          this.cleanUrl()
        }
      }
    },

    // 显示错误状态
    showError(message) {
      this.authStatus = 'error'
      this.errorMessage = message
    },

    // 重置授权状态
    resetAuth() {
      this.authStatus = null
      this.errorMessage = ''
      this.cleanUrl()
    },

    // 清理URL参数
    cleanUrl() {
      const url = new URL(window.location)
      url.search = ''
      window.history.replaceState({}, document.title, url.pathname)
    }
  }
}
</script>

<style scoped>
.facebook-auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.auth-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}

.header h1 {
  color: #333;
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 600;
}

.header p {
  color: #666;
  margin: 0 0 32px 0;
  font-size: 16px;
  line-height: 1.5;
}

.facebook-auth-btn {
  background: #1877F2;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  transition: all 0.2s ease;
}

.facebook-auth-btn:hover:not(:disabled) {
  background: #166fe5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
}

.facebook-auth-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.facebook-icon {
  width: 24px;
  height: 24px;
}

.status-container {
  padding: 20px 0;
}

.success-message, .error-message {
  padding: 32px 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.success-message {
  background: #f0f9ff;
  border: 2px solid #10b981;
}

.error-message {
  background: #fef2f2;
  border: 2px solid #ef4444;
}

.success-message .icon {
  color: #10b981;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
}

.error-message .icon {
  color: #ef4444;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
}

.success-message h2 {
  color: #10b981;
  margin: 0 0 12px 0;
  font-size: 24px;
}

.error-message h2 {
  color: #ef4444;
  margin: 0 0 12px 0;
  font-size: 24px;
}

.success-message p, .error-message p {
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.retry-btn {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.retry-btn:hover {
  background: #dc2626;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 24px;
    margin: 20px;
  }

  .header h1 {
    font-size: 24px;
  }

  .facebook-auth-btn {
    padding: 14px 24px;
    font-size: 15px;
  }
}
</style>
