<template>
  <div v-if="bankDetail">
    <div class="row">
      <!-- Thông tin cơ bản -->
      <div class="col-md-12 mb-4">
        <h6 class="text-primary border-bottom pb-2 mb-3">
          <i class="fa fa-building me-2"></i>
          Thông tin cơ bản
        </h6>
        <div class="row">
          <div class="col-md-12 mb-3">
            <label class="form-label fw-bold">ID:</label>
            <div class="form-control-plaintext">{{ bankDetail.Id }}</div>
          </div>
          <div class="col-md-12 mb-3">
            <label class="form-label fw-bold">Tên đầy đủ:</label>
            <div class="form-control-plaintext">{{ bankDetail.FullName }}</div>
          </div>
          <div class="col-md-12 mb-3">
            <label class="form-label fw-bold">Tên thương hiệu:</label>
            <div class="form-control-plaintext">{{ bankDetail.BrandName }}</div>
          </div>
        </div>
      </div>

      <!-- Ghi chú -->
      <div class="col-md-12 mb-4" v-if="bankDetail.Note">
        <h6 class="text-primary border-bottom pb-2 mb-3">
          <i class="fa fa-sticky-note me-2"></i>
          Ghi chú
        </h6>
        <div class="form-control-plaintext">
          {{ bankDetail.Note }}
        </div>
      </div>

      <!-- Thông tin hệ thống -->
      <div class="col-md-12 mb-4" v-if="showSystemInfo">
              <h6 class="text-primary border-bottom pb-2 mb-3">
                <i class="fa fa-cog me-2"></i>
                Thông tin hệ thống
              </h6>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-bold">Người tạo:</label>
                  <div class="form-control-plaintext">{{ bankDetail.CreatedBy || '-' }}</div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-bold">Thời gian tạo:</label>
                  <div class="form-control-plaintext">
                    {{ formatDateTime(bankDetail.CreatedTime) }}
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-bold">Người cập nhật:</label>
                  <div class="form-control-plaintext">{{ bankDetail.UpdatedBy || '-' }}</div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label fw-bold">Thời gian cập nhật:</label>
                  <div class="form-control-plaintext">
                    {{ formatDateTime(bankDetail.UpdatedTime) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center" v-else-if="loading">
          <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <div class="mt-2">Đang tải thông tin...</div>
        </div>

        <div class="text-center" v-else>
          <div class="alert alert-warning">
            <i class="fa fa-exclamation-triangle me-2"></i>
            Không thể tải thông tin ngân hàng
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="close">
            Đóng
          </button>
          <button
            type="button"
            class="btn btn-primary"
            @click="editBank"
            v-if="bankDetail && canEdit"
          >
            <i class="fa fa-edit me-2"></i>
            Chỉnh sửa
          </button>
        </div>
</template>

<script>
import bankService from '@/services/bankService';

export default {
  name: 'BankDetail',
  props: {
    bank: {
      type: Object,
      required: true
    }
  },
  emits: ['cancel', 'edit'],
  data() {
    return {
      bankDetail: null,
      loading: false,
      canEdit: true // Should be loaded from user permissions
    };
  },
  computed: {
    showSystemInfo() {
      return this.bankDetail && (
        this.bankDetail.CreatedBy || 
        this.bankDetail.CreatedTime || 
        this.bankDetail.UpdatedBy || 
        this.bankDetail.UpdatedTime
      );
    }
  },
  mounted() {
    this.loadBankDetail();
  },
  methods: {
    async loadBankDetail() {
      this.loading = true;
      try {
        const result = await bankService.getById(this.bank.Id);
        this.bankDetail = result;
      } catch (error) {
        console.error('Error loading bank detail:', error);
        this.$toast.error('Có lỗi xảy ra khi tải thông tin ngân hàng');
      } finally {
        this.loading = false;
      }
    },

    close() {
      this.$emit('cancel');
    },

    editBank() {
      this.$emit('edit', this.bankDetail);
      this.close();
    },

    // Utility Methods
    formatDateTime(dateString) {
      if (!dateString) return '-';
      const date = new Date(dateString);
      return date.toLocaleString('vi-VN');
    }
  }
};
</script>

<style scoped>
.form-label {
  margin-bottom: 0.25rem;
  color: #6c757d;
  font-size: 0.875rem;
}

.form-control-plaintext {
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.badge {
  font-size: 0.75rem;
}

.border-bottom {
  border-bottom: 2px solid #dee2e6 !important;
}

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

h6 {
  font-size: 1rem;
  font-weight: 600;
}

.alert {
  margin-bottom: 0;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
}
</style>
