<template>
  <div class="my-bank-account-list">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="mb-0">Tài khoản ngân hàng của tôi</h5>
      <button 
        @click="handleCreate" 
        type="button" 
        class="btn btn-primary btn-sm"
      >
        <i class="fe fe-plus me-2"></i>Thêm tài khoản
      </button>
    </div>

    <!-- Loading -->
    <div v-if="loading" class="text-center py-4">
      <span class="spinner-border spinner-border-sm me-2"></span>
      Đang tải...
    </div>

    <!-- Empty State -->
    <div v-else-if="bankAccounts.length === 0" class="text-center py-4">
      <div class="text-muted mb-3">
        <i class="fe fe-credit-card" style="font-size: 3rem;"></i>
      </div>
      <h6 class="text-muted">Chưa có tài khoản ngân hàng nào</h6>
      <p class="text-muted small">Thêm tài khoản ngân hàng để sử dụng cho chi phí</p>
      <button @click="handleCreate" type="button" class="btn btn-outline-primary">
        <i class="fe fe-plus me-2"></i>Thêm tài khoản đầu tiên
      </button>
    </div>

    <!-- Bank Accounts List -->
    <div v-else class="row">
      <div 
        v-for="account in bankAccounts" 
        :key="account.Id" 
        class="col-md-6 col-lg-4 mb-3"
      >
        <div 
          class="card h-100"
          :class="{ 'border-primary': account.IsDefault }"
        >
          <div class="card-body">
            <!-- Default Badge -->
            <div v-if="account.IsDefault" class="d-flex justify-content-between align-items-start mb-2">
              <span class="badge bg-primary">Mặc định</span>
              <div class="dropdown">
                <button 
                  type="button" 
                  data-bs-toggle="dropdown"
                  class="btn btn-sm btn-light dropdown-toggle"
                  aria-expanded="false"
                >
                  <i class="fe fe-more-horizontal"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a @click="handleEdit(account)" class="dropdown-item" href="javascript:void(0);">
                      <i class="fe fe-edit me-2"></i>Chỉnh sửa
                    </a>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <a 
                      @click="handleDelete(account)" 
                      class="dropdown-item text-danger" 
                      href="javascript:void(0);"
                      :class="{ 'disabled': account.ExpenseCount > 0 }"
                    >
                      <i class="fe fe-trash me-2"></i>Xóa
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            
            <!-- Non-default accounts -->
            <div v-else class="d-flex justify-content-end mb-2">
              <div class="dropdown">
                <button 
                  type="button" 
                  data-bs-toggle="dropdown"
                  class="btn btn-sm btn-light dropdown-toggle"
                  aria-expanded="false"
                >
                  <i class="fe fe-more-horizontal"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a @click="handleEdit(account)" class="dropdown-item" href="javascript:void(0);">
                      <i class="fe fe-edit me-2"></i>Chỉnh sửa
                    </a>
                  </li>
                  <li>
                    <a @click="handleSetDefault(account)" class="dropdown-item" href="javascript:void(0);">
                      <i class="fe fe-star me-2"></i>Đặt làm mặc định
                    </a>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <a 
                      @click="handleDelete(account)" 
                      class="dropdown-item text-danger" 
                      href="javascript:void(0);"
                      :class="{ 'disabled': account.ExpenseCount > 0 }"
                    >
                      <i class="fe fe-trash me-2"></i>Xóa
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            <!-- Account Info -->
            <div class="mb-3">
              <h6 class="card-title mb-1">{{ account.AccountHolderName }}</h6>
              <p class="text-muted mb-1">{{ account.AccountNumber }}</p>
              <p class="text-primary mb-0 fw-bold">{{ account.BankName }}</p>
            </div>

            <!-- Note -->
            <div v-if="account.Note" class="mb-3">
              <small class="text-muted">{{ account.Note }}</small>
            </div>

            <!-- Footer Info -->
            <div class="d-flex justify-content-between align-items-center text-muted small">
              <span v-if="account.ExpenseCount > 0">
                <i class="fe fe-file-text me-1"></i>{{ account.ExpenseCount }} chi phí
              </span>
              <span v-else class="text-muted">Chưa có chi phí</span>
              <span>{{ formatDate(account.CreatedTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Create/Edit Modal -->
    <LadaDialog :visible="showFormModal">
      <template #header>
        <div class="modal-header">
          <h5 class="modal-title">
            {{ selectedAccountId === 0 ? 'Thêm tài khoản ngân hàng' : 'Cập nhật tài khoản ngân hàng' }}
          </h5>
          <button @click="closeFormModal" type="button" class="btn-close"></button>
        </div>
      </template>
      <template #body>
        <MyBankAccountForm 
          :id="selectedAccountId" 
          :is-submitting="isSubmitting" 
          @submit="handleSubmit" 
          @cancel="closeFormModal" 
        />
      </template>
    </LadaDialog>

    <!-- Delete Confirmation Modal -->
    <LadaDialog :visible="showDeleteModal">
      <template #header>
        <div class="modal-header">
          <h5 class="modal-title">Xác nhận xóa</h5>
          <button @click="closeDeleteModal" type="button" class="btn-close"></button>
        </div>
      </template>
      <template #body>
        <p>Bạn có chắc chắn muốn xóa tài khoản ngân hàng <strong>{{ accountToDelete?.AccountNumber }}</strong> của <strong>{{ accountToDelete?.AccountHolderName }}</strong>?</p>
        <p class="text-muted">Hành động này không thể hoàn tác.</p>
        <div v-if="accountToDelete?.ExpenseCount > 0" class="alert alert-warning">
          <i class="fe fe-alert-triangle me-2"></i>
          Tài khoản này đã được sử dụng trong {{ accountToDelete.ExpenseCount }} chi phí và không thể xóa.
        </div>
      </template>
      <template #footer>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="closeDeleteModal">
            Hủy
          </button>
          <button 
            type="button" 
            class="btn btn-danger" 
            @click="confirmDelete" 
            :disabled="isDeleting || (accountToDelete?.ExpenseCount > 0)"
          >
            <span v-if="isDeleting" class="spinner-border spinner-border-sm me-2"></span>
            Xóa
          </button>
        </div>
      </template>
    </LadaDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useToast } from 'vue-toastification'
import myBankAccountService from '@/services/myBankAccountService'
import { LadaDialog } from '@/components/index'
import MyBankAccountForm from './MyBankAccountForm.vue'

const toast = useToast()

// Data
const loading = ref(false)
const bankAccounts = reactive([])
const showFormModal = ref(false)
const showDeleteModal = ref(false)
const selectedAccountId = ref(0)
const accountToDelete = ref(null)
const isSubmitting = ref(false)
const isDeleting = ref(false)

// Methods
const loadBankAccounts = async () => {
  try {
    loading.value = true
    bankAccounts.splice(0, bankAccounts.length)
    
    const accounts = await myBankAccountService.getAll()
    if (accounts && accounts.length > 0) {
      accounts.forEach(account => {
        bankAccounts.push(account)
      })
    }
  } catch (error) {
    console.error('Error loading bank accounts:', error)
    toast.error('Có lỗi xảy ra khi tải danh sách tài khoản ngân hàng')
  } finally {
    loading.value = false
  }
}

const handleCreate = () => {
  selectedAccountId.value = 0
  showFormModal.value = true
}

const handleEdit = (account) => {
  selectedAccountId.value = account.Id
  showFormModal.value = true
}

const handleSetDefault = async (account) => {
  try {
    const updateData = {
      ...account,
      IsDefault: true
    }
    
    const result = await myBankAccountService.createOrUpdate(updateData)
    if (result && result.Result === 1) {
      toast.success(result.Message || 'Đặt tài khoản mặc định thành công')
      await loadBankAccounts()
    } else {
      toast.error(result?.Message || 'Có lỗi xảy ra khi đặt tài khoản mặc định')
    }
  } catch (error) {
    console.error('Error setting default account:', error)
    toast.error('Có lỗi xảy ra khi đặt tài khoản mặc định')
  }
}

const handleDelete = (account) => {
  accountToDelete.value = account
  showDeleteModal.value = true
}

const confirmDelete = async () => {
  if (!accountToDelete.value || accountToDelete.value.ExpenseCount > 0) return
  
  try {
    isDeleting.value = true
    const result = await myBankAccountService.delete(accountToDelete.value.Id)
    
    if (result && result.Result === 1) {
      toast.success(result.Message || 'Xóa tài khoản ngân hàng thành công')
      closeDeleteModal()
      await loadBankAccounts()
    } else {
      toast.error(result?.Message || 'Có lỗi xảy ra khi xóa tài khoản ngân hàng')
    }
  } catch (error) {
    console.error('Error deleting bank account:', error)
    toast.error('Có lỗi xảy ra khi xóa tài khoản ngân hàng')
  } finally {
    isDeleting.value = false
  }
}

const handleSubmit = async (data) => {
  try {
    isSubmitting.value = true
    const result = await myBankAccountService.createOrUpdate(data)
    
    if (result && result.Result === 1) {
      const message = selectedAccountId.value === 0 ? 'Thêm tài khoản ngân hàng thành công' : 'Cập nhật tài khoản ngân hàng thành công'
      toast.success(result.Message || message)
      closeFormModal()
      await loadBankAccounts()
    } else {
      toast.error(result?.Message || 'Có lỗi xảy ra khi lưu tài khoản ngân hàng')
    }
  } catch (error) {
    console.error('Error submitting bank account:', error)
    toast.error('Có lỗi xảy ra khi lưu tài khoản ngân hàng')
  } finally {
    isSubmitting.value = false
  }
}

const closeFormModal = () => {
  showFormModal.value = false
  selectedAccountId.value = 0
}

const closeDeleteModal = () => {
  showDeleteModal.value = false
  accountToDelete.value = null
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleDateString('vi-VN')
  } catch {
    return '-'
  }
}

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

<style scoped>
.my-bank-account-list {
  padding: 1rem 0;
}

.card {
  transition: all 0.2s ease-in-out;
  border: 1px solid #e9ecef;
}

.card:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card.border-primary {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}

.dropdown-toggle::after {
  display: none;
}

.badge {
  font-size: 0.75rem;
}

.text-primary {
  color: #0d6efd !important;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}
</style>
