{% extends "ewoooc_base.html" %}

{% block title %}用戶管理 - EwoooC{% endblock %}

{% block extra_css %}
<style>
.user-management-page {
    color: var(--momo-text-primary);
}

.user-management-head {
    padding: var(--momo-space-4) var(--momo-space-5);
    background: var(--momo-dot-grid), var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.user-management-head h2 {
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-size: var(--momo-text-headline);
    font-weight: 800;
    letter-spacing: 0;
}

.user-management-page .text-muted {
    color: var(--momo-text-secondary) !important;
}

.user-table-head th {
    background: var(--momo-bg-paper) !important;
    color: var(--momo-text-secondary) !important;
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.user-role-badge,
.user-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-sm);
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 800;
    line-height: 1;
}

.user-role-badge--danger {
    background: var(--momo-danger-bg);
    border-color: var(--momo-danger-border);
    color: var(--momo-danger-text);
}

.user-role-badge--warning {
    background: var(--momo-warning-bg);
    border-color: var(--momo-warning-border);
    color: var(--momo-warning-text);
}

.user-role-badge--muted,
.user-status-badge.is-muted {
    background: var(--momo-tag-muted-bg);
    border-color: var(--momo-tag-muted-border);
    color: var(--momo-tag-muted-text);
}

.user-status-badge.is-active,
.user-status-badge.is-info {
    background: var(--momo-success-bg);
    border-color: var(--momo-success-border);
    color: var(--momo-success-text);
}

.user-status-badge.is-inactive {
    background: var(--momo-tag-muted-bg);
    border-color: var(--momo-tag-muted-border);
    color: var(--momo-tag-muted-text);
}

.user-permission-toolbar {
    background: var(--momo-bg-paper);
    border-color: var(--momo-border-light);
}

.user-modal-alert {
    background: var(--momo-bg-paper);
    border-bottom: 1px solid var(--momo-border-light);
    color: var(--momo-text-primary);
}

.user-modal-alert--danger {
    background: var(--momo-danger-bg);
    color: var(--momo-danger-text);
}

.user-modal-alert--info {
    background: var(--momo-info-bg);
    color: var(--momo-info-text);
}

.user-toast {
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
    background: var(--momo-bg-elevated);
    color: var(--momo-text-primary);
    font-weight: 700;
}

.user-toast--success {
    background: var(--momo-success-bg);
    border-color: var(--momo-success-border);
    color: var(--momo-success-text);
}

.user-toast--danger {
    background: var(--momo-danger-bg);
    border-color: var(--momo-danger-border);
    color: var(--momo-danger-text);
}

.user-toast--warning {
    background: var(--momo-warning-bg);
    border-color: var(--momo-warning-border);
    color: var(--momo-warning-text);
}

.user-toast--info {
    background: var(--momo-info-bg);
    border-color: var(--momo-info-border);
    color: var(--momo-info-text);
}

@media (max-width: 760px) {
    .user-management-head {
        padding: var(--momo-space-4);
    }

    .user-management-head .col-auto,
    .user-management-head .btn {
        width: 100%;
    }

    #usersTable {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    #usersTable,
    #usersTable tbody,
    #usersTable tr,
    #usersTable td {
        display: block;
        width: 100%;
    }

    #usersTable thead {
        display: none;
    }

    #usersTableBody {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    #usersTableBody tr {
        overflow: hidden;
        border: 1px solid var(--momo-border-light, #e5dccd);
        border-radius: 8px;
        background: var(--momo-bg-surface, #fffaf1);
    }

    #usersTableBody td {
        display: grid;
        grid-template-columns: 5.6rem minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--momo-border-light, #e5dccd);
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    #usersTableBody td:last-child {
        border-bottom: 0;
    }

    #usersTableBody td::before {
        color: var(--momo-text-tertiary, #9a8f80);
        font-family: var(--momo-font-mono, monospace);
        font-size: 11px;
        font-weight: 800;
    }

    #usersTableBody td:nth-child(1)::before { content: "帳號"; }
    #usersTableBody td:nth-child(2)::before { content: "名稱"; }
    #usersTableBody td:nth-child(3)::before { content: "信箱"; }
    #usersTableBody td:nth-child(4)::before { content: "角色"; }
    #usersTableBody td:nth-child(5)::before { content: "狀態"; }
    #usersTableBody td:nth-child(6)::before { content: "建立"; }
    #usersTableBody td:nth-child(7)::before { content: "更新"; }
    #usersTableBody td:nth-child(8)::before { content: "操作"; }

    #usersTableBody td[colspan] {
        display: block;
    }

    #usersTableBody td[colspan]::before {
        content: none;
    }

    #usersTableBody .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4 user-management-page">
    <div class="row mb-4 user-management-head">
        <div class="col">
            <h2 class="mb-0">
                <i class="fas fa-users-cog me-2"></i>用戶管理
            </h2>
            <p class="text-muted mb-0">守住帳號權限，避免錯誤操作影響業績流程。</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" onclick="showAddUserModal()">
                <i class="fas fa-user-plus me-2"></i>新增用戶
            </button>
        </div>
    </div>

    <!-- 用戶列表 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="fas fa-list me-2"></i>用戶列表</span>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="showInactive" onchange="loadUsers()">
                <label class="form-check-label" for="showInactive">顯示停用帳號</label>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="usersTable">
                    <thead class="user-table-head">
                        <tr>
                            <th>帳號</th>
                            <th>顯示名稱</th>
                            <th>電子郵件</th>
                            <th>角色</th>
                            <th>狀態</th>
                            <th>建立時間</th>
                            <th>最後更新</th>
                            <th class="text-end">操作</th>
                        </tr>
                    </thead>
                    <tbody id="usersTableBody">
                        <tr>
                            <td colspan="8" class="text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">載入中...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 新增/編輯用戶 Modal -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">新增用戶</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="userId">

                    <div class="mb-3">
                        <label for="username" class="form-label">帳號 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="username" required>
                        <div class="form-text">帳號建立後無法修改</div>
                    </div>

                    <div class="mb-3" id="passwordGroup">
                        <label for="password" class="form-label">密碼 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password">
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('password')">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-outline-secondary" type="button" onclick="generatePassword()">
                                <i class="fas fa-key"></i>
                            </button>
                        </div>
                        <div class="form-text" id="passwordRequirements"></div>
                    </div>

                    <div class="mb-3" id="confirmPasswordGroup">
                        <label for="confirmPassword" class="form-label">確認密碼 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="confirmPassword">
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('confirmPassword')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="invalid-feedback">兩次輸入的密碼不一致</div>
                    </div>

                    <div class="mb-3">
                        <label for="displayName" class="form-label">顯示名稱</label>
                        <input type="text" class="form-control" id="displayName">
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">電子郵件</label>
                        <input type="email" class="form-control" id="email">
                    </div>

                    <div class="mb-3">
                        <label for="role" class="form-label">角色 <span class="text-danger">*</span></label>
                        <select class="form-select" id="role" required>
                            <option value="user">一般用戶</option>
                            <option value="manager">管理者</option>
                            <option value="admin">系統管理員</option>
                        </select>
                        <div class="form-text">
                            <strong>系統管理員</strong>：完整權限<br>
                            <strong>管理者</strong>：資料匯入、廠商管理、報表<br>
                            <strong>一般用戶</strong>：僅可查看報表
                        </div>
                    </div>

                    <div class="mb-3" id="isActiveGroup" style="display: none;">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="isActive" checked>
                            <label class="form-check-label" for="isActive">啟用帳號</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveUser()">
                    <i class="fas fa-save me-1"></i>儲存
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 重設密碼 Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">重設密碼</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>為用戶 <strong id="resetPasswordUsername"></strong> 設定新密碼：</p>
                <input type="hidden" id="resetPasswordUserId">
                <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>
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('newPassword')">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-outline-secondary" type="button" onclick="generatePasswordForReset()">
                            <i class="fas fa-key"></i>
                        </button>
                    </div>
                    <div class="form-text" id="resetPasswordRequirements"></div>
                </div>
                <div class="mb-3">
                    <label for="confirmNewPassword" class="form-label">確認新密碼 <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="confirmNewPassword" required>
                        <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('confirmNewPassword')">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="invalid-feedback" id="confirmPasswordError">兩次輸入的密碼不一致</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" onclick="resetPassword()">
                    <i class="fas fa-key me-1"></i>重設密碼
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 刪除確認 Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header user-modal-alert user-modal-alert--danger">
                <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>確認停用</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>確定要停用用戶 <strong id="deleteUsername"></strong> 嗎？</p>
                <p class="text-muted mb-0">停用後，該用戶將無法登入系統。</p>
                <input type="hidden" id="deleteUserId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="deleteUser()">
                    <i class="fas fa-user-slash me-1"></i>停用
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 權限編輯 Modal -->
<div class="modal fade" id="permissionsModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header user-modal-alert user-modal-alert--info">
                <h5 class="modal-title">
                    <i class="fas fa-shield-alt me-2"></i>編輯權限: <span id="permissionsUsername"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="permissionsUserId">

                <!-- 快速設定區 -->
                <div class="card mb-3 user-permission-toolbar">
                    <div class="card-body py-2">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <label class="form-label mb-0 me-2">快速設定:</label>
                            </div>
                            <div class="col-auto">
                                <select class="form-select form-select-sm" id="roleTemplateSelect" style="width: 160px;">
                                    <option value="">套用角色模板</option>
                                    <option value="manager">管理者模板</option>
                                    <option value="user">一般用戶模板</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-sm btn-outline-primary" onclick="applyRoleTemplate()">
                                    <i class="fas fa-magic me-1"></i>套用
                                </button>
                            </div>
                            <div class="col-auto ms-auto">
                                <button class="btn btn-sm btn-outline-secondary me-1" onclick="selectAllPermissions()">
                                    <i class="fas fa-check-square me-1"></i>全選
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="clearAllPermissions()">
                                    <i class="fas fa-square me-1"></i>清除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 權限列表區 -->
                <div id="permissionsContainer">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">載入中...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-muted me-auto">
                    <small><i class="fas fa-info-circle me-1"></i>管理員 (admin) 自動擁有所有權限</small>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-info" onclick="savePermissions()">
                    <i class="fas fa-save me-1"></i>儲存權限
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let userModal, resetPasswordModal, deleteModal, permissionsModal;
    let passwordRequirements = [];
    let allPermissions = [];  // 所有權限定義

    document.addEventListener('DOMContentLoaded', function() {
        userModal = new bootstrap.Modal(document.getElementById('userModal'));
        resetPasswordModal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
        deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        permissionsModal = new bootstrap.Modal(document.getElementById('permissionsModal'));

        loadPasswordRequirements();
        loadUsers();
    });

    async function loadPasswordRequirements() {
        try {
            const response = await fetch('/api/password_requirements');
            const data = await response.json();
            if (data.success) {
                passwordRequirements = data.data;
                const requirementsHtml = passwordRequirements.map(r => `<li>${r}</li>`).join('');
                document.getElementById('passwordRequirements').innerHTML = `<ul class="mb-0 ps-3">${requirementsHtml}</ul>`;
                document.getElementById('resetPasswordRequirements').innerHTML = `<ul class="mb-0 ps-3">${requirementsHtml}</ul>`;
            }
        } catch (error) {
            console.error('載入密碼要求失敗:', error);
        }
    }

    async function loadUsers() {
        const includeInactive = document.getElementById('showInactive').checked;
        const tbody = document.getElementById('usersTableBody');

        tbody.innerHTML = `
            <tr>
                <td colspan="8" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">載入中...</span>
                    </div>
                </td>
            </tr>
        `;

        try {
            const response = await fetch(`/api/users?include_inactive=${includeInactive}`);
            const data = await response.json();

            if (data.success) {
                if (data.data.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted">
                                <i class="fas fa-users fa-2x mb-2"></i><br>
                                尚無用戶資料
                            </td>
                        </tr>
                    `;
                    return;
                }

                tbody.innerHTML = data.data.map(user => `
                    <tr class="${!user.is_active ? 'table-secondary' : ''}">
                        <td>
                            <i class="fas fa-user me-1"></i>
                            ${escapeHtml(user.username)}
                        </td>
                        <td>${escapeHtml(user.display_name || '-')}</td>
                        <td>${escapeHtml(user.email || '-')}</td>
                        <td>
                            <span class="user-role-badge user-role-badge--${getRoleBadgeTone(user.role)}">
                                ${escapeHtml(user.role_label)}
                            </span>
                        </td>
                        <td>
                            ${user.is_active
                                ? '<span class="user-status-badge is-active">啟用</span>'
                                : '<span class="user-status-badge is-inactive">停用</span>'
                            }
                        </td>
                        <td>${formatDateTime(user.created_at)}</td>
                        <td>${formatDateTime(user.updated_at)}</td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" onclick="showEditUserModal(${user.id})" title="編輯">
                                    <i class="fas fa-edit"></i>
                                </button>
                                ${user.role !== 'admin' ? `
                                    <button class="btn btn-outline-info" onclick="showPermissionsModal(${user.id}, '${escapeHtml(user.username)}', '${escapeHtml(user.display_name || user.username)}')" title="編輯權限">
                                        <i class="fas fa-shield-alt"></i>
                                    </button>
                                ` : ''}
                                <button class="btn btn-outline-warning" onclick="showResetPasswordModal(${user.id}, '${escapeHtml(user.username)}')" title="重設密碼">
                                    <i class="fas fa-key"></i>
                                </button>
                                ${user.is_active ? `
                                    <button class="btn btn-outline-danger" onclick="showDeleteModal(${user.id}, '${escapeHtml(user.username)}')" title="停用">
                                        <i class="fas fa-user-slash"></i>
                                    </button>
                                ` : ''}
                            </div>
                        </td>
                    </tr>
                `).join('');
            } else {
                showToast('載入失敗：' + data.message, 'danger');
            }
        } catch (error) {
            console.error('載入用戶列表失敗:', error);
            showToast('載入用戶列表失敗', 'danger');
        }
    }

    function showAddUserModal() {
        document.getElementById('userModalTitle').textContent = '新增用戶';
        document.getElementById('userId').value = '';
        document.getElementById('username').value = '';
        document.getElementById('username').disabled = false;
        document.getElementById('password').value = '';
        document.getElementById('confirmPassword').value = '';
        document.getElementById('confirmPassword').classList.remove('is-invalid');
        document.getElementById('passwordGroup').style.display = 'block';
        document.getElementById('confirmPasswordGroup').style.display = 'block';
        document.getElementById('displayName').value = '';
        document.getElementById('email').value = '';
        document.getElementById('role').value = 'user';
        document.getElementById('isActive').checked = true;
        document.getElementById('isActiveGroup').style.display = 'none';
        userModal.show();
    }

    async function showEditUserModal(userId) {
        try {
            const response = await fetch(`/api/users/${userId}`);
            const data = await response.json();

            if (data.success) {
                const user = data.data;
                document.getElementById('userModalTitle').textContent = '編輯用戶';
                document.getElementById('userId').value = user.id;
                document.getElementById('username').value = user.username;
                document.getElementById('username').disabled = true;
                document.getElementById('password').value = '';
                document.getElementById('confirmPassword').value = '';
                document.getElementById('passwordGroup').style.display = 'none';
                document.getElementById('confirmPasswordGroup').style.display = 'none';
                document.getElementById('displayName').value = user.display_name || '';
                document.getElementById('email').value = user.email || '';
                document.getElementById('role').value = user.role;
                document.getElementById('isActive').checked = user.is_active;
                document.getElementById('isActiveGroup').style.display = 'block';
                userModal.show();
            } else {
                showToast('載入用戶資料失敗：' + data.message, 'danger');
            }
        } catch (error) {
            console.error('載入用戶資料失敗:', error);
            showToast('載入用戶資料失敗', 'danger');
        }
    }

    async function saveUser() {
        const userId = document.getElementById('userId').value;
        const isEdit = !!userId;

        const userData = {
            username: document.getElementById('username').value.trim(),
            display_name: document.getElementById('displayName').value.trim(),
            email: document.getElementById('email').value.trim(),
            role: document.getElementById('role').value
        };

        if (!isEdit) {
            userData.password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const confirmInput = document.getElementById('confirmPassword');

            if (!userData.password) {
                showToast('請輸入密碼', 'warning');
                return;
            }

            if (!confirmPassword) {
                showToast('請輸入確認密碼', 'warning');
                confirmInput.classList.add('is-invalid');
                return;
            }

            if (userData.password !== confirmPassword) {
                showToast('兩次輸入的密碼不一致', 'warning');
                confirmInput.classList.add('is-invalid');
                return;
            }

            confirmInput.classList.remove('is-invalid');
        } else {
            userData.is_active = document.getElementById('isActive').checked;
        }

        if (!userData.username) {
            showToast('請輸入帳號', 'warning');
            return;
        }

        try {
            const url = isEdit ? `/api/users/${userId}` : '/api/users';
            const method = isEdit ? 'PUT' : 'POST';

            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify(userData)
            });

            const data = await response.json();

            if (data.success) {
                userModal.hide();
                showToast(data.message, 'success');
                loadUsers();
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            console.error('儲存用戶失敗:', error);
            showToast('儲存用戶失敗', 'danger');
        }
    }

    function showResetPasswordModal(userId, username) {
        document.getElementById('resetPasswordUserId').value = userId;
        document.getElementById('resetPasswordUsername').textContent = username;
        document.getElementById('newPassword').value = '';
        document.getElementById('confirmNewPassword').value = '';
        document.getElementById('confirmNewPassword').classList.remove('is-invalid');
        resetPasswordModal.show();
    }

    async function resetPassword() {
        const userId = document.getElementById('resetPasswordUserId').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmNewPassword').value;
        const confirmInput = document.getElementById('confirmNewPassword');

        if (!newPassword) {
            showToast('請輸入新密碼', 'warning');
            return;
        }

        if (!confirmPassword) {
            showToast('請輸入確認密碼', 'warning');
            confirmInput.classList.add('is-invalid');
            return;
        }

        if (newPassword !== confirmPassword) {
            showToast('兩次輸入的密碼不一致', 'warning');
            confirmInput.classList.add('is-invalid');
            return;
        }

        confirmInput.classList.remove('is-invalid');

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

            const data = await response.json();

            if (data.success) {
                resetPasswordModal.hide();
                showToast('密碼重設成功', 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            console.error('重設密碼失敗:', error);
            showToast('重設密碼失敗', 'danger');
        }
    }

    function showDeleteModal(userId, username) {
        document.getElementById('deleteUserId').value = userId;
        document.getElementById('deleteUsername').textContent = username;
        deleteModal.show();
    }

    async function deleteUser() {
        const userId = document.getElementById('deleteUserId').value;

        try {
            const response = await fetch(`/api/users/${userId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            });

            const data = await response.json();

            if (data.success) {
                deleteModal.hide();
                showToast('用戶已停用', 'success');
                loadUsers();
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            console.error('停用用戶失敗:', error);
            showToast('停用用戶失敗', 'danger');
        }
    }

    function generatePassword() {
        const password = generateRandomPassword();
        document.getElementById('password').value = password;
        document.getElementById('password').type = 'text';
        document.getElementById('confirmPassword').value = password;
        document.getElementById('confirmPassword').type = 'text';
        document.getElementById('confirmPassword').classList.remove('is-invalid');
    }

    function generatePasswordForReset() {
        const password = generateRandomPassword();
        document.getElementById('newPassword').value = password;
        document.getElementById('newPassword').type = 'text';
        document.getElementById('confirmNewPassword').value = password;
        document.getElementById('confirmNewPassword').type = 'text';
        document.getElementById('confirmNewPassword').classList.remove('is-invalid');
    }

    function generateRandomPassword() {
        const lowercase = 'abcdefghijklmnopqrstuvwxyz';
        const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const digits = '0123456789';
        const special = '!@#$%^&*';

        let password = '';
        password += uppercase[Math.floor(Math.random() * uppercase.length)];
        password += lowercase[Math.floor(Math.random() * lowercase.length)];
        password += digits[Math.floor(Math.random() * digits.length)];
        password += special[Math.floor(Math.random() * special.length)];

        const allChars = lowercase + uppercase + digits + special;
        for (let i = 0; i < 8; i++) {
            password += allChars[Math.floor(Math.random() * allChars.length)];
        }

        return password.split('').sort(() => Math.random() - 0.5).join('');
    }

    function togglePasswordVisibility(inputId) {
        const input = document.getElementById(inputId);
        input.type = input.type === 'password' ? 'text' : 'password';
    }

    function getRoleBadgeTone(role) {
        switch (role) {
            case 'admin': return 'danger';
            case 'manager': return 'warning';
            default: return 'muted';
        }
    }

    function formatDateTime(dateStr) {
        if (!dateStr) return '-';
        const date = new Date(dateStr);
        return date.toLocaleString('zh-TW', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    function escapeHtml(str) {
        if (!str) return '';
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    function showToast(message, type = 'info') {
        // 簡單的 toast 實現
        const toastContainer = document.querySelector('.toast-container') || createToastContainer();
        const toast = document.createElement('div');
        toast.className = `toast align-items-center user-toast user-toast--${type}`;
        toast.setAttribute('role', 'alert');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${escapeHtml(message)}</div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;
        toastContainer.appendChild(toast);
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
        toast.addEventListener('hidden.bs.toast', () => toast.remove());
    }

    function createToastContainer() {
        const container = document.createElement('div');
        container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
        document.body.appendChild(container);
        return container;
    }

    // ==========================================
    // 權限管理相關函數
    // ==========================================

    async function showPermissionsModal(userId, username, displayName) {
        document.getElementById('permissionsUserId').value = userId;
        document.getElementById('permissionsUsername').textContent = displayName || username;
        document.getElementById('roleTemplateSelect').value = '';

        // 顯示載入中
        document.getElementById('permissionsContainer').innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">載入中...</span>
                </div>
            </div>
        `;

        permissionsModal.show();

        try {
            // 載入用戶權限詳細資訊
            const response = await fetch(`/api/users/${userId}/permissions`);
            const data = await response.json();

            if (data.success) {
                allPermissions = data.data.permissions;
                renderPermissions(allPermissions);
            } else {
                showToast('載入權限失敗：' + data.message, 'danger');
                permissionsModal.hide();
            }
        } catch (error) {
            console.error('載入權限失敗:', error);
            showToast('載入權限失敗', 'danger');
            permissionsModal.hide();
        }
    }

    function renderPermissions(permissionsByCategory) {
        const container = document.getElementById('permissionsContainer');

        // 分類圖示對應
        const categoryIcons = {
            '首頁/看板': 'fas fa-chart-line',
            '報表': 'fas fa-file-alt',
            '活動看板': 'fas fa-bullhorn',
            '廠商缺貨': 'fas fa-industry',
            '匯入': 'fas fa-file-import',
            '系統': 'fas fa-cogs',
            '其他': 'fas fa-folder'
        };

        let html = '<div class="accordion" id="permissionsAccordion">';

        permissionsByCategory.forEach((categoryData, index) => {
            const category = categoryData.category;
            const permissions = categoryData.permissions;
            const icon = categoryIcons[category] || 'fas fa-folder';
            const collapseId = `collapse-${index}`;
            const grantedCount = permissions.filter(p => p.granted).length;

            html += `
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button ${index > 0 ? 'collapsed' : ''}" type="button"
                                data-bs-toggle="collapse" data-bs-target="#${collapseId}">
                            <i class="${icon} me-2"></i>
                            <span class="flex-grow-1">${escapeHtml(category)}</span>
                            <span class="user-status-badge ${grantedCount > 0 ? 'is-info' : 'is-muted'} me-2">
                                ${grantedCount} / ${permissions.length}
                            </span>
                        </button>
                    </h2>
                    <div id="${collapseId}" class="accordion-collapse collapse ${index === 0 ? 'show' : ''}"
                         data-bs-parent="#permissionsAccordion">
                        <div class="accordion-body">
                            <div class="row">
            `;

            permissions.forEach(perm => {
                html += `
                    <div class="col-md-6 mb-2">
                        <div class="form-check">
                            <input class="form-check-input permission-checkbox" type="checkbox"
                                   id="perm-${perm.code}" data-code="${perm.code}"
                                   ${perm.granted ? 'checked' : ''}>
                            <label class="form-check-label" for="perm-${perm.code}">
                                <strong>${escapeHtml(perm.name)}</strong>
                                ${perm.description ? `<br><small class="text-muted">${escapeHtml(perm.description)}</small>` : ''}
                            </label>
                        </div>
                    </div>
                `;
            });

            html += `
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });

        html += '</div>';
        container.innerHTML = html;
    }

    function getSelectedPermissions() {
        const checkboxes = document.querySelectorAll('.permission-checkbox:checked');
        return Array.from(checkboxes).map(cb => cb.dataset.code);
    }

    function selectAllPermissions() {
        document.querySelectorAll('.permission-checkbox').forEach(cb => cb.checked = true);
        updateCategoryBadges();
    }

    function clearAllPermissions() {
        document.querySelectorAll('.permission-checkbox').forEach(cb => cb.checked = false);
        updateCategoryBadges();
    }

    function updateCategoryBadges() {
        // 更新每個分類的徽章顯示
        const accordion = document.getElementById('permissionsAccordion');
        if (!accordion) return;

        accordion.querySelectorAll('.accordion-item').forEach(item => {
            const checkboxes = item.querySelectorAll('.permission-checkbox');
            const checkedCount = item.querySelectorAll('.permission-checkbox:checked').length;
            const badge = item.querySelector('.user-status-badge');
            if (badge) {
                badge.textContent = `${checkedCount} / ${checkboxes.length}`;
                badge.className = `user-status-badge ${checkedCount > 0 ? 'is-info' : 'is-muted'} me-2`;
            }
        });
    }

    async function applyRoleTemplate() {
        const role = document.getElementById('roleTemplateSelect').value;
        if (!role) {
            showToast('請選擇角色模板', 'warning');
            return;
        }

        const userId = document.getElementById('permissionsUserId').value;

        try {
            const response = await fetch(`/api/users/${userId}/apply_role_template`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ role: role })
            });

            const data = await response.json();

            if (data.success) {
                showToast(data.message, 'success');
                // 重新載入權限
                showPermissionsModal(userId, '', document.getElementById('permissionsUsername').textContent);
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            console.error('套用角色模板失敗:', error);
            showToast('套用角色模板失敗', 'danger');
        }
    }

    async function savePermissions() {
        const userId = document.getElementById('permissionsUserId').value;
        const permissions = getSelectedPermissions();

        try {
            const response = await fetch(`/api/users/${userId}/permissions`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ permissions: permissions })
            });

            const data = await response.json();

            if (data.success) {
                permissionsModal.hide();
                showToast(data.message, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            console.error('儲存權限失敗:', error);
            showToast('儲存權限失敗', 'danger');
        }
    }

    // 監聽權限勾選變化，更新徽章
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('permission-checkbox')) {
            updateCategoryBadges();
        }
    });
</script>
{% endblock %}