<template>
  <div>
    <!-- Breadcrumb Header -->
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto">
        <h4 class="page-title">Hồ sơ cá nhân</h4>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
          <li class="breadcrumb-item active" aria-current="page">Hồ sơ cá nhân</li>
        </ol>
      </div>
    </div>

    <!-- Main Content Container -->
    <div class="row row-sm">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">

        <!-- Profile Info Card -->
        <div class="card shadow-none mb-4">
          <div class="card-header bg-primary text-white">
            <h6 class="card-title mb-0 text-white">
              <i class="fe fe-user me-2"></i>Thông tin cá nhân
            </h6>
          </div>
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <div class="avatar avatar-lg bg-primary text-white rounded-circle d-flex align-items-center justify-content-center">
                  <i class="fe fe-user" style="font-size: 2rem;"></i>
                </div>
              </div>
              <div class="col">
                <div v-if="userInfo">
                  <h5 class="mb-1">{{ userInfo.FullName || userInfo.UserName }}</h5>
                  <p class="text-muted mb-1">{{ userInfo.Email }}</p>
                  <p class="text-muted mb-0 small">
                    <i class="fe fe-calendar me-1"></i>
                    Tham gia từ {{ formatDate(userInfo.CreatedTime) }}
                  </p>
                </div>
                <div v-else class="d-flex align-items-center">
                  <span class="spinner-border spinner-border-sm me-2"></span>
                  Đang tải thông tin...
                </div>
              </div>
              <div class="col-auto">
                <button class="btn btn-outline-primary btn-sm" @click="editProfile">
                  <i class="fe fe-edit me-1"></i>Chỉnh sửa
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Tabs Navigation -->
        <div class="card shadow-none">
          <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="profileTabs" role="tablist">
              <li class="nav-item" role="presentation">
                <button 
                  class="nav-link active" 
                  id="bank-accounts-tab" 
                  data-bs-toggle="tab" 
                  data-bs-target="#bank-accounts" 
                  type="button" 
                  role="tab" 
                  aria-controls="bank-accounts" 
                  aria-selected="true"
                >
                  <i class="fe fe-credit-card me-2"></i>Tài khoản ngân hàng
                </button>
              </li>
              <li class="nav-item" role="presentation">
                <button 
                  class="nav-link" 
                  id="security-tab" 
                  data-bs-toggle="tab" 
                  data-bs-target="#security" 
                  type="button" 
                  role="tab" 
                  aria-controls="security" 
                  aria-selected="false"
                >
                  <i class="fe fe-shield me-2"></i>Bảo mật
                </button>
              </li>
              <li class="nav-item" role="presentation">
                <button 
                  class="nav-link" 
                  id="preferences-tab" 
                  data-bs-toggle="tab" 
                  data-bs-target="#preferences" 
                  type="button" 
                  role="tab" 
                  aria-controls="preferences" 
                  aria-selected="false"
                >
                  <i class="fe fe-settings me-2"></i>Tùy chọn
                </button>
              </li>
            </ul>
          </div>

          <div class="card-body">
            <div class="tab-content" id="profileTabsContent">
              <!-- Bank Accounts Tab -->
              <div 
                class="tab-pane fade show active" 
                id="bank-accounts" 
                role="tabpanel" 
                aria-labelledby="bank-accounts-tab"
              >
                <MyBankAccountList />
              </div>

              <!-- Security Tab -->
              <div 
                class="tab-pane fade" 
                id="security" 
                role="tabpanel" 
                aria-labelledby="security-tab"
              >
                <div class="text-center py-5">
                  <div class="text-muted mb-3">
                    <i class="fe fe-shield" style="font-size: 3rem;"></i>
                  </div>
                  <h6 class="text-muted">Tính năng bảo mật</h6>
                  <p class="text-muted">Đổi mật khẩu, cài đặt xác thực 2 lớp...</p>
                  <p class="text-muted small"><em>Sẽ được phát triển trong phiên bản tiếp theo</em></p>
                </div>
              </div>

              <!-- Preferences Tab -->
              <div 
                class="tab-pane fade" 
                id="preferences" 
                role="tabpanel" 
                aria-labelledby="preferences-tab"
              >
                <div class="text-center py-5">
                  <div class="text-muted mb-3">
                    <i class="fe fe-settings" style="font-size: 3rem;"></i>
                  </div>
                  <h6 class="text-muted">Tùy chọn cá nhân</h6>
                  <p class="text-muted">Ngôn ngữ, múi giờ, thông báo...</p>
                  <p class="text-muted small"><em>Sẽ được phát triển trong phiên bản tiếp theo</em></p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { useToast } from 'vue-toastification'
import MyBankAccountList from './components/MyBankAccountList.vue'

const userStore = useUserStore()
const toast = useToast()

// Data
const userInfo = ref(null)
const loading = ref(false)

// Methods
const loadUserInfo = async () => {
  try {
    loading.value = true
    // Get user info from store or API
    userInfo.value = userStore.user
    
    if (!userInfo.value) {
      // If not in store, try to get from API
      await userStore.getCurrentUser()
      userInfo.value = userStore.user
    }
  } catch (error) {
    console.error('Error loading user info:', error)
    toast.error('Có lỗi xảy ra khi tải thông tin người dùng')
  } finally {
    loading.value = false
  }
}

const editProfile = () => {
  toast.info('Tính năng chỉnh sửa hồ sơ sẽ được phát triển trong phiên bản tiếp theo')
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleDateString('vi-VN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  } catch {
    return '-'
  }
}

// Lifecycle
onMounted(async () => {
  await loadUserInfo()
})
</script>

<style scoped>
.avatar {
  width: 4rem;
  height: 4rem;
}

.nav-tabs .nav-link {
  color: #495057;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.75rem 1rem;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-tabs .nav-link.active {
  color: #0d6efd;
  background-color: transparent;
  border-color: #0d6efd;
  border-bottom-color: #0d6efd;
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.card-header.bg-primary {
  background-color: #0d6efd !important;
}

.text-white {
  color: white !important;
}

.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
</style>
