{% extends "base.html" %}

{% block title %}修改密碼 - WOOO TECH{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-key me-2"></i>修改密碼
                    </h5>
                </div>
                <div class="card-body">
                    <div id="alertContainer"></div>

                    <form id="changePasswordForm">
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">舊密碼 <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="oldPassword" required>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('oldPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密碼 <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="newPassword" required oninput="checkPasswordStrength()">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('newPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="passwordStrength" class="mt-2"></div>
                        </div>

                        <div class="mb-4">
                            <label for="confirmPassword" class="form-label">確認新密碼 <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="confirmPassword" required oninput="checkPasswordMatch()">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirmPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="passwordMatch" class="mt-2"></div>
                        </div>

                        <!-- 密碼要求提示 -->
                        <div class="alert alert-info">
                            <h6 class="alert-heading"><i class="fas fa-info-circle me-2"></i>密碼要求</h6>
                            <ul class="mb-0 ps-3">
                                {% for req in password_requirements %}
                                <li>{{ req }}</li>
                                {% endfor %}
                            </ul>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-save me-2"></i>變更密碼
                            </button>
                            <a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('changePasswordForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        // 前端驗證
        if (newPassword !== confirmPassword) {
            showAlert('新密碼與確認密碼不符', 'danger');
            return;
        }

        if (newPassword === oldPassword) {
            showAlert('新密碼不能與舊密碼相同', 'danger');
            return;
        }

        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>處理中...';

        try {
            const response = await fetch('/api/change_password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({
                    old_password: oldPassword,
                    new_password: newPassword
                })
            });

            const data = await response.json();

            if (data.success) {
                showAlert('密碼變更成功！即將跳轉至登入頁面...', 'success');
                setTimeout(() => {
                    window.location.href = '/logout';
                }, 2000);
            } else {
                showAlert(data.message, 'danger');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>變更密碼';
            }
        } catch (error) {
            console.error('密碼變更失敗:', error);
            showAlert('密碼變更失敗，請稍後再試', 'danger');
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>變更密碼';
        }
    });

    function togglePassword(inputId) {
        const input = document.getElementById(inputId);
        const icon = input.parentElement.querySelector('.fa-eye, .fa-eye-slash');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    function checkPasswordStrength() {
        const password = document.getElementById('newPassword').value;
        const strengthDiv = document.getElementById('passwordStrength');

        if (!password) {
            strengthDiv.innerHTML = '';
            return;
        }

        let score = 0;
        let feedback = [];

        // 長度檢查
        if (password.length >= 8) score++;
        if (password.length >= 12) score++;

        // 包含檢查
        if (/[a-z]/.test(password)) score++;
        if (/[A-Z]/.test(password)) score++;
        if (/[0-9]/.test(password)) score++;
        if (/[!@#$%^&*]/.test(password)) score++;

        let strengthText, strengthClass;
        if (score < 3) {
            strengthText = '弱';
            strengthClass = 'text-danger';
        } else if (score < 5) {
            strengthText = '中等';
            strengthClass = 'text-warning';
        } else {
            strengthText = '強';
            strengthClass = 'text-success';
        }

        strengthDiv.innerHTML = `
            <div class="progress" style="height: 5px;">
                <div class="progress-bar bg-${strengthClass.replace('text-', '')}"
                     style="width: ${(score / 6) * 100}%"></div>
            </div>
            <small class="${strengthClass}">密碼強度：${strengthText}</small>
        `;
    }

    function checkPasswordMatch() {
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const matchDiv = document.getElementById('passwordMatch');

        if (!confirmPassword) {
            matchDiv.innerHTML = '';
            return;
        }

        if (newPassword === confirmPassword) {
            matchDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>密碼相符</small>';
        } else {
            matchDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>密碼不相符</small>';
        }
    }

    function showAlert(message, type) {
        const container = document.getElementById('alertContainer');
        container.innerHTML = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
    }
</script>
{% endblock %}