<template>
  <div class="host-setting gradient-background-circles">
    <MobileHeader title="Host Setting" />

    <div class="content">
      <!-- My Agent 部分 -->
      <div class="section">
        <div class="section-header">
          <h3>My Agent</h3>
          <span class="agency-tag">🏢 Agency</span>
        </div>

        <div class="agent-card">
          <div class="agent-info">
            <div class="avatar">
              <span>{{ userInfo.name.charAt(0) }}</span>
            </div>
            <div class="agent-details">
              <h4>{{ userInfo.name }}</h4>
              <p>ID: {{ userInfo.id }}</p>
            </div>
            <button class="leave-btn" @click="leaveAgent">Leave</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue'
import {showError} from "@/utils/toast.js";

const router = useRouter()

// 用户信息
const userInfo = reactive({
  name: 'User1',
  id: '1234567890'
})

// 方法
const leaveAgent = () => {
  if (confirm('Are you sure you want to leave this agent?')) {
    showError('Leave agent request submitted')
    // 这里可以添加实际的离开代理商逻辑
  }
}
</script>

<style scoped>
.host-setting {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.content {
  padding: 16px;
  position: relative;
  z-index: 2;
}

.section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.agency-tag {
  background-color: #DBEAFE;
  color: #1E40AF;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

/* Agent Card */
.agent-card {
  background-color: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.agent-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #8B5CF6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-right: 12px;
}

.agent-details {
  flex: 1;
}

.agent-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.agent-details p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.leave-btn {
  background-color: #EF4444;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.leave-btn:active {
  background-color: #DC2626;
}
</style>
