src/views/LandingView.js

import { createRoom, joinRoom, checkNicknameConflict } from "../services/classroom.js";
import { generateMonsterSVG, MONSTER_DEFS } from "../utils/monsterUtils.js";

// ... (renderLandingView remains same) ...
export function renderLandingView() {
    // Select Decor Monsters
    // Left: Genesis Dragon (L3_AAA), Right: Gundam (L3_BAA) - or fallbacks
    const mLeft = MONSTER_DEFS.find(m => m.id === 'L3_AAA') || MONSTER_DEFS.find(m => m.stage === 3);
    const mRight = MONSTER_DEFS.find(m => m.id === 'L3_BAA') || MONSTER_DEFS.find(m => m.stage === 3);

    const svgLeft = generateMonsterSVG(mLeft);
    const svgRight = generateMonsterSVG(mRight);

    return `

    <div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden">

        

        <!-- Decor Monsters (Desktop Only) -->

        <div class="absolute bottom-10 left-10 w-48 h-48 hidden lg:block pointer-events-none" 

             style="animation: float 6s ease-in-out infinite;">

             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">

                ${svgLeft}

             </div>

        </div>

        <div class="absolute bottom-10 right-10 w-48 h-48 hidden lg:block pointer-events-none" 

             style="animation: float 8s ease-in-out infinite reverse;">

             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(59,130,246,0.5)]">

                ${svgRight}

             </div>

        </div>



        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700 z-10">

            <h1 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter whitespace-nowrap">

                VIBECODING-怪獸成長營

            </h1>

            

            <!-- Student Join Form -->

            <div id="student-form" class="space-y-6">

                <div>

                    <label class="block text-gray-400 text-sm font-bold mb-2">教室代碼 (Room Code)</label>

                    <input type="text" id="room-code-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-cyan-500 transition-colors" placeholder="1234">

                </div>

                <div>

                    <label class="block text-gray-400 text-sm font-bold mb-2">您的暱稱 (Nickname)</label>

                    <input type="text" id="nickname-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-purple-500 transition-colors" placeholder="小明">

                </div>

                <button id="join-btn" class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg transform transition hover:scale-105 active:scale-95 shadow-lg shadow-cyan-500/30">

                    進入教室

                </button>

            </div>



            <!-- Instructor Toggle -->

            <div class="mt-8 pt-6 border-t border-gray-700 text-center">

                <button id="instructor-mode-btn" class="text-gray-500 text-sm hover:text-cyan-400 transition-colors">

                    我是講師 (Instructor Mode)

                </button>

            </div>

        </div>

        

        <!-- Conflict Modal Container -->

        <div id="conflict-modal-container"></div>



        <style>

            @keyframes float {

                0%, 100% { transform: translateY(0); }

                50% { transform: translateY(-20px); }

            }

        </style>

    </div>

    `;
}

export function setupLandingEvents(navigateTo) {
    const joinBtn = document.getElementById('join-btn');
    const instructorBtn = document.getElementById('instructor-mode-btn');

    const handleJoin = async (roomCode, nickname, forceNew = false) => {
        try {
            const { userId, nickname: finalNickname } = await joinRoom(roomCode, nickname, forceNew);

            // Save Session
            localStorage.setItem('vibecoding_user_id', userId);
            localStorage.setItem('vibecoding_room_code', roomCode);
            localStorage.setItem('vibecoding_nickname', finalNickname);

            navigateTo('student');
            return true;
        } catch (error) {
            alert('加入失敗: ' + error.message);
            return false;
        }
    };

    joinBtn.addEventListener('click', async () => {
        const roomCode = document.getElementById('room-code-input').value.trim();
        const nickname = document.getElementById('nickname-input').value.trim();

        if (!roomCode || !nickname) {
            alert('請輸入教室代碼和暱稱');
            return;
        }

        joinBtn.textContent = '檢查中...';
        joinBtn.disabled = true;

        try {
            // Check conflicts first
            const conflicts = await checkNicknameConflict(roomCode, nickname);

            if (conflicts.length > 0) {
                // Show Conflict Modal
                showConflictModal(conflicts, nickname, roomCode, navigateTo, handleJoin);
                joinBtn.textContent = '進入教室';
                joinBtn.disabled = false;
                return;
            }

            // No conflict -> direct join
            await handleJoin(roomCode, nickname);

        } catch (e) {
            console.error(e);
            alert("檢查失敗: " + e.message);
            joinBtn.textContent = '進入教室';
            joinBtn.disabled = false;
        }
    });

    instructorBtn.addEventListener('click', () => {
        // Clear any previous admin referer to ensure clean state
        localStorage.removeItem('vibecoding_admin_referer');
        navigateTo('instructor');
    });
}

function showConflictModal(conflicts, originalNickname, roomCode, navigateTo, handleJoin) {
    const container = document.getElementById('conflict-modal-container');

    const userListHTML = conflicts.map(u => `

        <button onclick="window.selectUser('${u.nickname}')" 

            class="w-full text-left bg-gray-700 hover:bg-gray-600 p-4 rounded-xl flex justify-between items-center group transition-all border border-gray-600 hover:border-cyan-500">

            <span class="font-bold text-white group-hover:text-cyan-300 transition-colors">${u.nickname}</span>

            <span class="text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded">舊學員</span>

        </button>

    `).join('');

    container.innerHTML = `

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

            <div class="bg-gray-800 w-full max-w-md rounded-2xl border border-gray-700 shadow-2xl overflow-hidden animate-[fadeIn_0.3s_ease-out]">

                <div class="p-6 border-b border-gray-700 bg-gray-900/50">

                    <h3 class="text-xl font-bold text-white mb-1">發現相同暱稱</h3>

                    <p class="text-gray-400 text-sm">教室裡已經有叫「${originalNickname}」的同學了，請問您是？</p>

                </div>

                

                <div class="p-6 space-y-3 max-h-[60vh] overflow-y-auto">

                    ${userListHTML}

                    

                    <div class="relative flex py-2 items-center">

                        <div class="flex-grow border-t border-gray-700"></div>

                        <span class="flex-shrink-0 mx-4 text-gray-500 text-xs">或者</span>

                        <div class="flex-grow border-t border-gray-700"></div>

                    </div>



                    <button onclick="window.createNewUser()" 

                        class="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500 text-white font-bold p-4 rounded-xl shadow-lg shadow-green-900/40 transform transition hover:scale-[1.02] flex items-center justify-center space-x-2">

                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">

                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />

                        </svg>

                        <span>我是新同學，建立新分身</span>

                    </button>

                </div>



                <div class="p-4 bg-gray-900/50 border-t border-gray-700 flex justify-end">

                    <button onclick="document.getElementById('conflict-modal-container').innerHTML=''" 

                        class="text-gray-400 hover:text-white text-sm px-4 py-2">

                        取消

                    </button>

                </div>

            </div>

        </div>

    `;

    // Bind temporary window functions for the modal buttons
    window.selectUser = async (targetNickname) => {
        // Log in as existing
        document.getElementById('conflict-modal-container').innerHTML = ''; // Close modal
        await handleJoin(roomCode, targetNickname, false);
    };

    window.createNewUser = async () => {
        // Create new
        document.getElementById('conflict-modal-container').innerHTML = ''; // Close modal
        await handleJoin(roomCode, originalNickname, true); // Force new
    };
}