<template>
    <div class="candidate-detail-container">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Chi tiết ứng viên</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);">Nhân sự</a></li>
                    <li class="breadcrumb-item"><a href="/ung-vien">Quản lý ứng viên</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Chi tiết ứng viên</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <!-- Bên trái: CV nếu có -->
            <div class="col-md-8">
                <div v-if="candidate.HasCv" class="card" style="max-height:90vh; overflow-y:auto;">
                    <div class="card-header fw-bold">CV Ứng viên</div>
                    <div class="card-body" style="padding: 0;">
                        <div v-if="cvType === '.pdf'">
                            <VuePdfEmbed :source="cvUrl" style="width:100%;min-height:500px;" />
                        </div>
                        <div v-else-if="['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'].includes(cvType)">
                            <img :src="encodeURI(cvUrl)" :alt="candidate.CvFileName"
                                style="max-width:100%;display:block;margin:auto;" />
                        </div>
                        <div v-else class="p-3">
                            <p>Không hỗ trợ xem trực tiếp định dạng này. Vui lòng tải về để xem.</p>
                            <a :href="cvUrl ? encodeURI(cvUrl) : '#'" target="_blank" class="btn btn-primary">Tải về</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Bên phải: Thông tin ứng viên + cập nhật trạng thái -->
            <div class="col-md-4">
                <div class="card profile-card mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-1">{{ candidate.FullName }}</h4>
                            <button class="btn btn-outline-secondary btn-sm" @click="reloadDetail"
                                title="Tải lại thông tin">
                                <i class="fa fa-refresh"></i>
                            </button>
                        </div>
                        <p class="text-center text-muted mb-2">{{ candidate.Position || 'Ứng viên' }}</p>
                        <ul class="list-unstyled mb-2">
                            <li><i class="fa fa-phone me-2"></i>{{ candidate.PhoneNumber }}</li>
                            <li><i class="fa fa-envelope me-2"></i>{{ candidate.Email }}</li>
                            <li><i class="fa fa-map-marker me-2"></i>{{ candidate.Address }}</li>
                        </ul>
                        <div class="mb-2">
                            <span class="fw-bold">Ngày sinh:</span> {{ candidate.DateOfBirth || candidate.YearOfBirth }}
                        </div>
                        <div class="mb-2">
                            <span class="fw-bold">Ngày ứng tuyển:</span> {{ candidate.CreatedTimeDisplay }}
                        </div>
                        <div class="mb-2">
                            <span class="fw-bold">Trạng thái:</span>
                            <span class="tag" :class="getTagClass(candidate.Status)">{{ candidate.StatusStr }}</span>
                        </div>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-header fw-bold">Cập nhật trạng thái</div>
                    <div class="card-body">
                        <Review :id="route.params.id" @cancel="reloadDetail" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import candidateService from '@/services/candidateService';
import Review from './components/review.vue';

import VuePdfEmbed from 'vue-pdf-embed';

const route = useRoute();
const candidate = ref({});

const cvUrl = ref("");
const cvType = ref("");

async function loadDetail() {
    const id = route.params.id;
    const data = await candidateService.getById(id);
    candidate.value = data || {};
    if (data.HasCv) {
        let url = data.CvFileUrl;
        if (url && !url.startsWith('http')) {
            url = url.replace(/^\/+/, '');
        }
        cvUrl.value = url;
        cvType.value = (data.CvFileType || '').toLowerCase();
    } else {
        cvUrl.value = "";
        cvType.value = "";
    }
}

function reloadDetail() {
    loadDetail();
}

onMounted(() => {
    loadDetail();
});

function getTagClass(statusId) {
    switch (statusId) {
        case 1: return 'tag-info';
        case 2: return 'tag-warning';
        case 3: return 'tag-indigo';
        case 4: return 'tag-blue';
        case 5: return 'tag-lime';
        case 6: return 'tag-green';
        case 7: return 'tag-red';
        default: return 'tag-default';
    }
}

</script>
<style scoped>
.candidate-detail-container {
    padding: 24px;
}

.profile-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>