<template>
  <div>
    <!-- Header -->
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto">
        <h4 class="page-title">Chi tiết tài khoản ngân hàng</h4>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0);">Tài chính</a></li>
          <li class="breadcrumb-item">
            <router-link :to="{ name: 'bank-accounts' }">Quản lý tài khoản ngân hàng</router-link>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Chi tiết</li>
        </ol>
      </div>
      <div class="d-flex gap-2">
        <router-link :to="{ name: 'bank-accounts' }" class="btn btn-secondary btn-sm">
          <i class="fas fa-arrow-left me-1"></i>
          Quay lại
        </router-link>
        <router-link v-if="accountData" :to="{ name: 'bank-account-edit', params: { id: accountData.Id } }"
          class="btn btn-warning btn-sm">
          <i class="fas fa-edit me-1"></i>
          Chỉnh sửa
        </router-link>
      </div>
    </div>

    <div class="row row-sm">
      <!-- Loading -->
      <div v-if="loading" class="col-sm-12 text-center py-5">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Đang tải...</span>
        </div>
      </div>

      <!-- Account Details -->
      <div v-else-if="accountData" class="col-sm-12">
        <!-- Account Info Card -->
        <div class="card mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Thông tin tài khoản</h5>
            <span :class="`badge bg-${getStatusColor(accountData.Status)} fs-6`">
              {{ getStatusName(accountData.Status) }}
            </span>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-6">
                <table class="table table-borderless">
                  <tbody>
                    <tr>
                      <td class="fw-bold" width="40%">Tên tài khoản:</td>
                      <td>{{ accountData.AccountName }}</td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Số tài khoản:</td>
                      <td><code>{{ accountData.AccountNumber }}</code></td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Ngân hàng:</td>
                      <td>
                        <div>{{ accountData.BankName }}</div>
                        <small class="text-muted">{{ getBankCode(accountData.BankCode) }}</small>
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Chi nhánh:</td>
                      <td>{{ accountData.BranchName || 'Không có thông tin' }}</td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Người quản lý:</td>
                      <td>
                        <div>{{ accountData.ManagerFullName }}</div>
                        <small class="text-muted">@{{ accountData.ManagerUserName }}</small>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="col-lg-6">
                <table class="table table-borderless">
                  <tbody>
                    <tr>
                      <td class="fw-bold" width="40%">Số dư hiện tại:</td>
                      <td>
                        <div class="d-flex justify-content-between align-items-center">
                          <span class="fs-5 fw-bold text-success">
                            {{ formatCurrency(accountData.CurrentBalance) }}đ
                          </span>
                          <button @click="showUpdateBalanceDialog = true" class="btn btn-outline-primary btn-sm"
                            title="Cập nhật số dư">
                            <i class="fas fa-edit"></i>
                          </button>
                        </div>
                        <small class="text-muted">
                          Cập nhật lần cuối: {{ formatDateTime(accountData.LastBalanceUpdate) }}
                        </small>
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Tự động cập nhật:</td>
                      <td>
                        <span :class="`badge ${accountData.AutoUpdateBalance ? 'bg-success' : 'bg-secondary'}`">
                          {{ accountData.AutoUpdateBalance ? 'Có' : 'Không' }}
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Tổng giao dịch:</td>
                      <td>{{ accountData.TransactionCount }} giao dịch</td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Giao dịch gần nhất:</td>
                      <td>{{ formatDateTime(accountData.LastTransactionDate) }}</td>
                    </tr>
                    <tr>
                      <td class="fw-bold">Ngày tạo:</td>
                      <td>{{ formatDateTime(accountData.CreatedTime) }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Note -->
            <div v-if="accountData.Note" class="mt-3">
              <h6>Ghi chú:</h6>
              <p class="text-muted">{{ accountData.Note }}</p>
            </div>
          </div>
        </div>

        <!-- Monthly Statistics -->
        <div class="row mb-4">
          <div class="col-lg-6">
            <div class="card">
              <div class="card-body text-center">
                <div class="text-success">
                  <i class="fas fa-arrow-down fa-2x mb-2"></i>
                  <h5 class="text-success">Thu nhập tháng này</h5>
                  <h3 class="fw-bold">{{ formatCurrency(accountData.MonthlyIncome) }}đ</h3>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="card">
              <div class="card-body text-center">
                <div class="text-danger">
                  <i class="fas fa-arrow-up fa-2x mb-2"></i>
                  <h5 class="text-danger">Chi tiêu tháng này</h5>
                  <h3 class="fw-bold">{{ formatCurrency(accountData.MonthlyOutcome) }}đ</h3>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">Thao tác nhanh</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-3 col-md-6 mb-3">
                <router-link :to="{ name: 'bank-account-import-statement', query: { accountId: accountData.Id } }"
                  class="btn btn-outline-primary w-100">
                  <i class="fas fa-file-import d-block mb-2"></i>
                  Import sao kê
                </router-link>
              </div>
              <div class="col-lg-3 col-md-6 mb-3">
                <router-link :to="{ name: 'bank-account-transactions', query: { accountId: accountData.Id } }"
                  class="btn btn-outline-info w-100">
                  <i class="fas fa-list d-block mb-2"></i>
                  Xem giao dịch
                </router-link>
              </div>
              <div class="col-lg-3 col-md-6 mb-3">
                <router-link :to="{ name: 'bank-account-import-history', query: { accountId: accountData.Id } }"
                  class="btn btn-outline-secondary w-100">
                  <i class="fas fa-history d-block mb-2"></i>
                  Lịch sử import
                </router-link>
              </div>
              <div class="col-lg-3 col-md-6 mb-3">
                <router-link :to="{ name: 'bank-account-edit', params: { id: accountData.Id } }"
                  class="btn btn-outline-warning w-100">
                  <i class="fas fa-edit d-block mb-2"></i>
                  Chỉnh sửa
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Error State -->
      <div v-else class="col-sm-12 text-center py-5">
        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
        <h5>Không tìm thấy tài khoản ngân hàng</h5>
        <router-link :to="{ name: 'bank-accounts' }" class="btn btn-primary">
          Quay lại danh sách
        </router-link>
      </div>
    </div>

    <!-- Update Balance Dialog -->
    <LadaDialog :visible="showUpdateBalanceDialog">
      <template #header>
        <div class="modal-header">
          <h5 class="modal-title">Cập nhật số dư tài khoản</h5>
          <button @click="showUpdateBalanceDialog = false" type="button" class="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </template>
      <template #body>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Số dư hiện tại</label>
            <input type="text" class="form-control" :value="formatCurrency(accountData?.CurrentBalance) + 'đ'" readonly>
          </div>
          <div class="mb-3">
            <label class="form-label required">Số dư mới</label>
            <VueNumberFormat v-model:value="newBalance" class="form-control"
              :options="{ precision: 0, prefix: '', suffix: ' đ', isInteger: true }" placeholder="Nhập số dư mới..." />
          </div>
        </div>
      </template>
      <template #footer>
        <div class="modal-footer">
          <button @click="showUpdateBalanceDialog = false" type="button" class="btn btn-secondary">
            Hủy
          </button>
          <button @click="updateBalance" type="button" class="btn btn-primary" :disabled="updatingBalance">
            <span v-if="updatingBalance" class="spinner-border spinner-border-sm me-1"></span>
            <i v-else class="fas fa-save me-1"></i>
            {{ updatingBalance ? 'Đang cập nhật...' : 'Cập nhật' }}
          </button>
        </div>
      </template>
    </LadaDialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useToast } from "vue-toastification";
import bankAccountService from '@/services/bankAccountService';
import { BankAccountUtils } from '@/infrastructure/constants/bankAccountConstants';

// Props
const props = defineProps({
  id: [String, Number]
});

// Composables
const route = useRoute();
const router = useRouter();
const toast = useToast();

// Reactive data
const loading = ref(false);
const accountData = ref(null);
const showUpdateBalanceDialog = ref(false);
const newBalance = ref(0);
const updatingBalance = ref(false);

// Computed
const accountId = props.id || route.params.id;

// Methods
const loadAccountData = async () => {
  loading.value = true;
  try {
    const result = await bankAccountService.getById(accountId);
    if (result) {
      accountData.value = result;
      newBalance.value = result.CurrentBalance;
    } else {
      toast.error('Không tìm thấy tài khoản ngân hàng');
      router.push({ name: 'bank-accounts' });
    }
  } catch (error) {
    toast.error('Có lỗi xảy ra khi tải thông tin tài khoản');
    router.push({ name: 'bank-accounts' });
  } finally {
    loading.value = false;
  }
};

const updateBalance = async () => {
  if (!newBalance.value && newBalance.value !== 0) {
    toast.error('Vui lòng nhập số dư mới');
    return;
  }

  updatingBalance.value = true;
  try {
    const result = await bankAccountService.updateBalance({
      AccountId: accountData.value.Id,
      NewBalance: newBalance.value
    });

    if (result.Result === 1) {
      toast.success(result.Message || 'Cập nhật số dư thành công');
      showUpdateBalanceDialog.value = false;
      await loadAccountData(); // Reload data
    } else {
      toast.error(result.Message || 'Có lỗi xảy ra khi cập nhật số dư');
    }
  } catch (error) {
    toast.error('Có lỗi xảy ra khi cập nhật số dư');
  } finally {
    updatingBalance.value = false;
  }
};

// Utility functions
const formatCurrency = BankAccountUtils.formatCurrency;
const getStatusName = BankAccountUtils.getStatusName;
const getStatusColor = BankAccountUtils.getStatusColor;
const getBankCode = BankAccountUtils.getBankCode;

const formatDateTime = (dateString) => {
  if (!dateString) return 'Chưa có thông tin';
  return new Date(dateString).toLocaleString('vi-VN');
};

// Lifecycle
onMounted(() => {
  loadAccountData();
});
</script>

<style scoped>
.table-borderless td {
  border: none;
  padding: 0.5rem 0;
}

code {
  background-color: #f8f9fa;
  color: #495057;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

.required::after {
  content: " *";
  color: #dc3545;
}
</style>
