<template>
  <div>
    <div v-if="loading" class="text-center py-4">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Đang tải...</span>
      </div>
    </div>

    <div v-else-if="model.id" class="vat-info-detail">
      <!-- Header với trạng thái -->
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="mb-0">{{ model.companyName }}</h5>
        <span v-if="model.isDefault" class="badge bg-success">Mặc định</span>
      </div>

      <!-- Thông tin công ty -->
      <div class="row mb-4">
        <div class="col-12">
          <h6 class="text-primary mb-3">
            <i class="fas fa-building me-2"></i>Thông tin công ty
          </h6>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label text-muted">Tên công ty:</label>
          <p class="mb-0 fw-medium">{{ model.companyName }}</p>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label text-muted">Mã số thuế:</label>
          <p class="mb-0 fw-medium">{{ model.taxCode }}</p>
        </div>
        <div class="col-12 mb-3">
          <label class="form-label text-muted">Địa chỉ:</label>
          <p class="mb-0 fw-medium">{{ model.address }}</p>
        </div>
      </div>

      <!-- Thông tin liên hệ -->
      <div class="row mb-4">
        <div class="col-12">
          <h6 class="text-primary mb-3">
            <i class="fas fa-address-book me-2"></i>Thông tin liên hệ
          </h6>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label text-muted">Người liên hệ:</label>
          <p class="mb-0 fw-medium">{{ model.contactName }}</p>
        </div>
        <div class="col-md-6 mb-3">
          <label class="form-label text-muted">Số điện thoại:</label>
          <p class="mb-0 fw-medium">
            <a :href="'tel:' + model.contactPhone" class="text-decoration-none">
              {{ model.contactPhone }}
            </a>
          </p>
        </div>
        <div class="col-12 mb-3">
          <label class="form-label text-muted">Email hóa đơn:</label>
          <p class="mb-0 fw-medium">
            <a :href="'mailto:' + model.invoiceEmail" class="text-decoration-none">
              {{ model.invoiceEmail }}
            </a>
          </p>
        </div>
      </div>

      <!-- Thông tin bổ sung -->
      <div class="row mb-4">
        <div class="col-12">
          <h6 class="text-primary mb-3">
            <i class="fas fa-info-circle me-2"></i>Thông tin bổ sung
          </h6>
        </div>
        <div class="col-md-12 mb-3">
          <label class="form-label text-muted">Trạng thái:</label>
          <p class="mb-0">
            <span v-if="model.isDefault" class="badge bg-success">
              <i class="fas fa-star me-1"></i>Mặc định
            </span>
            <span v-else class="badge bg-secondary">Thông thường</span>
          </p>
        </div>
        <div class="col-12 mb-3" v-if="model.note">
          <label class="form-label text-muted">Ghi chú:</label>
          <p class="mb-0 fw-medium">{{ model.note }}</p>
        </div>
      </div>

      <!-- Thông tin cập nhật -->
      <div class="border-top pt-3">
        <div class="row">
          <div class="col-12">
            <h6 class="text-primary mb-3">
              <i class="fas fa-history me-2"></i>Lịch sử cập nhật
            </h6>
          </div>
          <div class="col-md-6 mb-2">
            <label class="form-label text-muted">Cập nhật lần cuối:</label>
            <p class="mb-0 fw-medium">{{ formatDateTime(model.updatedDate) }}</p>
          </div>
          <div class="col-md-6 mb-2">
            <label class="form-label text-muted">Người cập nhật:</label>
            <p class="mb-0 fw-medium">{{ model.updatedBy || 'Không xác định' }}</p>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="text-center py-4">
      <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
      <p class="text-muted">Không tìm thấy thông tin VAT.</p>
    </div>

    <!-- Footer buttons -->
    <div class="d-flex justify-content-end gap-2 mt-4">
      <button type="button" class="btn btn-secondary" @click="handleCancel">
        Đóng
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import vatInfoService from "@/services/vatInfoService.js";
import { useToast } from "vue-toastification";

const toast = useToast();
const emit = defineEmits(['cancel']);

//#region props
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
});
//#endregion

//#region DATA
const loading = ref(false);

const model = reactive({
  id: 0,
  customerId: 0,
  companyName: '',
  taxCode: '',
  invoiceEmail: '',
  address: '',
  contactName: '',
  contactPhone: '',
  note: '',
  isDefault: false,
  updatedDate: '',
  updatedBy: ''
});
//#endregion

//#region Methods
async function loadData() {
  if (!props.id || props.id <= 0) return;

  try {
    loading.value = true;
    const result = await vatInfoService.getById(props.id);

    if (result) {
      Object.assign(model, {
        id: result.Id || 0,
        customerId: result.CustomerId || 0,
        companyName: result.CompanyName || '',
        taxCode: result.TaxCode || '',
        invoiceEmail: result.InvoiceEmail || '',
        address: result.Address || '',
        contactName: result.ContactName || '',
        contactPhone: result.ContactPhone || '',
        note: result.Note || '',
        isDefault: result.IsDefault || false,
        updatedDate: result.UpdatedDate || '',
        updatedBy: result.UpdatedBy || ''
      });
    }
  } catch (error) {
    console.error('Error loading VAT info detail:', error);
    toast.error('Có lỗi xảy ra khi tải dữ liệu');
  } finally {
    loading.value = false;
  }
}

function formatDateTime(dateString) {
  if (!dateString) return '';
  try {
    return new Date(dateString).toLocaleString('vi-VN');
  } catch {
    return dateString;
  }
}

function handleCancel() {
  emit('cancel');
}
//#endregion

//#region Events
onMounted(async () => {
  await loadData();
});
//#endregion
</script>

<style scoped>
.vat-info-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.fw-medium {
  font-weight: 500;
}

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

.text-muted {
  color: #6c757d !important;
}

.gap-2 {
  gap: 0.5rem;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.badge {
  font-size: 0.75rem;
}

a {
  color: #0d6efd;
}

a:hover {
  color: #0a58ca;
}
</style>
