src/views/InstructorAdminView.js

import { getInstructors, addInstructor, removeInstructor, checkInstructorPermission } from "../services/auth.js";
import { auth } from "../services/firebase.js";

export function renderInstructorAdminView() {
    return `

    <div class="min-h-screen p-6 pb-20">

        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">

            <div class="flex items-center space-x-4">

                <button id="back-instructor-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition-all">

                    ← 回講師端

                </button>

                <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-600">

                    講師權限管理

                </h1>

            </div>

            <button id="add-instructor-btn" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg">

                + 新增講師

            </button>

        </header>



        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden shadow-2xl">

            <table class="w-full text-left border-collapse">

                <thead>

                    <tr class="bg-gray-900/50">

                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">Email (帳號)</th>

                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">姓名</th>

                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">權限</th>

                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400 text-right">操作</th>

                    </tr>

                </thead>

                <tbody id="instructors-list">

                    <tr><td colspan="4" class="p-8 text-center text-gray-500">載入中...</td></tr>

                </tbody>

            </table>

        </div>



        <!-- Add/Edit Modal -->

        <div id="instructor-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">

            <div class="bg-gray-800 rounded-xl w-full max-w-lg border border-gray-700 shadow-2xl">

                <div class="p-6 border-b border-gray-700">

                    <h3 class="text-xl font-bold text-white">新增講師</h3>

                </div>

                <div class="p-6 space-y-4">

                    <div>

                        <label class="block text-gray-400 mb-1">Email (Google 帳號)</label>

                        <input type="email" id="input-email" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" placeholder="example@gmail.com">

                        <p class="text-xs text-yellow-500 mt-1">* 必須是有效的 Google 帳號 Email</p>

                    </div>

                    <div>

                        <label class="block text-gray-400 mb-1">顯示名稱</label>

                        <input type="text" id="input-name" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" placeholder="王小明">

                    </div>

                    <div>

                        <label class="block text-gray-400 mb-2">權限設定</label>

                        <div class="space-y-2">

                            <label class="flex items-center space-x-2">

                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="create_room" checked>

                                <span class="text-gray-300">建立教室 (Create Room)</span>

                            </label>

                            <label class="flex items-center space-x-2">

                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="manage_instructors">

                                <span class="text-gray-300">管理講師 (Manage Instructors)</span>

                            </label>

                            <label class="flex items-center space-x-2">

                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="add_question">

                                <span class="text-gray-300">管理題目 (Manage Questions)</span>

                            </label>

                        </div>

                    </div>

                </div>

                <div class="p-6 border-t border-gray-700 flex justify-end space-x-3">

                    <button onclick="document.getElementById('instructor-modal').classList.add('hidden')" class="px-4 py-2 text-gray-400 hover:text-white">取消</button>

                    <button id="save-instructor-btn" class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded font-bold">新增</button>

                </div>

            </div>

        </div>

    </div>

    `;
}

export function setupInstructorAdminEvents() {
    // Permission Check
    const user = auth.currentUser;
    if (!user) {
        alert("請先登入");
        window.location.hash = ''; // Back to Landing
        return;
    }

    checkInstructorPermission(user).then(inst => {
        if (!inst || !inst.permissions?.includes('manage_instructors')) {
            alert("您沒有權限管理講師");
            window.location.hash = 'instructor';
            return;
        }
        loadInstructorList();
    }).catch(e => {
        console.error(e);
        alert("權限驗證失敗");
        window.location.hash = 'instructor';
    });


    // Navigation
    document.getElementById('back-instructor-btn').addEventListener('click', () => {
        window.location.hash = 'instructor';
    });

    // Modal Handling
    document.getElementById('add-instructor-btn').addEventListener('click', () => {
        document.getElementById('input-email').value = '';
        document.getElementById('input-name').value = '';
        document.querySelectorAll('.perm-check').forEach(c => c.checked = true);
        document.getElementById('instructor-modal').classList.remove('hidden');
    });

    // Save Logic
    document.getElementById('save-instructor-btn').addEventListener('click', async () => {
        const email = document.getElementById('input-email').value.trim();
        const name = document.getElementById('input-name').value.trim();
        const permissions = Array.from(document.querySelectorAll('.perm-check:checked')).map(c => c.value);

        if (!email || !name) {
            alert("請填寫完整資訊");
            return;
        }

        try {
            await addInstructor(email, name, permissions);
            alert("新增成功");
            document.getElementById('instructor-modal').classList.add('hidden');
            loadInstructorList();
        } catch (e) {
            console.error(e);
            alert("新增失敗: " + e.message);
        }
    });

    // Global Helpers
    window.removeInstructorConfirm = async (email) => {
        if (confirm(`確定要移除講師權限 (${email}) 嗎？`)) {
            try {
                await removeInstructor(email);
                loadInstructorList();
            } catch (e) {
                console.error(e);
                alert("移除失敗: " + e.message);
            }
        }
    };
}

async function loadInstructorList() {
    const list = document.getElementById('instructors-list');
    list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-gray-500">載入中...</td></tr>';

    try {
        const instructors = await getInstructors();

        if (instructors.length === 0) {
            list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-gray-500">目前沒有其他講師</td></tr>';
            return;
        }

        list.innerHTML = instructors.map(inst => `

            <tr class="hover:bg-gray-700/50 transition-colors border-b border-gray-800">

                <td class="p-4 font-mono text-gray-300">

                    ${inst.email} 

                    ${inst.role === 'admin' ? '<span class="ml-2 text-xs bg-red-900 text-red-300 px-2 py-0.5 rounded border border-red-700">Admin</span>' : ''}

                </td>

                <td class="p-4 font-bold text-white">${inst.name}</td>

                <td class="p-4">

                    <div class="flex flex-wrap gap-1">

                        ${(inst.permissions || []).map(p => `

                            <span class="text-xs bg-indigo-900/50 text-indigo-300 px-2 py-0.5 rounded border border-indigo-700">${p}</span>

                        `).join('')}

                    </div>

                </td>

                <td class="p-4 text-right">

                    ${inst.role !== 'admin' ? `

                    <button onclick="window.removeInstructorConfirm('${inst.email}')" class="text-red-400 hover:text-white bg-red-900/20 hover:bg-red-600 px-3 py-1 rounded transition-colors text-sm">

                        移除

                    </button>

                    ` : '<span class="text-gray-600 text-sm">不可變更</span>'}

                </td>

            </tr>

        `).join('');

    } catch (e) {
        console.error(e);
        list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-red-500">載入失敗</td></tr>';
    }
}