<template>
    <div>
        <form @submit.prevent="save">
            <div class="row">
                <div class="col-12 mb-3">
                    <label class="form-label required">Key <span class="text-danger">*</span></label>
                    <input type="text" v-model="model.Key" class="form-control" :class="{ 'is-invalid': errors.Key }"
                        placeholder="Nhập key cấu hình (VD: SEO.HomePage.Title)" maxlength="512" :disabled="id > 0">
                    <div class="invalid-feedback" v-if="errors.Key">{{ errors.Key }}</div>
                    <small class="form-text text-muted">
                        Định danh duy nhất cho cấu hình. Chỉ được chứa chữ, số, dấu chấm, gạch dưới và gạch ngang.
                    </small>
                </div>

                <div class="col-12 mb-3">
                    <label class="form-label required">Value <span class="text-danger">*</span></label>
                    <textarea v-model="model.Value" class="form-control" :class="{ 'is-invalid': errors.Value }"
                        placeholder="Nhập giá trị cấu hình" rows="4" maxlength="1024"></textarea>
                    <div class="invalid-feedback" v-if="errors.Value">{{ errors.Value }}</div>
                    <small class="form-text text-muted">
                        Giá trị của cấu hình (tối đa 1024 ký tự). Còn lại: {{ 1024 - (model.Value?.length || 0) }} ký tự
                    </small>
                </div>

                <div class="col-12 mb-3">
                    <label class="form-label">Mô tả</label>
                    <textarea v-model="model.Description" class="form-control"
                        :class="{ 'is-invalid': errors.Description }" placeholder="Mô tả về cấu hình này" rows="3"
                        maxlength="2048"></textarea>
                    <div class="invalid-feedback" v-if="errors.Description">{{ errors.Description }}</div>
                    <small class="form-text text-muted">
                        Mô tả chi tiết về cấu hình (tối đa 2048 ký tự). Còn lại: {{ 2048 - (model.Description?.length ||
                            0) }} ký tự
                    </small>
                </div>

                <div class="col-12 mb-3" v-if="id > 0 && originalData">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">Thông tin bổ sung</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <small class="text-muted">Ngày tạo:</small><br>
                                    <small>{{ formatDate(originalData.CreatedTime) }}</small>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">Người tạo:</small><br>
                                    <small>{{ originalData.CreatedByUserName }}</small>
                                </div>
                                <div class="col-md-6 mt-2">
                                    <small class="text-muted">Cập nhật lần cuối:</small><br>
                                    <small>{{ formatDate(originalData.UpdatedTime) }}</small>
                                </div>
                                <div class="col-md-6 mt-2">
                                    <small class="text-muted">Người cập nhật:</small><br>
                                    <small>{{ originalData.UpdatedByUserName }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-end">
                        <button type="button" @click="cancel" class="btn btn-outline-secondary me-2">
                            <i class="fe fe-x me-1"></i>
                            Hủy
                        </button>
                        <button type="submit" class="btn btn-primary" :disabled="loading">
                            <i v-show="!loading" class="fe fe-save me-1"></i>
                            <span v-show="loading" class="spinner-border spinner-border-sm me-1"></span>
                            {{ id > 0 ? 'Cập nhật' : 'Tạo mới' }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

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

const toast = useToast();

//#region Props & Emits
const props = defineProps({
    id: {
        type: Number,
        default: 0
    }
});

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

//#region Data
const loading = ref(false);
const originalData = ref(null);

const model = reactive({
    Key: '',
    Value: '',
    Description: ''
});

const errors = reactive({
    Key: '',
    Value: '',
    Description: ''
});
//#endregion

//#region Methods
function resetForm() {
    model.Key = '';
    model.Id = 0;
    model.Value = '';
    model.Description = '';
    clearErrors();
}

function clearErrors() {
    errors.Key = '';
    errors.Value = '';
    errors.Description = '';
}

function validateForm() {
    clearErrors();
    let isValid = true;

    // Validate Key
    if (!model.Key || model.Key.trim() === '') {
        errors.Key = 'Key là bắt buộc';
        isValid = false;
    } else if (model.Key.length > 512) {
        errors.Key = 'Key không được vượt quá 512 ký tự';
        isValid = false;
    } else if (!/^[A-Za-z0-9._-]+$/.test(model.Key)) {
        errors.Key = 'Key chỉ được chứa chữ, số, dấu chấm, gạch dưới và gạch ngang';
        isValid = false;
    }

    // Validate Value
    if (!model.Value || model.Value.trim() === '') {
        errors.Value = 'Value là bắt buộc';
        isValid = false;
    } else if (model.Value.length > 1024) {
        errors.Value = 'Value không được vượt quá 1024 ký tự';
        isValid = false;
    }

    // Validate Description
    if (model.Description && model.Description.length > 2048) {
        errors.Description = 'Mô tả không được vượt quá 2048 ký tự';
        isValid = false;
    }

    return isValid;
}

async function loadData() {
    if (props.id > 0) {
        loading.value = true;
        try {
            const result = await appConfigService.getById(props.id);
            model.Id = result.Id;
            model.Key = result.Key || '';
            model.Value = result.Value || '';
            model.Description = result.Description || '';



        } catch (error) {
            toast.error('Lỗi khi tải dữ liệu');
            console.error(error);
        } finally {
            loading.value = false;
        }
    }
}

async function save() {
    if (!validateForm()) {
        return;
    }

    loading.value = true;
    try {
        const saveModel = {
            Id: props.id > 0 ? props.id : 0,
            Key: model.Key.trim(),
            Value: model.Value.trim(),
            Description: model.Description?.trim() || ''
        };

        const result = await appConfigService.createOrUpdate(saveModel);

        if (result && result.Result === 1) {
            toast.success(props.id > 0 ? 'Cập nhật thành công!' : 'Tạo mới thành công!');
            emit('success');
        } else {
            toast.error('Thất bại: ' + (result.Message || 'Có lỗi xảy ra'));
        }
    } catch (error) {
        toast.error('Lỗi khi lưu dữ liệu');
        console.error(error);
    } finally {
        loading.value = false;
    }
}

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

function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString('vi-VN') + ' ' + date.toLocaleTimeString('vi-VN', {
        hour: '2-digit',
        minute: '2-digit'
    });
}
//#endregion

//#region Watchers
watch(() => props.id, (newId) => {
    if (newId > 0) {
        loadData();
    } else {
        resetForm();
        originalData.value = null;
    }
}, { immediate: true });
//#endregion

onMounted(() => {
    if (props.id > 0) {
        loadData();
    }
});
</script>

<style scoped>
.required {
    font-weight: 600;
}

.form-text {
    font-size: 0.875em;
}

.card {
    border: 1px solid #e9ecef;
}

.card-title {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: #495057;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}
</style>
