APP_DESCRIPTION_HTML = """
<div style="display: flex; flex-direction: column; gap: 20px;">
    <div><h3>🎥 Watch the Demo</h3></div>
    <div style="display: flex; justify-content: center; margin-top: 20px;">
        <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/E3IvBN8SqdA"
            frameborder="0"
            style="border-radius:12px; width:100%; max-width:560px;"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>
    <div>
        <h3>🧩 What This App Does</h3>
        <p>This dashboard lets you watch (or join!) teams of Large Language Models (LLMs) play <strong>Codenames</strong> against each other.
        Two teams — <strong>Red</strong> and <strong>Blue</strong> — face off in a 4v4 format. Each team has a <strong>Boss</strong> and <strong>three Agents</strong> working together to identify their team's words before the other side does.</p>

        <h3>🤖 How It Works</h3>
        <ul>
            <li><strong>LLM Teams:</strong> You can assemble teams using different LLMs (e.g., GPT, Claude, Gemini, or OpenSource models...).</li>
            <li><strong>Human Mode:</strong> You can also jump in as a <strong>Boss</strong> yourself, giving clues to your AI teammates and seeing how well they interpret your hints.</li>
            <li><strong>Observation Mode:</strong> Prefer to just watch? Sit back and enjoy the game unfold, analyzing how different models reason, cooperate, and sometimes hilariously misfire.</li>
        </ul>

        <h3>🧠 Why It's Interesting</h3>
        <ul>
            <li><strong>Compare LLM reasoning styles:</strong> See how different models interpret subtle associations and language cues.</li>
            <li><strong>Team Dynamics:</strong> Watch how collaboration (or confusion) emerges between AIs when they have to coordinate across multiple turns.</li>
            <li><strong>Human-AI Interaction:</strong> Experiment with leading a team of LLMs and discover how clearly (or creatively) you need to communicate to win.</li>
            <li><strong>Benchmarking & Analytics:</strong> All games are stored in a database. The Stats section includes model win/loss rates, performance comparisons between model families and leaderboards</li>
        </ul>

        <h3>🕹️ Main Features</h3>
        <ul>
            <li>Create and customize teams with any available LLMs.</li>
            <li>Switch between <strong>AI vs AI</strong> and <strong>Human&AI vs AI</strong> modes.</li>
            <li>View reasoning and chat logs for each model's decisions.</li>
        </ul>
    </div>
</div>
"""

# Game rules HTML
EXAMPLE_GAME_RULES_HTML = """
<div style="display: flex; flex-direction: column; gap: 20px;">
    <div>
        <h3>👥 Team Roles</h3>
        <p>Each team has four members with distinct responsibilities:</p>
        <ul>
            <li><strong>1 Boss</strong> 🎯: The only player who can see the color-coded board. Provides clues to guide the team.</li>
            <li><strong>1 Captain</strong> 🧭: Coordinates team reasoning, synthesizes suggestions, and makes final word selections.</li>
            <li><strong>2 Players</strong> 💭: Collaborate with the Captain, propose interpretations and associations.</li>
        </ul>

        <h3>📋 What Each Role Sees</h3>
        <ul>
            <li><strong>Boss:</strong> Sees the full color-coded board (like the image on the left) showing which words belong to their team, neutral words, and the killer word.</li>
            <li><strong>Captain & Players:</strong> Only see the words <em>without colors</em> — they must guess based on the Boss's clues!</li>
        </ul>

        <h3>🎮 How a Turn Works</h3>
        <h4>1️⃣ Boss Gives a Clue</h4>
        <p>The Red Boss (seeing the board) might say:</p>
        <blockquote style="background: #f8f9fa; padding: 10px; border-left: 4px solid #dc3545;">
            <strong>"Atmosphere: 2"</strong>
        </blockquote>
        <p>This clue suggests 2 red words are related to "atmosphere". Looking at the board, the Boss is thinking of:</p>
        <ul>
            <li><strong>AIR</strong> (part of the atmosphere)</li>
            <li><strong>SPACE</strong> (beyond the atmosphere)</li>
        </ul>
        <p><em>⚠️ Important: The clue must be ONE word and ONE number. The number indicates how many words relate to that clue.</em></p>

        <h4>2️⃣ Team Discussion</h4>
        <p>The Captain and Players discuss without seeing the colors:</p>
        <ul>
            <li><strong>Player 1:</strong> "AIR feels like the safest bet — it's literally the atmosphere."</li>
            <li><strong>Player 2:</strong> "SPACE could connect because it's outside the atmosphere."</li>
        </ul>

        <h4>3️⃣ Captain Makes Final Selection</h4>
        <p>The Captain decides which words to touch, in order:</p>
        <ol>
            <li>AIR ✅ (Red - Correct!)</li>
            <li>SPACE ✅ (Red - Correct!)</li>
        </ol>
        <p>The team can stop after any correct guess or continue up to the number given (+1 bonus from previous turns if applicable).</p>

        <h3>⚠️ Mistakes to Avoid</h3>
        <ul>
            <li>If the team guesses <strong>STAFF</strong> (black - killer word), the game <strong>immediately ends</strong> and they <strong>lose</strong>!</li>
            <li>If they guess <strong>WALL</strong> (blue - opponent's word), their turn ends and the Blue team gets that word.</li>
            <li>If they guess <strong>SATURN</strong> (beige - neutral), their turn simply ends.</li>
        </ul>

        <h3>🏆 Winning the Game</h3>
        <p>The game ends when:</p>
        <ul>
            <li>✅ <strong>A team finds all their colored words</strong> → That team wins!</li>
            <li>❌ <strong>A team touches the killer word (STAFF)</strong> → That team loses immediately!</li>
        </ul>

        <h3>💡 Strategy Tips</h3>
        <p><strong>For the Boss:</strong></p>
        <ul>
            <li>Try to link multiple words with creative clues</li>
            <li>Avoid clues that might lead to the killer word or opponent's words</li>
            <li>Think about word associations your team might make</li>
        </ul>
        <p><strong>For Captain & Players:</strong></p>
        <ul>
            <li>Discuss all possible interpretations</li>
            <li>Consider which words are risky</li>
            <li>Don't be afraid to stop early to avoid the killer word</li>
            <li>The Captain has final say, but should listen to all suggestions</li>
        </ul>
    </div>
</div>
"""

# Game board description HTML
EXAMPLE_GAME_BOARD_HTML = """
<div style="display: flex; flex-direction: column; gap: 20px;">
    <div><h3>🎯 Example Game Board</h3></div>
    <div>
        <p>Below is a sample Codenames board showing the <strong>Boss's view</strong> with color-coded words:</p>
        <ul>
            <li><strong style="color: #dc3545;">Red squares</strong> = Red team's words</li>
            <li><strong style="color: #0d6efd;">Blue squares</strong> = Blue team's words</li>
            <li><strong style="color: #6c757d;">Beige squares</strong> = Neutral words (innocent bystanders)</li>
            <li><strong style="color: #212529;">Black square</strong> = Killer word (instant loss if touched!)</li>
        </ul>
        <p><strong>Remember:</strong> Only the <strong>Boss</strong> sees these colors (image above). The <strong>Captain</strong> and <strong>Players</strong> only see the words (image below)!</p>
    </div>
</div>
"""

GAME_RULES_HTML = """
<div class="rules-content">
    <div class="rules-carousel-container">
        <button class="carousel-btn carousel-btn-prev" aria-label="Previous">‹</button>
        <div class="rules-carousel">
            <div class="rules-carousel-track">
                <!-- Card 1: Objective -->
                <div class="rule-card rule-card-objective">
                    <div class="rule-card-header">
                        <span class="rule-icon">🎯</span>
                        <h3>Objective</h3>
                    </div>
                    <p>
                        <strong>Goal:</strong> Be the first team to identify all your team's words on the board 
                        before your opponents, while avoiding the killer word that ends the game instantly!
                    </p>
                </div>

                <!-- Card 2: Teams & Roles -->
                <div class="rule-card rule-card-teams">
                    <div class="rule-card-header">
                        <span class="rule-icon">👥</span>
                        <h3>Teams & Roles</h3>
                    </div>
                    <div class="rule-list">
                        <div class="rule-item">
                            <strong>Two Teams:</strong> Red 🔴 and Blue 🔵 compete against each other.
                        </div>
                        <div class="rule-item">
                            <strong>Three Roles per team:</strong>
                            <ul class="role-list">
                                <li><span class="role-highlight boss-highlight">Boss</span> - Sees all words and gives clues</li>
                                <li><span class="role-highlight captain-highlight">Captain</span> - Leads guessing and discussion</li>
                                <li><span class="role-highlight player-highlight">Player</span> - Participates in guessing</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- Card 3: Board Setup -->
                <div class="rule-card rule-card-setup">
                    <div class="rule-card-header">
                        <span class="rule-icon">🗺️</span>
                        <h3>Board Setup</h3>
                    </div>
                    <p>The board contains 25 words with hidden identities:</p>
                    <div class="word-distribution">
                        <div class="distribution-item team-color-red">
                            <strong>9 words</strong> belong to one team (starting team)
                        </div>
                        <div class="distribution-item team-color-blue">
                            <strong>8 words</strong> belong to the other team
                        </div>
                        <div class="distribution-item neutral-color">
                            <strong>7 neutral words</strong> (bystanders)
                        </div>
                        <div class="distribution-item killer-color">
                            <strong>1 killer word</strong> (assassin) - avoid at all costs!
                        </div>
                    </div>
                </div>
                
                <!-- Card 4: Gameplay -->
                <div class="rule-card rule-card-gameplay">
                    <div class="rule-card-header">
                        <span class="rule-icon">🎲</span>
                        <h3>How to Play</h3>
                    </div>
                    <ol class="gameplay-steps">
                        <li>
                            <strong>Boss gives a clue:</strong> One word + a number (e.g., "Ocean 2" 
                            means 2 words relate to "ocean")
                        </li>
                        <li>
                            <strong>Team discusses:</strong> Captain and Player debate which words 
                            match the clue
                        </li>
                        <li>
                            <strong>Make guesses:</strong> Team can guess up to (clue number + 1) words
                        </li>
                        <li>
                            <strong>Reveal results:</strong>
                            <div class="reveal-outcomes">
                                <div class="outcome-item success">✓ Your team's word = continue guessing</div>
                                <div class="outcome-item opponent">✗ Opponent's word = turn ends, helps them</div>
                                <div class="outcome-item neutral">○ Neutral word = turn ends</div>
                                <div class="outcome-item killer">☠ Killer word = GAME OVER, you lose!</div>
                            </div>
                        </li>
                        <li>
                            <strong>Pass turn:</strong> Team can stop guessing at any time to play it safe
                        </li>
                    </ol>
                </div>
                
                <!-- Card 5: Winning -->
                <div class="rule-card rule-card-winning">
                    <div class="rule-card-header">
                        <span class="rule-icon">🏆</span>
                        <h3>Winning Conditions</h3>
                    </div>
                    <div class="rule-list">
                        <div class="rule-item success-item">
                            <strong>Victory:</strong> Identify all your team's words before the opponents
                        </div>
                        <div class="rule-item danger-item">
                            <strong>Instant Loss:</strong> Select the killer word (assassin) at any time
                        </div>
                    </div>
                </div>
                
                <!-- Card 6: Strategy Tips -->
                <div class="rule-card rule-card-tips">
                    <div class="rule-card-header">
                        <span class="rule-icon">💡</span>
                        <h3>Strategy Tips</h3>
                    </div>
                    <ul class="tips-list">
                        <li>Boss: Give multi-word clues to be efficient, but avoid ambiguity</li>
                        <li>Team: Discuss thoroughly but watch out for overthinking</li>
                        <li>Consider stopping early if uncertain - a wrong guess helps opponents!</li>
                        <li>Pay attention to opponent clues - they reveal safe/dangerous words</li>
                    </ul>
                </div>
            </div>
        </div>
        <button class="carousel-btn carousel-btn-next" aria-label="Next">›</button>
    </div>
    
    <div class="carousel-indicators">
        <button class="carousel-indicator active" aria-label="Slide 1"></button>
        <button class="carousel-indicator" aria-label="Slide 2"></button>
        <button class="carousel-indicator" aria-label="Slide 3"></button>
        <button class="carousel-indicator" aria-label="Slide 4"></button>
        <button class="carousel-indicator" aria-label="Slide 5"></button>
        <button class="carousel-indicator" aria-label="Slide 6"></button>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.rules-carousel-track');
    const prevBtn = document.querySelector('.carousel-btn-prev');
    const nextBtn = document.querySelector('.carousel-btn-next');
    const indicators = document.querySelectorAll('.carousel-indicator');
    const cards = document.querySelectorAll('.rule-card');
    
    if (!track || !prevBtn || !nextBtn) return;
    
    let currentIndex = 0;
    const totalCards = cards.length;
    
    function updateCarousel() {
        const offset = -currentIndex * 100;
        track.style.transform = `translateX(${offset}%)`;
        
        indicators.forEach((indicator, index) => {
            if (index === currentIndex) {
                indicator.classList.add('active');
            } else {
                indicator.classList.remove('active');
            }
        });
        
        prevBtn.disabled = currentIndex === 0;
        nextBtn.disabled = currentIndex === totalCards - 1;
    }
    
    function goToSlide(index) {
        currentIndex = index;
        updateCarousel();
    }
    
    prevBtn.addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            updateCarousel();
        }
    });
    
    nextBtn.addEventListener('click', () => {
        if (currentIndex < totalCards - 1) {
            currentIndex++;
            updateCarousel();
        }
    });
    
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            goToSlide(index);
        });
    });
    
    updateCarousel();
    
    document.addEventListener('keydown', (e) => {
        const rulesAccordion = document.getElementById('rules_accordion');
        if (!rulesAccordion || rulesAccordion.style.display === 'none') return;
        
        if (e.key === 'ArrowLeft' && currentIndex > 0) {
            currentIndex--;
            updateCarousel();
        } else if (e.key === 'ArrowRight' && currentIndex < totalCards - 1) {
            currentIndex++;
            updateCarousel();
        }
    });
});
</script>
"""


JS = r"""
function initCarousel() {

    function forceDarkMode() {
        // Set dark mode on the root elements
        const gradioContainer = document.querySelector('.gradio-container');
        if (gradioContainer) {
            gradioContainer.classList.add('dark');
            gradioContainer.setAttribute('data-theme', 'dark');
        }
        
        // Set dark mode on document root
        document.documentElement.setAttribute('data-theme', 'dark');
        document.documentElement.style.colorScheme = 'dark';
        
        // Set dark mode on body
        document.body.setAttribute('data-theme', 'dark');
        document.body.classList.add('dark');
        
        // Force dark color scheme
        const style = document.createElement('style');
        style.textContent = `
            :root {
                color-scheme: dark !important;
            }
            .gradio-container {
                color-scheme: dark !important;
            }
            body {
                background-color: #0b0f19 !important;
                color: #ffffff !important;
            }
        `;
        document.head.appendChild(style);
    }
    
    // Apply dark mode immediately
    forceDarkMode();
    
    // Also apply after DOM is fully loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', forceDarkMode);
    }
    
    // Re-apply dark mode when Gradio updates the DOM
    const observer = new MutationObserver(forceDarkMode);
    observer.observe(document.body, { childList: true, subtree: true });
    
    // --- Carousel setup ---
    function waitForElements(selectors, callback) {
        const interval = setInterval(() => {
            const allExist = selectors.every(sel => document.querySelector(sel));
            if (allExist) {
                clearInterval(interval);
                callback();
            }
        }, 100);
    }

    waitForElements(
        ['.rules-carousel-track', '.carousel-btn-prev', '.carousel-btn-next'],
        function() {
            const track = document.querySelector('.rules-carousel-track');
            const prevBtn = document.querySelector('.carousel-btn-prev');
            const nextBtn = document.querySelector('.carousel-btn-next');
            const indicators = document.querySelectorAll('.carousel-indicator');
            const cards = document.querySelectorAll('.rule-card');
            
            let currentIndex = 0;
            const totalCards = cards.length;

            function updateCarousel() {
                const offset = -currentIndex * 100;
                track.style.transform = `translateX(${offset}%)`;

                indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === currentIndex);
                });

                prevBtn.disabled = currentIndex === 0;
                nextBtn.disabled = currentIndex === totalCards - 1;
            }

            prevBtn.addEventListener('click', () => {
                if (currentIndex > 0) {
                    currentIndex--;
                    updateCarousel();
                }
            });

            nextBtn.addEventListener('click', () => {
                if (currentIndex < totalCards - 1) {
                    currentIndex++;
                    updateCarousel();
                }
            });

            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    currentIndex = index;
                    updateCarousel();
                });
            });

            updateCarousel();
        }
    );

    // --- Boss name helpers (attach to global window) ---
    window.showBossNameInput = function(team) {
        console.log(team);
        if (team === 'red') {
            const btn = document.getElementById('red_boss_btn');
            const cancel_blue_btn = document.getElementById('cancel_blue_boss_btn');
            if (btn) btn.click();
            if (cancel_blue_btn) cancel_blue_btn.click();
            setTimeout(() => {
                const red_boss_input = document.getElementById('red_boss_input');
                if (red_boss_input) {
                    red_boss_input.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    red_boss_input.focus();
                }
            }, 200);
        } else if (team === 'blue') {
            const btn = document.getElementById('blue_boss_btn');
            const cancel_red_btn = document.getElementById('cancel_red_boss_btn');
            if (btn) btn.click();
            if (cancel_red_btn) cancel_red_btn.click();
            setTimeout(() => {
                const blue_boss_input = document.getElementById('blue_boss_input');
                if (blue_boss_input) {
                    blue_boss_input.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    blue_boss_input.focus();
                }
            }, 200);
        }
    };

    window.refreshStats = function() {
        console.log("aooo");
        const btn = document.getElementById('refresh_btn');
        if (btn) btn.click();
    };

    // --- Tab navigation setup ---
    function setupTabNavigation() {
        // Wait for tab buttons to be rendered
        setTimeout(() => {
            const navLinks = document.querySelectorAll('.nav-link');
            
            navLinks.forEach((link) => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    
                    const tabId = link.getAttribute('data-tab-id');
                    
                    // Find the tab button using data-tab-id attribute
                    const tabButton = document.querySelector(`button[data-tab-id="${tabId}_tab"]`);
                    
                    if (tabButton) {
                        // Click the actual tab button
                        tabButton.click();
                        
                        // Update active state on nav links
                        navLinks.forEach((l) => l.classList.remove('active'));
                        link.classList.add('active');
                    } else {
                        console.log('Tab button not found for id:', tabId);
                    }
                });
            });
        }, 500);
    }

    setupTabNavigation();

    return "Carousel + BossName + TabNavigation JS initialized";
}
"""

JS_BTN = """
    () => {
        // Hide all "Play as Boss" buttons when first message is sent
        const bossBtns = document.querySelectorAll('.play-as-boss-btn');
        bossBtns.forEach(btn => {
            btn.style.display = 'none';
        });
    }
"""

CODENAMES_WORDS = [
    "AGENT", "AFRICA", "AIR", "ALIEN", "ALPS", "AMAZON", "AMBULANCE",
    "AMERICA", "ANGEL", "ANTARCTICA", "APPLE", "ARM", "ATLANTIS", "AUSTRALIA",
    "AZTEC", "BACK", "BALL", "BAND", "BANK", "BAR", "BARK", "BAT", "BATTERY",
    "BEACH", "BEAR", "BEAT", "BED", "BEIJING", "BELL", "BELT", "BERLIN",
    "BERMUDA", "BERRY", "BILL", "BLOCK", "BOARD", "BOLT", "BOMB",
    "BOND", "BOOM", "BOOT", "BOTTLE", "BOW", "BOX", "BRIDGE", "BRUSH", "BUCK", "BUFFALO", "BUG", "BUGLE",
    "BUTTON", "CALF", "CANADA", "CAP", "CAPITAL", "CAR", "CARD", "CARROT", "CASINO", "CAST",
    "CAT", "CELL", "CENTAUR", "CENTER", "CHAIR", "CHANGE", "CHARGE", "CHECK", "CHEST", "CHICK",
    "CHINA", "CHOCOLATE", "CHURCH", "CIRCLE", "CLIFF", "CLOAK", "CLUB", "CODE", "COLD", "COMIC",
    "COMPOUND", "CONCERT", "CONDUCTOR", "CONTRACT", "COOK", "COPPER", "COTTON", "COURT", "COVER", "CRANE",
    "CRASH", "CRICKET", "CROSS", "CROWN", "CYCLE", "CZECH", "DANCE", "DATE", "DAY", "DEATH",
    "DECK", "DEGREE", "DIAMOND", "DICE", "DINOSAUR", "DISEASE", "DOCTOR", "DOG", "DRAFT", "DRAGON",
    "DRESS", "DRILL", "DROP", "DUCK", "DWARF", "EAGLE", "EGYPT", "EMBASSY", "ENGINE", "ENGLAND",
    "EUROPE", "EYE", "FACE", "FAIR", "FALL", "FAN", "FENCE", "FIELD", "FIGHTER", "FIGURE",
    "FILE", "FILM", "FIRE", "FISH", "FLUTE", "FLY", "FOOT", "FORCE", "FOREST", "FORK",
    "FRANCE", "GAME", "GAS", "GENIUS", "GERMANY", "GHOST", "GIANT", "GLASS", "GLOVE", "GOLD",
    "GRACE", "GRASS", "GREECE", "GREEN", "GROUND", "HAM", "HAND", "HAWK", "HEAD", "HEART",
    "HELICOPTER", "HIMALAYAS", "HOLE", "HOLLYWOOD", "HONEY", "HOOD", "HOOK", "HORN", "HORSE", "HORSESHOE",
    "HOSPITAL", "HOTEL", "ICE", "INDIA", "IRON", "IVORY", "JACK", "JAM", "JET", "JUPITER",
    "KANGAROO", "KETCHUP", "KEY", "KID", "KING", "KIWI", "KNIFE", "KNIGHT", "LAB", "LAP",
    "LASER", "LAWYER", "LEAD", "LEMON", "LEPRECHAUN", "LIFE", "LIGHT", "LIMOUSINE", "LINE", "LINK",
    "LION", "LITTER", "LOCH NESS", "LOCK", "LOG", "LONDON", "LUCK", "MAIL", "MAMMOTH", "MAPLE",
    "MARBLE", "MARCH", "MASS", "MATCH", "MERCURY", "MEXICO", "MICROSCOPE", "MILLIONAIRE", "MINE", "MINT",
    "MISSILE", "MODEL", "MOLE", "MOON", "MOSCOW", "MOUNT", "MOUSE", "MOUTH", "MUG", "NAIL",
    "NEEDLE", "NET", "NEW YORK", "NIGHT", "NINJA", "NOTE", "NOVEL", "NURSE", "NUT", "OCTOPUS",
    "OIL", "OLIVE", "OLYMPUS", "OPERA", "ORANGE", "ORGAN", "PALM", "PAN", "PANTS", "PAPER",
    "PARACHUTE", "PARK", "PART", "PASS", "PASTE", "PENGUIN", "PHOENIX", "PIANO", "PIE", "PILOT",
    "PIN", "PIPE", "PIRATE", "PISTOL", "PIT", "PITCH", "PLANE", "PLASTIC", "PLATE", "PLATYPUS",
    "PLAY", "PLOT", "POINT", "POISON", "POLE", "POLICE", "POOL", "PORT", "POST", "POUND",
    "PRESS", "PRINCESS", "PUMPKIN", "PUPIL", "PYRAMID", "QUEEN", "RABBIT", "RACKET", "RAY", "REVOLUTION",
    "RING", "ROBIN", "ROBOT", "ROCK", "ROME", "ROOT", "ROSE", "ROULETTE", "ROUND", "ROW",
    "RULER", "SATELLITE", "SATURN", "SCALE", "SCHOOL", "SCIENTIST", "SCORPION", "SCREEN", "SCUBA DIVER", "SEAL",
    "SERVER", "SHADOW", "SHAKESPEARE", "SHARK", "SHIP", "SHOE", "SHOP", "SHOT", "SINK", "SKYSCRAPER",
    "SLIP", "SLUG", "SMUGGLER", "SNOW", "SNOWMAN", "SOCK", "SOLDIER", "SOUL", "SOUND", "SPACE",
    "SPELL", "SPIDER", "SPIKE", "SPINE", "SPOT", "SPRING", "SPY", "SQUARE", "STADIUM", "STAFF",
    "STAR", "STATE", "STICK", "STOCK", "STRAW", "STREAM", "STRIKE", "STRING", "SUB", "SUIT",
    "SUPERHERO", "SWING", "SWITCH", "TABLE", "TABLET", "TAG", "TAIL", "TAP", "TEACHER", "TELESCOPE",
    "TEMPLE", "THEATER", "THIEF", "THUMB", "TICK", "TIE", "TIME", "TOKYO", "TOOTH", "TORCH",
    "TOWER", "TRACK", "TRAIN", "TRIANGLE", "TRIP", "TRUNK", "TUBE", "TURKEY", "UNDERTAKER", "UNICORN",
    "VACUUM", "VAN", "VET", "WAKE", "WALL", "WAR", "WASHER", "WASHINGTON", "WATCH", "WATER",
    "WAVE", "WEB", "WELL", "WHALE", "WHIP", "WIND", "WITCH", "WORM", "YARD"
]

NAMES = [
    "Astra", "Nova", "Echo", "Luna",
    "Orion", "Vega", "Zephyr", "Sol"
]

TEAM_MODEL_PRESETS = {
    "openai": {
        "boss": "gpt-5",
        "captain": "gpt-5-mini",
        "players": ["gpt-5-nano", "gpt-4.1-nano"]
    },
    "google": {
        "boss": "gemini-2.5-pro",
        "captain": "gemini-2.5-flash",
        "players": ["gemini-2.0-flash-001", "gemini-2.0-flash-lite-001"]
    },
    "anthropic": {
        "boss": "claude-sonnet-4-5-20250929",
        "captain": "claude-3-7-sonnet-20250219",
        "players": ["claude-3-5-haiku-20241022", "claude-3-haiku-20240307"]
    },
    "opensource": {
        "boss": "moonshotai/Kimi-K2-Thinking",  # "deepseek-ai/DeepSeek-V3.1",
        "captain": "deepseek-ai/DeepSeek-R1",  # "Qwen/Qwen3-235B-A22B-Instruct-2507",
        "players": ["openai/gpt-oss-120b", "openai/gpt-oss-20b"]
    },
}

# 🧠 Available model pool for random mode
ALL_MODELS = sorted({
    model
    for preset in TEAM_MODEL_PRESETS.values()
    for model in ([preset["boss"], preset["captain"]] + preset["players"])
})


# Custom header HTML
custom_header = """
<div class="custom-navbar">
    <div class="navbar-title">🕵️ Agentic Codenames Arena</div>
    <div class="navbar-links">
        <a href="#" class="nav-link active" data-tab-id="home_id">Home</a>
        <a href="#" class="nav-link" data-tab-id="how_to_play_id">How to play</a>
        <a href="#" class="nav-link" data-tab-id="play_id">Play</a>
        <a href="#" class="nav-link" data-tab-id="stats_id">Stats</a>
    </div>
</div>
"""