<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyfence - ระบบจัดการสำหรับผู้ดูแล</title>
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Sarabun', sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: white;
            padding: 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .logo {
            height: 40px;
        }

        .nav-buttons {
            display: flex;
            gap: 1rem;
        }

        .content-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .tab {
            padding: 0.5rem 1rem;
            border: none;
            background: #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
        }

        .tab.active {
            background: #4A90E2;
            color: white;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }

        th,
        td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f8f9fa;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #4A90E2;
            color: white;
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .close {
            float: right;
            cursor: pointer;
            font-size: 1.5rem;
        }

        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4A90E2;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="loadingScreen">
        <div class="spinner"></div>
    </div>

    <div class="header">
        <img src="https://www.cyfence.com/wp-content/uploads/2021/09/%E0%B8%A5%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88.jpg "alt="Cyfence Logo" class="logo">
        <div class="header-content">
            <h1>ระบบจัดการสำหรับผู้ดูแล</h1>
            <div id="userInfo" style="color: #666; margin-left: 20px;"></div>
        </div>
        <div class="nav-buttons">
            <button onclick="window.location.href='dashboard.html'" class="btn btn-primary">ไปยังหน้า Dashboard</button>
            <button onclick="logout()" class="btn btn-danger">ออกจากระบบ</button>
        </div>
    </div>

    <div class="container">
        <div class="tabs">
            <button class="tab active" onclick="switchTab('users')">จัดการผู้ใช้งาน</button>
            <button class="tab" onclick="switchTab('logs')">ประวัติการใช้งาน</button>
        </div>

        <div id="usersTab" class="content-card">
            <button class="btn btn-primary" onclick="showAddUserModal()">เพิ่มผู้ใช้งานใหม่</button>
            <table id="usersTable">
                <thead>
                    <tr>
                        <th>อีเมล</th>
                        <th>ชื่อที่แสดง</th>
                        <th>บทบาท</th>
                        <th>สถานะ</th>
                        <th>การดำเนินการ</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div id="logsTab" class="content-card" style="display: none;">
            <table id="logsTable">
                <thead>
                    <tr>
                        <th>เวลา</th>
                        <th>ผู้ใช้งาน</th>
                        <th>การกระทำ</th>
                        <th>รายละเอียด</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- Modal เพิ่มผู้ใช้งาน -->
    <div id="addUserModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addUserModal')">&times;</span>
            <h2>เพิ่มผู้ใช้งานใหม่</h2>
            <form id="addUserForm" onsubmit="handleAddUser(event)">
                <div class="form-group">
                    <label>อีเมล</label>
                    <input type="email" id="newEmail" required>
                </div>
                <div class="form-group">
                    <label>รหัสผ่าน</label>
                    <input type="password" id="newPassword" required>
                </div>
                <div class="form-group">
                    <label>ชื่อที่แสดง</label>
                    <input type="text" id="newDisplayName" required>
                </div>
                <div class="form-group">
                    <label>บทบาท</label>
                    <select id="newRole" required>
                        <option value="user">ผู้ใช้งานทั่วไป</option>
                        <option value="admin">ผู้ดูแลระบบ</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">เพิ่มผู้ใช้งาน</button>
            </form>
        </div>
    </div>

    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>

    <script>
        // Initialize Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyAcb9q1eX1QM9Gl_W6U9WZNbeg6M-uyhpk",
            authDomain: "cyfencedevbyken.firebaseapp.com",
            projectId: "cyfencedevbyken",
            storageBucket: "cyfencedevbyken.appspot.com",
            messagingSenderId: "632813871756",
            appId: "1:632813871756:web:57d674643f258ddd2e11a9",
            measurementId: "G-1EJNKSHNQ3"
        };

        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();
        const db = firebase.firestore();

        // ตรวจสอบสิทธิ์การเข้าถึง
        auth.onAuthStateChanged(async (user) => {
            if (!user) {
                window.location.href = 'login.html';
                return;
            }

            try {
                const userDoc = await db.collection('users').doc(user.uid).get();
                const userData = userDoc.data();

                if (!userData || userData.role !== 'admin') {
                    alert('คุณไม่มีสิทธิ์เข้าถึงหน้านี้');
                    window.location.href = 'dashboard.html';
                    return;
                }

                document.getElementById('loadingScreen').style.display = 'none';
                loadUsers();
                loadLogs();
            } catch (error) {
                console.error('Error checking admin status:', error);
                alert('เกิดข้อผิดพลาดในการตรวจสอบสิทธิ์');
            }
        });

        // โหลดข้อมูลผู้ใช้
        async function loadUsers() {
            const usersTable = document.querySelector('#usersTable tbody');
            usersTable.innerHTML = '';

            try {
                const snapshot = await db.collection('users').get();
                snapshot.forEach(doc => {
                    const user = doc.data();
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${user.email}</td>
                        <td>${user.displayName || '-'}</td>
                        <td>${user.role === 'admin' ? 'ผู้ดูแลระบบ' : 'ผู้ใช้งานทั่วไป'}</td>
                        <td>${user.isApproved ? 'อนุมัติแล้ว' : 'รอการอนุมัติ'}</td>
                        <td>
                            ${!user.isApproved ?
                            `<button class="btn btn-success" onclick="approveUser('${doc.id}')">อนุมัติ</button>` :
                            ''
                        }
                            <button class="btn btn-danger" onclick="deleteUser('${doc.id}')">ลบ</button>
                        </td>
                    `;
                    usersTable.appendChild(row);
                });
            } catch (error) {
                console.error('Error loading users:', error);
                alert('เกิดข้อผิดพลาดในการโหลดข้อมูลผู้ใช้');
            }
        }

        // โหลดประวัติการใช้งาน
        async function loadLogs() {
            const logsTable = document.querySelector('#logsTable tbody');
            logsTable.innerHTML = '';

            try {
                const snapshot = await db.collection('logs')
                    .orderBy('timestamp', 'desc')
                    .limit(100)
                    .get();

                for (const doc of snapshot.docs) {
                    const log = doc.data();
                    const userDoc = await db.collection('users').doc(log.userId).get();
                    const userData = userDoc.data();

                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${log.timestamp.toDate().toLocaleString('th-TH')}</td>
                        <td>${userData ? userData.email : log.userId}</td>
                        <td>${log.action}</td>
                        <td>${log.details || '-'}</td>
                    `;
                    logsTable.appendChild(row);
                }
            } catch (error) {
                console.error('Error loading logs:', error);
                alert('เกิดข้อผิดพลาดในการโหลดประวัติการใช้งาน');
            }
        }

        // เพิ่มผู้ใช้ใหม่
        async function handleAddUser(event) {
            event.preventDefault();
            const email = document.getElementById('newEmail').value;
            const password = document.getElementById('newPassword').value;
            const displayName = document.getElementById('newDisplayName').value;
            const role = document.getElementById('newRole').value;

            try {
                const userCredential = await firebase.auth().createUserWithEmailAndPassword(email, password);
                await db.collection('users').doc(userCredential.user.uid).set({
                    email,
                    displayName,
                    role,
                    isApproved: true,
                    createdAt: new Date(),
                    updatedAt: new Date()
                });

                await logActivity(auth.currentUser.uid, 'create_user', `Created user: ${email}`);
                alert('เพิ่มผู้ใช้งานสำเร็จ');
                closeModal('addUserModal');
                loadUsers();
            } catch (error) {
                console.error('Error adding user:', error);
                alert('เกิดข้อผิดพลาดในการเพิ่มผู้ใช้: ' + error.message);
            }
        }

        // อนุมัติผู้ใช้
        async function approveUser(userId) {
            try {
                await db.collection('users').doc(userId).update({
                    isApproved: true,
                    updatedAt: new Date()
                });

                const userDoc = await db.collection('users').doc(userId).get();
                const userData = userDoc.data();
                await logActivity(auth.currentUser.uid, 'approve_user', `Approved user: ${userData.email}`);

                alert('อนุมัติผู้ใช้งานสำเร็จ');
                loadUsers();
            } catch (error) {
                console.error('Error approving user:', error);
                alert('เกิดข้อผิดพลาดในการอนุมัติผู้ใช้');
            }
        }

        // ลบผู้ใช้
        async function deleteUser(userId) {
            if (!confirm('คุณแน่ใจหรือไม่ที่จะลบผู้ใช้งานนี้?')) {
                return;
            }

            try {
                const userDoc = await db.collection('users').doc(userId).get();
                const userData = userDoc.data();

                // ลบข้อมูลจาก Firestore
                await db.collection('users').doc(userId).delete();

                // บันทึก log
                await logActivity(auth.currentUser.uid, 'delete_user', `Deleted user: ${userData.email}`);

                alert('ลบผู้ใช้งานสำเร็จ');
                loadUsers();
            } catch (error) {
                console.error('Error deleting user:', error);
                alert('เกิดข้อผิดพลาดในการลบผู้ใช้');
            }
        }

        // บันทึก log กิจกรรม
        async function logActivity(userId, action, details = null) {
            try {
                await db.collection('logs').add({
                    userId: userId,
                    action: action,
                    details: details,
                    timestamp: new Date(),
                    userAgent: navigator.userAgent
                });
            } catch (error) {
                console.error('Error logging activity:', error);
            }
        }

        // ฟังก์ชัน logout
        async function logout() {
            try {
                await logActivity(auth.currentUser.uid, 'logout');
                await auth.signOut();
                window.location.href = 'login.html';
            } catch (error) {
                console.error('Logout error:', error);
                alert('เกิดข้อผิดพลาดในการออกจากระบบ');
            }
        }

        // สลับ tab
        function switchTab(tabName) {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');

            const usersTab = document.getElementById('usersTab');
            const logsTab = document.getElementById('logsTab');

            if (tabName === 'users') {
                usersTab.style.display = 'block';
                logsTab.style.display = 'none';
                loadUsers();
            } else {
                usersTab.style.display = 'none';
                logsTab.style.display = 'block';
                loadLogs();
            }
        }

        // แสดง modal เพิ่มผู้ใช้
        function showAddUserModal() {
            document.getElementById('addUserModal').style.display = 'block';
        }

        // ปิด modal
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // ปิด modal เมื่อคลิกพื้นที่นอก modal
        window.onclick = function (event) {
            const modals = document.getElementsByClassName('modal');
            for (let modal of modals) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            }
        }

        // เพิ่ม event listener สำหรับการกด ESC เพื่อปิด modal
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                const modals = document.getElementsByClassName('modal');
                for (let modal of modals) {
                    modal.style.display = 'none';
                }
            }
        });

        // ฟังก์ชันค้นหาผู้ใช้
        function searchUsers(searchTerm) {
            const rows = document.querySelectorAll('#usersTable tbody tr');
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                if (text.includes(searchTerm.toLowerCase())) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // เพิ่ม event listener สำหรับการค้นหาแบบ real-time
        document.getElementById('searchInput')?.addEventListener('input', (e) => {
            searchUsers(e.target.value);
        });

        // แก้ไขข้อมูลผู้ใช้
        async function editUser(userId) {
            try {
                const userDoc = await db.collection('users').doc(userId).get();
                const userData = userDoc.data();

                // แสดง modal แก้ไขข้อมูล
                const modal = document.getElementById('editUserModal');
                document.getElementById('editDisplayName').value = userData.displayName || '';
                document.getElementById('editRole').value = userData.role || 'user';

                // บันทึกการแก้ไข
                document.getElementById('editUserForm').onsubmit = async (e) => {
                    e.preventDefault();

                    try {
                        await db.collection('users').doc(userId).update({
                            displayName: document.getElementById('editDisplayName').value,
                            role: document.getElementById('editRole').value,
                            updatedAt: new Date()
                        });

                        await logActivity(auth.currentUser.uid, 'edit_user', `Edited user: ${userData.email}`);
                        alert('แก้ไขข้อมูลสำเร็จ');
                        closeModal('editUserModal');
                        loadUsers();
                    } catch (error) {
                        console.error('Error updating user:', error);
                        alert('เกิดข้อผิดพลาดในการแก้ไขข้อมูล');
                    }
                };

                modal.style.display = 'block';
            } catch (error) {
                console.error('Error loading user data:', error);
                alert('เกิดข้อผิดพลาดในการโหลดข้อมูลผู้ใช้');
            }
        }

        // รีเซ็ตรหัสผ่าน
        async function resetPassword(userId) {
            try {
                const userDoc = await db.collection('users').doc(userId).get();
                const userData = userDoc.data();

                const newPassword = Math.random().toString(36).slice(-8); // สร้างรหัสผ่านสุ่ม
                await firebase.auth().sendPasswordResetEmail(userData.email);

                await logActivity(auth.currentUser.uid, 'reset_password', `Reset password for: ${userData.email}`);
                alert('ส่งอีเมลรีเซ็ตรหัสผ่านแล้ว');
            } catch (error) {
                console.error('Error resetting password:', error);
                alert('เกิดข้อผิดพลาดในการรีเซ็ตรหัสผ่าน');
            }
        }

        // โหลดข้อมูลเพิ่มเติมเมื่อเลื่อนถึงด้านล่าง
        let lastVisible = null;
        let isLoading = false;

        async function loadMoreLogs() {
            if (isLoading) return;

            try {
                isLoading = true;
                const logsTable = document.querySelector('#logsTable tbody');

                let query = db.collection('logs')
                    .orderBy('timestamp', 'desc')
                    .limit(50);

                if (lastVisible) {
                    query = query.startAfter(lastVisible);
                }

                const snapshot = await query.get();
                if (snapshot.empty) {
                    console.log('No more logs');
                    return;
                }

                lastVisible = snapshot.docs[snapshot.docs.length - 1];

                for (const doc of snapshot.docs) {
                    const log = doc.data();
                    const userDoc = await db.collection('users').doc(log.userId).get();
                    const userData = userDoc.data();

                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${log.timestamp.toDate().toLocaleString('th-TH')}</td>
                        <td>${userData ? userData.email : log.userId}</td>
                        <td>${log.action}</td>
                        <td>${log.details || '-'}</td>
                    `;
                    logsTable.appendChild(row);
                }
            } catch (error) {
                console.error('Error loading more logs:', error);
            } finally {
                isLoading = false;
            }
        }

        // เพิ่ม event listener สำหรับการเลื่อนหน้า
        window.addEventListener('scroll', () => {
            if (document.getElementById('logsTab').style.display === 'block') {
                if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100) {
                    loadMoreLogs();
                }
            }
        });

        // Export logs to CSV
        function exportLogsToCSV() {
            const table = document.getElementById('logsTable');
            let csv = [];
            const rows = table.querySelectorAll('tr');

            for (let i = 0; i < rows.length; i++) {
                let row = [], cols = rows[i].querySelectorAll('td, th');

                for (let j = 0; j < cols.length; j++) {
                    let data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ');
                    data = data.replace(/"/g, '""');
                    row.push('"' + data + '"');
                }
                csv.push(row.join(','));
            }

            const csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
            const downloadLink = document.createElement('a');
            downloadLink.download = 'activity_logs_' + new Date().toISOString() + '.csv';
            downloadLink.href = window.URL.createObjectURL(csvFile);
            downloadLink.style.display = 'none';
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
    </script>
</body>

</html>