<template>
    <div>
        <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
            <div class="col-12 col-md-6">
                <div class="form-group mb-3">
                    <label>Họ và tên <span class="text-danger">*</span></label>
                    <Field name="FullName" v-model="model.FullName" class="form-control" placeholder="Nhập họ và tên" />
                    <ErrorMessage name="FullName" class="text-danger small" />
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group mb-3">
                    <label>Số điện thoại <span class="text-danger">*</span></label>
                    <Field name="PhoneNumber" v-model="model.PhoneNumber" class="form-control"
                        placeholder="Nhập số điện thoại" />
                    <ErrorMessage name="PhoneNumber" class="text-danger small" />
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group mb-3">
                    <label>Năm sinh</label>
                    <Field name="YearOfBirth" v-model="model.YearOfBirth" class="form-control"
                        placeholder="Nhập năm sinh" />
                    <ErrorMessage name="YearOfBirth" class="text-danger small" />
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group mb-3">
                    <label>Địa chỉ <span class="text-danger">*</span></label>
                    <Field name="Address" v-model="model.Address" class="form-control" placeholder="Nhập địa chỉ" />
                    <ErrorMessage name="Address" class="text-danger small" />
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="form-group mb-3">
                    <label>CV (PDF, Word, Ảnh)</label>
                    <input type="file" class="form-control" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                        @change="onFileChange" />
                    <div v-if="fileError" class="text-danger small">{{ fileError }}</div>
                    <div v-if="cvFileName" class="small mt-1">Đã chọn: {{ cvFileName }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Giới thiệu về bản thân</label>
                    <Field as="textarea" rows="4" name="Introduction" v-model="model.Introduction" class="form-control"
                        placeholder="Giới thiệu về bản thân" />
                    <ErrorMessage name="Introduction" class="text-danger small" />
                </div>
            </div>
            <div class="col-12 d-flex flex-row-reverse">
                <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">Bỏ qua</button>
                <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting || loading">
                    <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                    Lưu
                </button>
            </div>
        </Form>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
import candidateService from '@/services/candidateService';
import { useToast } from 'vue-toastification';
const toast = useToast();

const emit = defineEmits(['cancel', 'success']);

const model = reactive({
    FullName: '',
    PhoneNumber: '',
    YearOfBirth: '',
    Address: '',
    Introduction: ''
});

const schema = Yup.object().shape({
    FullName: Yup.string()
        .required('Vui lòng nhập họ và tên')
        .max(128, 'Họ và tên không được vượt quá 128 ký tự'),
    PhoneNumber: Yup.string()
        .required('Vui lòng nhập số điện thoại')
        .max(128, 'Số điện thoại không được vượt quá 128 ký tự')
        .matches(/^(\+?\d{7,15})$/, 'Số điện thoại không hợp lệ'),
    YearOfBirth: Yup.string()
        .max(64, 'Năm sinh không được vượt quá 64 ký tự'),
    Address: Yup.string()
        .required('Vui lòng nhập địa chỉ')
        .max(512, 'Địa chỉ không được vượt quá 512 ký tự'),
    Introduction: Yup.string()
        .max(1024, 'Giới thiệu không được vượt quá 1024 ký tự')
});

const file = ref(null);
const cvFileName = ref('');
const fileError = ref('');
const loading = ref(false);
let submitting = false;

function onFileChange(e) {
    const f = e.target.files[0];
    if (!f) return;
    // Kiểm tra định dạng file
    const allowed = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg'];
    if (!allowed.includes(f.type)) {
        fileError.value = 'Chỉ chấp nhận file PDF, Word, ảnh (.pdf, .doc, .docx, .jpg, .jpeg, .png)';
        file.value = null;
        cvFileName.value = '';
        return;
    }
    fileError.value = '';
    file.value = f;
    cvFileName.value = f.name;
}

function cancel() {
    emit('cancel');
}

async function onSubmit() {
    if (loading.value || submitting) return;
    loading.value = true;
    submitting = true;
    try {
        const formData = new FormData();
        formData.append('FullName', model.FullName);
        formData.append('PhoneNumber', model.PhoneNumber);
        formData.append('YearOfBirth', model.YearOfBirth);
        formData.append('Address', model.Address);
        formData.append('Introduction', model.Introduction);
        if (file.value) {
            formData.append('CVFile', file.value);
        }
        const result = await candidateService.create(formData);
        if (result && result.Result === 1) {
            toast.success('Tạo ứng viên thành công!');
            emit('success');
        } else {
            toast.error('Thất bại: ' + (result?.Message || 'Không xác định'));
        }
    } finally {
        loading.value = false;
        submitting = false;
    }
}
</script>