{% extends 'base.html' %}

{% block title %}仪表盘 - 密码管理器{% endblock %}

{% block content %}
    <div class="header">
        <h2>密码仪表盘</h2>
        <a href="{{ url_for('logout') }}" class="btn btn-logout">安全退出</a>
    </div>

    <div class="dashboard-grid">
        <div class="passwords-list card">
            <h3>已存密码</h3>
            {% if passwords %}
                <table>
                    <thead>
                        <tr>
                            <th>分类</th>
                            <th>账户</th>
                            <th>密码</th>
                            <th style="text-align: right;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for category, accounts in passwords.items() %}
                        {% for account, password in accounts.items() %}
                        <tr id="row-{{ category }}-{{ account }}">
                            <td>{{ category }}</td>
                            <td>{{ account }}</td>
                            <td>
                                <span class="password-display">••••••••</span>
                                <input type="hidden" class="password-value" value="{{ password }}">
                            </td>
                            <td style="text-align: right;">
                                <button class="btn btn-secondary btn-copy" onclick="copyPassword('{{ category }}', '{{ account }}')">复制</button>
                                <form method="post" action="{{ url_for('delete_password') }}" style="display:inline; margin-left: 5px;">
                                    <input type="hidden" name="category" value="{{ category }}">
                                    <input type="hidden" name="account" value="{{ account }}">
                                    <button type="submit" class="btn btn-danger">删除</button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>还没有保存任何密码。请在右侧添加您的第一个密码！</p>
            {% endif %}
        </div>

        <div class="forms-column">
            <div class="add-password-form card">
                <h3>添加新密码</h3>
                <form method="post" action="{{ url_for('add_password') }}">
                    <div class="form-group">
                        <label for="category">分类 (例如: 工作, 个人)</label>
                        <input type="text" id="category" name="category" required>
                    </div>
                    <div class="form-group">
                        <label for="account">账户 (例如: user@example.com)</label>
                        <input type="text" id="account" name="account" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" required>
                    </div>
                    <button type="submit" class="btn">确认添加</button>
                </form>
            </div>

            <div class="password-generator-form card">
                <h3>密码生成器</h3>
                <form id="generate-form">
                    <div class="form-group">
                        <label for="length">密码长度</label>
                        <input type="number" id="length" name="length" value="16" required>
                    </div>
                    <div class="form-group-checkbox">
                        <input type="checkbox" id="use_uppercase" name="use_uppercase" checked>
                        <label for="use_uppercase">包含大写字母 (A-Z)</label>
                    </div>
                    <div class="form-group-checkbox">
                        <input type="checkbox" id="use_digits" name="use_digits" checked>
                        <label for="use_digits">包含数字 (0-9)</label>
                    </div>
                    <div class="form-group-checkbox">
                        <input type="checkbox" id="use_symbols" name="use_symbols" checked>
                        <label for="use_symbols">包含特殊符号 (!@#$)</label>
                    </div>
                    <button type="button" class="btn btn-secondary" onclick="generateAndFillPassword()">生成并填充到上方</button>
                </form>
                <div id="generated-password-display" class="generated-password"></div>
            </div>
        </div>
    </div>

<script>
function copyPassword(category, account) {
    const row = document.getElementById(`row-${category}-${account}`);
    const password = row.querySelector('.password-value').value;
    
    navigator.clipboard.writeText(password).then(() => {
        const copyButton = row.querySelector('.btn-copy');
        const originalText = copyButton.textContent;
        copyButton.textContent = '已复制!';
        copyButton.style.backgroundColor = '#28a745'; // success green
        
        setTimeout(() => {
            copyButton.textContent = originalText;
            copyButton.style.backgroundColor = '#6c757d'; // secondary grey
        }, 2000);
    }).catch(err => {
        console.error('无法复制密码: ', err);
        alert('复制失败，请检查浏览器权限。');
    });
}

function generateAndFillPassword() {
    const form = document.getElementById('generate-form');
    const length = form.elements.length.value;
    const use_uppercase = form.elements.use_uppercase.checked;
    const use_digits = form.elements.use_digits.checked;
    const use_symbols = form.elements.use_symbols.checked;

    fetch("{{ url_for('generate_password_route') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 如果有 CSRF token, 需要在这里添加
        },
        body: JSON.stringify({
            length: length,
            use_uppercase: use_uppercase,
            use_digits: use_digits,
            use_symbols: use_symbols
        }),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.password) {
            document.getElementById('password').value = data.password;
            const display = document.getElementById('generated-password-display');
            display.textContent = '已生成强密码并填充至上方表单。';
            display.style.display = 'block';
        } else {
            alert('生成密码时出错: ' + (data.error || '未知错误'));
        }
    })
    .catch((error) => {
        console.error('Error:', error);
        alert('请求生成密码时发生严重错误，请查看控制台。');
    });
}
</script>
{% endblock %}