// 后台管理JavaScript - 支持服务器和本地双模式

// 状态管理
let isLoggedIn = sessionStorage.getItem('isAdminLoggedIn') === 'true';
let authToken = sessionStorage.getItem('authToken') || '';

// DOM元素
const loginSection = document.getElementById('loginSection');
const adminPanel = document.getElementById('adminPanel');
const loginForm = document.getElementById('loginForm');
const logoutBtn = document.getElementById('logoutBtn');
const createListForm = document.getElementById('createListForm');
const rollCallListsDiv = document.getElementById('rollCallLists');
const rollCallRecordsDiv = document.getElementById('rollCallRecords');
const qrModal = document.getElementById('qrModal');
const qrCodeDiv = document.getElementById('qrCode');
const rollCallCodeSpan = document.getElementById('rollCallCode');

// QRCode实例
const qrCode = new SimpleQRCode();

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 显示运行模式
    const modeText = dataStorage.isServerMode ? '服务器模式' : '本地模式';
    const modeIndicator = document.getElementById('modeIndicator');
    
    if (modeIndicator) {
        modeIndicator.textContent = `当前运行模式: ${modeText}`;
        if (!dataStorage.isServerMode) {
            modeIndicator.textContent += ' (数据保存在浏览器本地)';
        }
    }
    
    console.log(`点名系统运行在: ${modeText}`);
    
    if (isLoggedIn) {
        showAdminPanel();
        loadLists();
        loadRecords();
    }
});

// 登录
loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
        const result = await dataStorage.login(username, password);
        
        isLoggedIn = true;
        authToken = result.token;
        sessionStorage.setItem('isAdminLoggedIn', 'true');
        sessionStorage.setItem('authToken', authToken);
        
        showAdminPanel();
        await loadLists();
        await loadRecords();
    } catch (error) {
        alert('登录失败：' + error.message);
    }
});

// 退出登录
logoutBtn.addEventListener('click', () => {
    isLoggedIn = false;
    authToken = '';
    sessionStorage.removeItem('isAdminLoggedIn');
    sessionStorage.removeItem('authToken');
    loginSection.style.display = 'block';
    adminPanel.style.display = 'none';
});

// 显示管理面板
function showAdminPanel() {
    loginSection.style.display = 'none';
    adminPanel.style.display = 'block';
}

// 加载点名列表
async function loadLists() {
    try {
        const lists = await dataStorage.getLists();
        renderLists(lists);
    } catch (error) {
        console.error('加载列表失败:', error);
        rollCallListsDiv.innerHTML = '<p style="color: red;">加载失败：' + error.message + '</p>';
    }
}

// 加载点名记录
async function loadRecords() {
    try {
        const records = await dataStorage.getRecords();
        renderRecords(records);
    } catch (error) {
        console.error('加载记录失败:', error);
        rollCallRecordsDiv.innerHTML = '<p style="color: red;">加载失败：' + error.message + '</p>';
    }
}

// 创建点名名单
createListForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const listName = document.getElementById('listName').value;
    const memberListText = document.getElementById('memberList').value;
    const members = memberListText.split('\n').filter(name => name.trim() !== '').map(name => name.trim());

    try {
        const newList = await dataStorage.createList(listName, members);
        
        // 清空表单
        createListForm.reset();
        
        // 重新加载列表
        await loadLists();
        
        // 显示二维码
        showQRCode(newList);
    } catch (error) {
        alert('创建失败：' + error.message);
    }
});

// 显示二维码
function showQRCode(list) {
    qrModal.style.display = 'block';
    rollCallCodeSpan.textContent = list.code;

    // 生成二维码URL
    let url;
    if (dataStorage.isServerMode) {
        // 服务器模式：使用当前域名
        url = `${window.location.origin}${window.location.pathname.replace('admin.html', 'index.html')}?code=${list.code}`;
    } else {
        // 本地模式：使用相对路径
        url = `index.html?code=${list.code}`;
    }
    
    qrCodeDiv.innerHTML = '';
    
    // 创建canvas元素
    const canvas = document.createElement('canvas');
    qrCodeDiv.appendChild(canvas);
    
    // 使用本地QRCode生成器
    try {
        qrCode.toCanvas(canvas, url, { 
            width: 200,
            margin: 2
        });
    } catch (error) {
        console.error('二维码生成错误:', error);
        qrCodeDiv.innerHTML = '<p style="color: red;">二维码生成失败</p>';
    }
}

// 关闭弹窗
document.querySelector('.close').addEventListener('click', () => {
    qrModal.style.display = 'none';
});

window.addEventListener('click', (e) => {
    if (e.target === qrModal) {
        qrModal.style.display = 'none';
    }
});

// 渲染点名列表
function renderLists(lists) {
    if (!lists || lists.length === 0) {
        rollCallListsDiv.innerHTML = '<p>暂无点名列表</p>';
        return;
    }

    rollCallListsDiv.innerHTML = lists.map(list => `
        <div class="list-item">
            <div class="list-item-header">
                <span class="list-item-title">${list.name}</span>
                <span class="list-item-code">编号：${list.code}</span>
            </div>
            <p>创建时间：${list.createdAt}</p>
            <p>成员数：${list.members.length} | 已点名：${list.members.filter(m => m.completed).length}</p>
            <div class="list-item-actions">
                <button class="btn btn-primary" onclick="showQRCodeById(${list.id})">查看二维码</button>
                <button class="btn btn-secondary" onclick="editList(${list.id})">编辑</button>
                <button class="btn btn-danger" onclick="deleteList(${list.id})">删除</button>
            </div>
        </div>
    `).join('');
}

// 显示二维码（通过ID）
async function showQRCodeById(id) {
    try {
        const lists = await dataStorage.getLists();
        const list = lists.find(l => l.id === id);
        if (list) {
            showQRCode(list);
        }
    } catch (error) {
        alert('获取列表失败：' + error.message);
    }
}

// 编辑名单
async function editList(id) {
    try {
        const lists = await dataStorage.getLists();
        const list = lists.find(l => l.id === id);
        if (!list) return;

        const newName = prompt('请输入新的名单名称：', list.name);
        if (newName === null) return;

        const newMembersText = prompt('请输入新的名单成员（每行一个姓名）：', list.members.map(m => m.name).join('\n'));
        if (newMembersText === null) return;

        const newMembers = newMembersText.split('\n').filter(name => name.trim() !== '').map(name => name.trim());

        await dataStorage.updateList(id, newName, newMembers);
        await loadLists();
    } catch (error) {
        alert('编辑失败：' + error.message);
    }
}

// 删除名单
async function deleteList(id) {
    if (confirm('确定要删除这个点名名单吗？')) {
        try {
            await dataStorage.deleteList(id);
            await loadLists();
        } catch (error) {
            alert('删除失败：' + error.message);
        }
    }
}

// 渲染点名记录
function renderRecords(records) {
    if (!records || records.length === 0) {
        rollCallRecordsDiv.innerHTML = '<p>暂无点名记录</p>';
        return;
    }

    rollCallRecordsDiv.innerHTML = records.map(record => `
        <div class="record-item">
            <div class="record-header">
                <span class="record-name">${record.name}</span>
                <span class="record-time">${record.timestamp}</span>
            </div>
            <p>名单：${record.listName}</p>
            <p>编号：${record.code}</p>
        </div>
    `).join('');
}

// 暴露函数到全局
window.showQRCodeById = showQRCodeById;
window.editList = editList;
window.deleteList = deleteList;