<template>
  <div class="expense-category-detail-page">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div class="d-flex align-items-center">
        <button 
          type="button" 
          class="btn btn-outline-secondary me-3"
          @click="goBack"
        >
          <i class="fe fe-arrow-left me-2"></i>Quay lại
        </button>
        <div>
          <h4 class="mb-1">Chi tiết danh mục chi phí</h4>
          <p class="text-muted mb-0">Thông tin chi tiết về danh mục chi phí</p>
        </div>
      </div>
      <div class="d-flex gap-2">
        <button 
          v-if="category"
          type="button" 
          class="btn btn-primary"
          @click="editCategory"
        >
          <i class="fe fe-edit-2 me-2"></i>Chỉnh sửa
        </button>
      </div>
    </div>

    <!-- Loading -->
    <div v-if="loading" class="text-center py-5">
      <Loader />
    </div>

    <!-- Error -->
    <div v-else-if="error" class="alert alert-danger">
      <i class="fe fe-alert-circle me-2"></i>{{ error }}
    </div>

    <!-- Content -->
    <div v-else-if="category" class="row">
      <!-- Main Information -->
      <div class="col-lg-8">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0">Thông tin danh mục chi phí</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label text-muted">Tên danh mục</label>
                <p class="mb-0"><strong>{{ category.Name }}</strong></p>
              </div>
              <div class="col-md-6 mb-3">
                <label class="form-label text-muted">Thứ tự hiển thị</label>
                <p class="mb-0">
                  <span class="badge bg-info fs-6">{{ category.DisplayOrder }}</span>
                </p>
              </div>
              <div class="col-12 mb-3" v-if="category.Description">
                <label class="form-label text-muted">Mô tả</label>
                <p class="mb-0">{{ category.Description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Side Information -->
      <div class="col-lg-4">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0">Thông tin bổ sung</h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label text-muted">Người phê duyệt</label>
              <p class="mb-0">{{ category.ApprovedByUserName || '-' }}</p>
            </div>
            <div class="mb-3">
              <label class="form-label text-muted">Ngày tạo</label>
              <p class="mb-0">{{ formatDateTime(category.CreatedTime) }}</p>
            </div>
            <div class="mb-3">
              <label class="form-label text-muted">Người cập nhật</label>
              <p class="mb-0">{{ category.UpdatedByUserName || '-' }}</p>
            </div>
            <div class="mb-3">
              <label class="form-label text-muted">Ngày cập nhật</label>
              <p class="mb-0">{{ formatDateTime(category.UpdatedTime) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useToast } from 'vue-toastification'
import expenseCategoryService from '@/services/expenseCategoryService'

// Router & Toast
const route = useRoute()
const router = useRouter()
const toast = useToast()

// Data
const loading = ref(false)
const error = ref('')
const category = ref(null)

// Utility functions
const formatDateTime = (dateString) => {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleString('vi-VN')
  } catch {
    return '-'
  }
}

// Methods
const loadCategory = async () => {
  try {
    loading.value = true
    error.value = ''
    
    const categoryId = route.params.id
    if (!categoryId) {
      error.value = 'ID danh mục chi phí không hợp lệ'
      return
    }
    
    const result = await expenseCategoryService.getById(categoryId)
    if (result) {
      category.value = result
    } else {
      error.value = 'Không tìm thấy danh mục chi phí'
    }
  } catch (err) {
    console.error('Error loading category:', err)
    error.value = 'Có lỗi xảy ra khi tải thông tin danh mục chi phí'
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.push('/quan-ly-danh-muc-chi-phi')
}

const editCategory = () => {
  router.push(`/quan-ly-danh-muc-chi-phi/chinh-sua/${category.value.Id}`)
}

// Lifecycle
onMounted(() => {
  loadCategory()
})
</script>

<style scoped>
.expense-category-detail-page {
  padding: 1rem;
}

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

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

.fs-6 {
  font-size: 1rem !important;
}

.alert {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
</style>
