var state = {
    token: "",
    ecId: 0,
    from: "",
    mcId: 0,
    mcName: "",
    mcType: 0,
    beginSecond: null,
    endSecond: null,
    coiId: 0,
    coiName: "",
    teamNum: 0,
    nickName: "",
    coiRs: [],
    
    configParam: {
        labelName: "昵称",
        labelOrg: "组织",
        subTitle: ""
    },
    
    introduce: { title: "", content: "" },
    activityRules: { title: "", content: "" },
    
    mcState: 0
};

function initSignupPage() {
    const params = new URLSearchParams(window.location.search);
    state.token = params.get('token') || '';
    state.ecId = params.get('id') || 0;
    state.from = params.get('from') || '';
    
    window.cardfunc.init(state.token, state.ecId);
    window.cardfunc.getCardConfig(onConfigLoaded);
    
    // Bind events
    // Dropdown logic is already in HTML script, but we can enhance or replace it.
    // For now, I'll assume the HTML script functions are available or I should override them 
    // if I want to connect them to state.
    // The HTML script defines `selectOption` globally. I should probably piggyback on that or replace it.
    
    // Let's expose necessary functions to window so HTML can call them
    window.selectOption = selectOption;
    window.openConfirm = openConfirm;
}

function onConfigLoaded(config) {
    // Load logic from signup.vue loadConfig
    const pageConfig = window.cardfunc.parseCardConfig(config['signup']);
    if(pageConfig) {
        // Load params
        const param = pageConfig.param;
        if (param) {
            if (param.labelName) state.configParam.labelName = param.labelName;
            if (param.labelOrg) state.configParam.labelOrg = param.labelOrg;
            if (param.subTitle) state.configParam.subTitle = param.subTitle;
        }
        
        // Load introduce/rules if needed to display (HTML structure is static, but content could be dynamic)
        // The new UI seems to have static "Match Intro". 
        // If we want to use dynamic intro, we need to inject it.
        // For now, let's stick to the static UI as per "migration to new UI" request, 
        // unless the new UI requires dynamic text. The HTML provided has hardcoded intro.
        // I will leave it static for now to preserve the new design.
    }
    
    // Fetch Data
    getCardDetailQuery();
}

function getCardDetailQuery() {
    uni.request({
        url: window.apiCardDetailQuery,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": state.token
        },
        method: "POST",
        data: { ecId: state.ecId },
        success: (res) => {
            const data = res.data.data;
            if(data) {
                state.mcType = data.mcType;
                state.mcId = data.mcId;
                state.mcName = data.mcName;
                state.beginSecond = data.beginSecond;
                state.endSecond = data.endSecond;
                state.coiId = data.coiId;
                state.coiName = data.coiName;
                state.teamNum = data.teamNum;
                state.nickName = data.nickName;
                
                state.mcState = window.tools.checkMcState(state.beginSecond, state.endSecond);
                
                // Update Time UI
                updateTimeUI();
                
                // Fetch Dropdown Options
                getOnlineMcSignUpDetail();
                
                // Pre-fill form if data exists
                if(state.nickName) {
                    document.getElementById('userName').value = state.nickName;
                }
                if(state.coiId > 0 && state.coiName) {
                    // We will update dropdown after fetching details
                }
            }
        }
    });
}

function getOnlineMcSignUpDetail() {
    uni.request({
        url: window.apiOnlineMcSignUpDetail,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": state.token,
        },
        method: "POST",
        data: { mcId: state.mcId },
        success: (res) => {
            const data = res.data.data;
            if(data) {
                state.coiRs = data.coiRs;
                if (!state.nickName && data.name) {
                    state.nickName = data.name;
                    document.getElementById('userName').value = state.nickName;
                }
                renderDropdown();
                
                // If user already selected a team (re-entering page)
                if(state.coiId > 0) {
                    // Find team name if not set
                    const team = state.coiRs.find(t => t.coiId == state.coiId);
                    if(team) selectOption(team.coiId, team.coiName, true); // true = skip UI toggle
                }
            }
        }
    });
}

function updateTimeUI() {
    // Format: 11.28 08:00 - 11.30 18:00
    const timeStr = window.tools.fmtMcTime2(state.beginSecond, state.endSecond);
    // Need to find the element. The HTML has "11.28 08:00 - 11.30 18:00" hardcoded.
    // I'll search for the element containing the time.
    // The HTML structure: <span class="font-bold text-gray-800 font-mono truncate">...</span>
    // I should give it an ID in the HTML update step, but for logic file I'll assume I can access it.
    // I'll use document.querySelector to find it relative to "比赛时间" text or add an ID in Step 10.
    // Let's assume I will add ID `matchTimeDisplay` to the span.
    const el = document.getElementById('matchTimeDisplay');
    if(el) el.innerText = timeStr;
}

function renderDropdown() {
    const ul = document.querySelector('#dropdownMenu ul');
    if(!ul) return;
    
    let html = '';
    state.coiRs.forEach(team => {
        html += `
            <li onclick="selectOption('${team.coiId}', '${team.coiName}')" class="px-4 py-3 hover:bg-blue-50 cursor-pointer flex items-center justify-between border-b border-gray-50 last:border-0 transition-colors group/item">
                <div class="flex items-center">
                    <i class="fas fa-user-friends text-blue-200 mr-2 group-hover/item:text-primary transition-colors"></i>
                    <span class="font-bold">${team.coiName}</span>
                </div>
                <i class="fas fa-check text-primary opacity-0 check-icon" data-val="${team.coiId}"></i>
            </li>
        `;
    });
    ul.innerHTML = html;
}

function selectOption(value, text, skipToggle = false) {
    state.coiId = value;
    state.coiName = text;
    
    document.getElementById('teamSelect').value = value;
    const selectedText = document.getElementById('selectedText');
    selectedText.innerHTML = '<i class="fas fa-user-friends text-primary mr-2"></i>' + text;
    selectedText.classList.remove('text-gray-400', 'font-normal');
    selectedText.classList.add('text-gray-800', 'font-bold');
    
    // Update check icons
    const icons = document.querySelectorAll('.check-icon');
    icons.forEach(icon => {
        if(icon.getAttribute('data-val') == value) {
            icon.classList.remove('opacity-0');
        } else {
            icon.classList.add('opacity-0');
        }
    });

    if(!skipToggle) {
        // closeDropdown is defined in HTML script. 
        // Ideally I should move that logic here or call it.
        // Since I'm injecting logic.js at the bottom, I can call global functions from HTML.
        if(window.closeDropdown) window.closeDropdown();
    }
}

function openConfirm() {
    if(!window.checkToken(state.token)) return;
    
    const nameInput = document.getElementById('userName');
    state.nickName = nameInput.value.trim();
    
    if (!state.nickName) {
        uni.showToast({ title: `请填写${state.configParam.labelName}`, icon: 'none' });
        return;
    }
    if (!state.coiId) {
        uni.showToast({ title: `请选择${state.configParam.labelOrg}`, icon: 'none' });
        return;
    }
    
    document.getElementById('confirmName').innerText = state.nickName;
    document.getElementById('confirmTeamText').innerText = state.coiName;
    document.getElementById('confirmModal').classList.remove('hidden');
}

// Overwrite the HTML's onclick="location.href='#'" for confirm button
// I'll bind the event dynamically in init or replace the HTML in Step 10.
// Better to bind dynamically.
function confirmSignup() {
    uni.request({
        url: window.apiOnlineMcSignUp,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": state.token,
        },
        method: "POST",
        data: {
            mcId: state.mcId,
            coiId: state.coiId,
            selectTeam: 0, // Default
            nickName: state.nickName
        },
        success: (res) => {
            if (window.checkResCode(res)) {
                uni.showToast({ title: '比赛报名成功！', icon: 'none' });
                setTimeout(() => {
                    const queryString = `token=${state.token}&id=${state.ecId}`;
                    window.location.href = `ranklist.html?${queryString}`;
                }, 1500);
            }
        },
        fail: () => {
            uni.showToast({ title: '出错了，报名失败', icon: 'none' });
        }
    });
}

// Hook up confirm button
document.addEventListener('DOMContentLoaded', () => {
    // Wait for init
    const confirmBtn = document.querySelector('#confirmModal button:last-child');
    if(confirmBtn) {
        confirmBtn.removeAttribute('onclick'); // Remove inline handler
        confirmBtn.addEventListener('click', confirmSignup);
    }
});