<template>
    <div>
        <!-- Header và Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Đổi mật khẩu</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Đổi mật khẩu</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm justify-content-center">
            <div class="col-sm-12 col-md-8 col-lg-6 col-xl-5 grid-margin">
                <div class="card shadow-none">
                    <div class="card-body">
                        <h5 class="mb-4">Thay đổi mật khẩu tài khoản</h5>
                        <Form :validation-schema="schema" @submit="onSubmit" v-slot="{ errors, isSubmitting }">
                            <div class="form-group mb-3">
                                <label for="currentPassword">Mật khẩu hiện tại</label>
                                <Field name="currentPassword" type="password" v-model="form.currentPassword"
                                    class="form-control" :class="{ 'is-invalid': errors.currentPassword }"
                                    placeholder="Nhập mật khẩu hiện tại" />
                                <ErrorMessage name="currentPassword" class="invalid-feedback" />
                            </div>
                            <div class="form-group mb-3">
                                <label for="newPassword">Mật khẩu mới</label>
                                <Field name="newPassword" type="password" v-model="form.newPassword"
                                    class="form-control" :class="{ 'is-invalid': errors.newPassword }"
                                    placeholder="Nhập mật khẩu mới" />
                                <ErrorMessage name="newPassword" class="invalid-feedback" />
                                <!-- Gợi ý tiêu chí mật khẩu -->
                                <div class="password-rules mt-2 p-2" style="background:#faf7fa;border-radius:6px;">
                                    <div class="mb-1"><b>Mật khẩu phải tuân theo:</b></div>
                                    <ul class="list-unstyled mb-0">
                                        <li class="d-flex align-items-center mb-1">
                                            <span :class="passLength ? 'rule-met' : 'rule-unmet'">
                                                <i :class="passLength ? 'fa fa-check-circle' : 'far fa-circle'"></i>
                                            </span>
                                            <span class="ms-2">Ít nhất 8 ký tự</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-1">
                                            <span :class="passUpper ? 'rule-met' : 'rule-unmet'">
                                                <i :class="passUpper ? 'fa fa-check-circle' : 'far fa-circle'"></i>
                                            </span>
                                            <span class="ms-2">Ít nhất 1 ký tự viết hoa</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-1">
                                            <span :class="passLower ? 'rule-met' : 'rule-unmet'">
                                                <i :class="passLower ? 'fa fa-check-circle' : 'far fa-circle'"></i>
                                            </span>
                                            <span class="ms-2">Ít nhất 1 ký tự viết thường</span>
                                        </li>
                                        <li class="d-flex align-items-center mb-1">
                                            <span :class="passDigit ? 'rule-met' : 'rule-unmet'">
                                                <i :class="passDigit ? 'fa fa-check-circle' : 'far fa-circle'"></i>
                                            </span>
                                            <span class="ms-2">Ít nhất 1 chữ số</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="confirmPassword">Xác nhận mật khẩu mới</label>
                                <Field name="confirmPassword" type="password" v-model="form.confirmPassword"
                                    class="form-control" :class="{ 'is-invalid': errors.confirmPassword }"
                                    placeholder="Nhập lại mật khẩu mới" />
                                <ErrorMessage name="confirmPassword" class="invalid-feedback" />
                            </div>
                            <div v-if="error" class="alert alert-danger py-2">{{ error }}</div>
                            <div v-if="success" class="alert alert-success py-2">{{ success }}</div>
                            <button type="submit" class="btn btn-dark w-100" :disabled="isSubmitting">
                                <span v-if="!isSubmitting">Đổi mật khẩu</span>
                                <span v-else class="spinner-border spinner-border-sm"></span>
                            </button>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
import userService from '@/services/userService';
import { useUserStore } from '@/stores';
const uStore = useUserStore();

const form = reactive({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
});

const error = ref('');
const success = ref('');

const schema = Yup.object().shape({
    currentPassword: Yup.string().required('Vui lòng nhập mật khẩu hiện tại'),
    newPassword: Yup.string()
        .required('Vui lòng nhập mật khẩu mới')
        .min(8, 'Mật khẩu phải có ít nhất 8 ký tự')
        .matches(/[a-z]/, 'Mật khẩu phải có ít nhất 1 ký tự thường')
        .matches(/[A-Z]/, 'Mật khẩu phải có ít nhất 1 ký tự hoa')
        .matches(/[0-9]/, 'Mật khẩu phải có ít nhất 1 ký tự số'),
    confirmPassword: Yup.string()
        .required('Vui lòng xác nhận mật khẩu mới')
        .oneOf([Yup.ref('newPassword')], 'Mật khẩu xác nhận không khớp'),
});

const passLength = computed(() => form.newPassword.length >= 8);
const passUpper = computed(() => /[A-Z]/.test(form.newPassword));
const passLower = computed(() => /[a-z]/.test(form.newPassword));
const passDigit = computed(() => /[0-9]/.test(form.newPassword));

async function onSubmit() {
    error.value = '';
    success.value = '';
    try {
        const response = await userService.changePassword({
            currentPassword: form.currentPassword,
            newPassword: form.newPassword,
            confirmNewPassword: form.confirmPassword,
        });
        if (response && response.Result === 1) {
            success.value = 'Đổi mật khẩu thành công!';
            form.currentPassword = '';
            form.newPassword = '';
            form.confirmPassword = '';
            uStore.logout();
        } else {
            error.value = response.Message || 'Đổi mật khẩu thất bại. Vui lòng thử lại.';
        }
    } catch (e) {
        error.value = e.response?.data?.Message || e.message || 'Đổi mật khẩu thất bại. Vui lòng thử lại.';
    }
}
</script>

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

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

.password-rules {
    font-size: 15px;
}

.rule-met {
    color: #4caf50;
}

.rule-unmet {
    color: #bbb;
}
</style>
