app.py

import streamlit as st
import os
from datetime import datetime
from connect_four_game import ConnectFour
from minimax_ai import MinimaxAI
from llm_explanation import MoveExplainer
from report_generator import generate_match_report
import random

st.set_page_config(
    page_title="Connect Four AI Pro",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Modern Gaming UI Theme with Connect Four Colors
st.markdown('''
<style>
    /* Import Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
    
    /* Global Styles */
    * {
        font-family: 'Rajdhani', sans-serif !important;
    }
    
    /* Main Background with Gaming Gradient */
    .stApp {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        background-attachment: fixed;
    }
    
    /* Sidebar Styling */
    [data-testid="stSidebar"] {
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
        border-right: 2px solid rgba(255, 215, 0, 0.3);
    }
    
    [data-testid="stSidebar"] h1, 
    [data-testid="stSidebar"] h2, 
    [data-testid="stSidebar"] h3 {
        color: #FFD700 !important;
        font-family: 'Orbitron', sans-serif !important;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    [data-testid="stSidebar"] p,
    [data-testid="stSidebar"] label {
        color: #E0E0E0 !important;
        font-weight: 500;
    }
    
    /* Project Info Container */
    .project-info-container {
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 165, 0, 0.15));
        border-radius: 12px;
        padding: 1rem;
        margin: 0 0 1rem 0;
        border-left: 4px solid #FF6B6B;
    }
    
    .project-info-title {
        color: #FF6B6B !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
    }
    
    .project-field {
        background: rgba(0, 0, 0, 0.3);
        border-left: 3px solid #FF6B6B;
        padding: 0.5rem 0.7rem;
        margin: 0.4rem 0;
        border-radius: 6px;
        color: #E0E0E0 !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    .project-field-label {
        color: #FF6B6B !important;
        font-weight: 700 !important;
    }
    
    .project-field-value {
        color: #E0E0E0 !important;
        margin-top: 0.2rem;
        font-size: 0.75rem;
    }
    
    /* Syllabus Coverage Container */
    .syllabus-container {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(102, 126, 234, 0.1));
        border-radius: 12px;
        padding: 1rem;
        margin: 1rem 0;
        border-left: 4px solid #00D4FF;
    }
    
    .syllabus-title {
        color: #00D4FF !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
    }
    
    .syllabus-category {
        color: #FFD700 !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        margin-top: 0.8rem !important;
        margin-bottom: 0.4rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .syllabus-item-direct {
        background: rgba(0, 255, 136, 0.15);
        border-left: 3px solid #00FF88;
        color: #00FF88 !important;
    }
    
    .syllabus-item-partial {
        background: rgba(255, 165, 0, 0.15);
        border-left: 3px solid #FFA500;
        color: #FFD700 !important;
    }
    
    .syllabus-item-foundational {
        background: rgba(100, 150, 255, 0.15);
        border-left: 3px solid #6496FF;
        color: #A8D8FF !important;
    }
    
    .syllabus-item-extensible {
        background: rgba(200, 100, 255, 0.15);
        border-left: 3px solid #C864FF;
        color: #E0B8FF !important;
    }
    
    .syllabus-item {
        padding: 0.6rem 0.7rem;
        margin: 0.4rem 0;
        border-radius: 6px;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    .syllabus-topic-name {
        font-weight: 700 !important;
    }
    
    .syllabus-topic-usage {
        font-size: 0.75rem !important;
        margin-top: 0.2rem;
        opacity: 0.9;
    }
    
    /* Main Title */
    h1 {
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 900 !important;
        font-size: 3rem !important;
        background: linear-gradient(90deg, #FFD700, #FFA500, #FF6347);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
        margin-bottom: 1rem !important;
        animation: glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes glow {
        from {
            filter: drop-shadow(0 0 5px #FFD700);
        }
        to {
            filter: drop-shadow(0 0 20px #FFD700);
        }
    }
    
    /* Subheaders */
    h2, h3 {
        font-family: 'Orbitron', sans-serif !important;
        color: #FFD700 !important;
        font-weight: 700 !important;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        border-bottom: 2px solid rgba(255, 215, 0, 0.3);
        padding-bottom: 0.5rem;
        margin-top: 1.5rem !important;
    }
    
    /* Game Board Container */
    .board-container {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        border-radius: 20px;
        padding: 1rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                    inset 0 0 30px rgba(255, 215, 0, 0.1);
        border: 3px solid rgba(255, 215, 0, 0.3);
        margin: 1rem auto;
        text-align: center;
        width: fit-content;
        display: block;
        position: static !important;
        height: auto !important;
    }
    
    /* Board Display */
    .board-display {
        font-family: 'Courier New', monospace !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        color: #FFD700 !important;
        background: linear-gradient(135deg, rgba(15, 12, 41, 0.8), rgba(48, 43, 99, 0.8)) !important;
        border: 2px solid rgba(255, 215, 0, 0.4) !important;
        border-radius: 12px !important;
        padding: 0.8rem !important;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
        overflow-x: auto !important;
        white-space: pre !important;
        width: fit-content !important;
        margin: 0 auto !important;
        height: auto !important;
        position: static !important;
    }
    
    /* Learning Insights Container */
    .learning-insights {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        border-left: 4px solid #00D4FF;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    .insight-title {
        color: #00D4FF !important;
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
        margin-bottom: 0.8rem !important;
    }
    
    .insight-item {
        background: rgba(0, 0, 0, 0.2);
        border-left: 3px solid #00D4FF;
        padding: 0.6rem 0.8rem;
        margin: 0.5rem 0;
        border-radius: 6px;
        color: #E0E0E0 !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    /* Buttons - Gaming Style */
    .stButton button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        border: 2px solid rgba(255, 215, 0, 0.5) !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.5rem !important;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
        transition: all 0.3s ease !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .stButton button:hover {
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.6) !important;
        border-color: #FFD700 !important;
    }
    
    .stButton button:disabled {
        background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%) !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }
    
    /* Column Buttons - Special Styling */
    div[data-testid="column"] .stButton button {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
        width: 100%;
        height: 60px;
        font-size: 1.3rem !important;
        margin: 0.2rem 0;
    }
    
    div[data-testid="column"] .stButton button:hover {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
        transform: scale(1.05);
    }
    
    /* Info Cards */
    .info-card {
        background: linear-gradient(135deg, #232526 0%, #414345 100%);
        border-radius: 15px;
        padding: 1.5rem;
        margin: 1rem 0;
        border: 2px solid rgba(255, 215, 0, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    /* Stats Display */
    .metric-container {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 12px;
        padding: 1rem;
        margin: 0.5rem 0;
        border-left: 4px solid #FFD700;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    /* Algorithm Performance Card */
    .algo-perf-card {
        background: linear-gradient(135deg, #1a3a52 0%, #2d5a7b 100%);
        border-radius: 15px;
        padding: 1.2rem;
        margin: 1rem 0;
        border: 2px solid rgba(102, 126, 234, 0.5);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }
    
    .algo-perf-card h4 {
        color: #00D4FF !important;
        font-family: 'Orbitron', sans-serif !important;
        margin-bottom: 1rem !important;
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    }
    
    .algo-stat-item {
        background: rgba(0, 0, 0, 0.3);
        border-left: 3px solid #00D4FF;
        padding: 0.8rem;
        margin: 0.5rem 0;
        border-radius: 8px;
        color: #E0E0E0;
        font-size: 0.95rem;
    }
    
    .algo-stat-label {
        color: #00D4FF !important;
        font-weight: 700 !important;
    }
    
    /* AI Badge */
    .ai-badge {
        display: inline-block;
        background: linear-gradient(135deg, #FF6347, #FF4500);
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 25px;
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        border: 2px solid rgba(255, 215, 0, 0.5);
        box-shadow: 0 5px 15px rgba(255, 99, 71, 0.4);
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
    
    /* Two Player Badge */
    .two-player-badge {
        display: inline-block;
        background: linear-gradient(135deg, #4facfe, #00f2fe);
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 25px;
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        border: 2px solid rgba(255, 215, 0, 0.5);
        box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    
    /* Winner Popup */
    .winner-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 3rem;
        border-radius: 20px;
        border: 4px solid #FFD700;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
        z-index: 9999;
        text-align: center;
        animation: popIn 0.5s ease-out;
    }
    
    @keyframes popIn {
        0% {
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 0;
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    }
    
    /* Expander Styling */
    .streamlit-expanderHeader {
        background: linear-gradient(135deg, #232526 0%, #414345 100%) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 215, 0, 0.3) !important;
        color: #FFD700 !important;
        font-weight: 600 !important;
    }
    
    /* Radio Buttons */
    .stRadio label {
        color: #E0E0E0 !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
    }
    
    /* Slider */
    .stSlider {
        padding: 1rem 0;
    }
    
    /* Text & Paragraphs */
    p, li, span {
        color: #E0E0E0 !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }
    
    /* Strong/Bold Text */
    strong {
        color: #FFD700 !important;
        font-weight: 700 !important;
    }
    
    /* Code blocks */
    code {
        background: rgba(255, 215, 0, 0.1) !important;
        color: #FFD700 !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 5px !important;
    }
    
    /* Horizontal Rules */
    hr {
        border-color: rgba(255, 215, 0, 0.3) !important;
        margin: 2rem 0 !important;
    }
    
    /* Success/Info/Warning/Error Messages */
    .stSuccess, .stInfo, .stWarning, .stError {
        border-radius: 10px !important;
        border-left: 5px solid #FFD700 !important;
    }
    
    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    
    ::-webkit-scrollbar-track {
        background: #1a1a2e;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #764ba2, #667eea);
    }
    
    /* Download Button */
    .stDownloadButton button {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
        color: white !important;
        font-family: 'Orbitron', sans-serif !important;
        font-weight: 700 !important;
        border: 2px solid rgba(255, 215, 0, 0.5) !important;
        border-radius: 12px !important;
        padding: 0.75rem 1.5rem !important;
        box-shadow: 0 8px 20px rgba(17, 153, 142, 0.4) !important;
        transition: all 0.3s ease !important;
    }
    
    .stDownloadButton button:hover {
        background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%) !important;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(17, 153, 142, 0.6) !important;
    }
    
    /* Analysis Cards */
    .analysis-card {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        border-radius: 15px;
        padding: 1.5rem;
        margin: 1rem 0;
        border-left: 5px solid #FFD700;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    
    .analysis-card h4 {
        color: #FFD700 !important;
        font-family: 'Orbitron', sans-serif !important;
        margin-bottom: 1rem !important;
    }
</style>
''', unsafe_allow_html=True)

# Academic insights from the learning guides
LEARNING_INSIGHTS = [
    "💡 Minimax: Plans moves ahead like a chess master, evaluating all possibilities recursively",
    "🚀 Alpha-Beta Pruning: Eliminates 60-70% of unnecessary branches, making deep search practical",
    "🎮 Perfect Information: Connect Four has no hidden cards—AI can calculate optimal play",
    "🌳 Search Depth: Each level deeper exponentially increases positions (7^d growth)",
    "⚔️ Threat Detection: AI identifies winning opportunities AND blocks opponent threats",
    "⏱️ Terminal States: When AI finds winning move immediately (depth 0), no deeper search needed",
    "🔄 Recursion: Minimax calls itself to evaluate all game futures before deciding",
    "📊 Big-O Notation: O(b^d) without pruning, O(b^d/2) with pruning—theory meets practice",
    "🎯 Game Theory: Minimax chooses moves that maximize AI score, minimize opponent score",
    "💾 State Management: Session state persists game across page refreshes—no data loss",
    "🏆 Optimal Play: Depth 5 proves strong enough to block your best strategies",
    "⏳ Time Trade-off: Deeper search = more thinking but slower response time",
    "🤖 Heuristics: Evaluation function rates positions without exploring every possibility",
    "🌐 DFS vs BFS: Game AI uses depth-first search (memory efficient) not breadth-first",
    "📈 Exponential Growth: Why depth 8 takes 10x longer than depth 5",
]

# Comprehensive Syllabus Coverage with Categories
SYLLABUS_CATEGORIES = {
    "🟢 DIRECTLY IMPLEMENTED (100%)": [
        ("State Space Search", "Board states and transitions"),
        ("Uninformed Search", "DFS in minimax algorithm"),
        ("Heuristic Search", "Position evaluation function"),
        ("Informed Search", "Move ordering optimization"),
        ("Game Playing", "Perfect information, turn-based"),
        ("Minimax + Alpha-Beta", "Core AI engine"),
    ],
    "🟡 PARTIALLY IMPLEMENTED (50%)": [
        ("Constraint Satisfaction", "Constraints and validity"),
        ("AND/OR Graphs", "Game tree structure"),
        ("Knowledge Representation", "Board and rules repr."),
        ("Uncertainty Handling", "Heuristic confidence"),
        ("Sequential Decisions", "Move sequencing"),
    ],
    "🔵 FOUNDATIONAL CONCEPTS": [
        ("Propositional Logic", "Game rules as logic"),
        ("Planning", "Planning moves ahead"),
        ("Complex Decisions", "Balancing objectives"),
    ],
    "🟣 EXTENSIBLE (Could Add)": [
        ("Machine Learning", "Learn evaluation function"),
        ("Decision Trees", "Learn move selection"),
        ("Reinforcement Learning", "Learn through self-play"),
        ("Deep Learning", "Neural net evaluation"),
    ],
}

# PROJECT INFORMATION - EDIT THESE VALUES
PROJECT_INFO = {
    "Project Name": "Connect Four AI Pro",
    "Student Name": "Shubhanshu Bansod",  # EDIT THIS
    "Roll Number": "03",  # EDIT THIS
    "Project Guide": "Prof. Swati Chopade",  # EDIT THIS
    "Department": "MCA",  # EDIT THIS
    "College": "Veetmata Jijabai Technological Institute, Matunga, Mumbai",  # EDIT THIS
}

# Initialize Session State
if 'game' not in st.session_state:
    st.session_state.game = ConnectFour()
    st.session_state.game_mode = "vs AI"
    st.session_state.ai = MinimaxAI(st.session_state.game, depth=5)
    hf_token = os.getenv('HF_TOKEN')
    st.session_state.explainer = MoveExplainer(hf_token=hf_token) if hf_token else None
    st.session_state.move_history = []
    st.session_state.move_history_detailed = []
    st.session_state.player1_analyses = []
    st.session_state.player2_analyses = []
    st.session_state.game_over = False
    st.session_state.winner = None
    st.session_state.current_player = 1
    st.session_state.show_winner_popup = False
    st.session_state.move_count = 0
    st.session_state.current_depth = 5
    st.session_state.last_human_move_analysis = None
    st.session_state.last_ai_move_analysis = None
    st.session_state.last_human_algo_perf = None
    st.session_state.last_ai_algo_perf = None
    st.session_state.last_p1_algo_perf = None
    st.session_state.last_p2_algo_perf = None
    st.session_state.current_insight_index = 0

# Header
col_title1, col_title2 = st.columns([3, 1])
with col_title1:
    st.title("🎮 CONNECT FOUR AI PRO")
    
with col_title2:
    if st.session_state.game_mode == "vs AI":
        st.markdown(f'<div class="ai-badge">⚡ ULTRA AI</div>', unsafe_allow_html=True)
    else:
        st.markdown('<div class="two-player-badge">👥 TWO PLAYER</div>', unsafe_allow_html=True)

# Sidebar Configuration
st.sidebar.header("📋 PROJECT INFORMATION")

# PROJECT INFORMATION EXPANDER AT TOP
with st.sidebar.expander("📑 ABOUT THIS PROJECT"):
    st.markdown('<div class="project-info-container"><div class="project-info-title">Project Details</div></div>', unsafe_allow_html=True)
    
    for field, value in PROJECT_INFO.items():
        st.markdown(f'<div class="project-field"><span class="project-field-label">{field}:</span><div class="project-field-value">{value}</div></div>', unsafe_allow_html=True)

st.sidebar.markdown("---")
st.sidebar.header("⚙️ GAME SETTINGS")

game_mode = st.sidebar.radio(
    "🎮 Game Mode",
    ["vs AI", "Two Player"],
    index=0 if st.session_state.game_mode == "vs AI" else 1
)

if game_mode != st.session_state.game_mode:
    st.session_state.game_mode = game_mode
    st.session_state.game.reset()
    st.session_state.move_history = []
    st.session_state.move_history_detailed = []
    st.session_state.player1_analyses = []
    st.session_state.player2_analyses = []
    st.session_state.game_over = False
    st.session_state.current_player = 1
    st.session_state.move_count = 0
    st.rerun()

if st.session_state.game_mode == "vs AI":
    st.sidebar.markdown("---")
    st.sidebar.subheader("🎚️ AI SEARCH DEPTH")
    depth = st.sidebar.slider("Depth Level (3-8)", 3, 8, 5)
    st.session_state.ai.depth = depth
    st.session_state.current_depth = depth

st.sidebar.markdown("---")

# Control Buttons
col1, col2 = st.sidebar.columns(2)
with col1:
    if st.button("🔄 NEW GAME", use_container_width=True):
        st.session_state.game.reset()
        st.session_state.move_history = []
        st.session_state.move_history_detailed = []
        st.session_state.player1_analyses = []
        st.session_state.player2_analyses = []
        st.session_state.game_over = False
        st.session_state.winner = None
        st.session_state.current_player = 1
        st.session_state.show_winner_popup = False
        st.session_state.move_count = 0
        st.session_state.last_human_move_analysis = None
        st.session_state.last_ai_move_analysis = None
        st.session_state.last_human_algo_perf = None
        st.session_state.last_ai_algo_perf = None
        st.session_state.last_p1_algo_perf = None
        st.session_state.last_p2_algo_perf = None
        st.rerun()

with col2:
    if st.button("↩️ UNDO", use_container_width=True, disabled=len(st.session_state.move_history) == 0):
        undo_count = min(2, len(st.session_state.move_history)) if st.session_state.game_mode == "vs AI" else 1
        for _ in range(undo_count):
            if st.session_state.move_history:
                st.session_state.game.undo_move(st.session_state.move_history[-1])
                st.session_state.move_history.pop()
                st.session_state.move_history_detailed.pop()
                if st.session_state.game_mode == "Two Player" and st.session_state.player1_analyses and st.session_state.player2_analyses:
                    if st.session_state.move_count % 2 == 0:
                        st.session_state.player2_analyses.pop()
                    else:
                        st.session_state.player1_analyses.pop()
                st.session_state.move_count -= 1
        st.session_state.game_over = False
        st.session_state.show_winner_popup = False
        st.rerun()

# Game Statistics
st.sidebar.markdown("---")
st.sidebar.subheader("📊 GAME STATISTICS")
st.sidebar.markdown(f'<div class="metric-container"><strong>Total Moves:</strong> {st.session_state.move_count}</div>', unsafe_allow_html=True)

if st.session_state.game_mode == "Two Player":
    st.sidebar.markdown(f'<div class="metric-container"><strong>Player 1 (🔴):</strong> {len(st.session_state.player1_analyses)} moves</div>', unsafe_allow_html=True)
    st.sidebar.markdown(f'<div class="metric-container"><strong>Player 2 (🟡):</strong> {len(st.session_state.player2_analyses)} moves</div>', unsafe_allow_html=True)

# COMPREHENSIVE Syllabus Coverage Section
st.sidebar.markdown("---")
with st.sidebar.expander("📚 COMPREHENSIVE COVERAGE (21 Topics)"):
    st.markdown('<div class="syllabus-container"><div class="syllabus-title">Topics Across 4 Categories</div></div>', unsafe_allow_html=True)
    
    for category, topics in SYLLABUS_CATEGORIES.items():
        st.markdown(f'<div class="syllabus-category">{category}</div>', unsafe_allow_html=True)
        
        if "DIRECTLY" in category:
            style_class = "syllabus-item-direct"
        elif "PARTIALLY" in category:
            style_class = "syllabus-item-partial"
        elif "FOUNDATIONAL" in category:
            style_class = "syllabus-item-foundational"
        else:
            style_class = "syllabus-item-extensible"
        
        for topic_name, topic_usage in topics:
            st.markdown(f'<div class="syllabus-item {style_class}"><span class="syllabus-topic-name">{topic_name}</span><div class="syllabus-topic-usage">{topic_usage}</div></div>', unsafe_allow_html=True)

# Move History
if st.session_state.move_history:
    with st.sidebar.expander("📜 MOVE HISTORY"):
        for i, col in enumerate(st.session_state.move_history, 1):
            player = "🔴" if i % 2 == 1 else "🟡"
            st.write(f"**Move {i}:** {player} → Column {col}")

# Helper function to display algorithm performance
def display_algorithm_performance(title, algo_perf):
    """Display algorithm performance metrics in a styled card"""
    if algo_perf:
        st.markdown(f'<div class="algo-perf-card">', unsafe_allow_html=True)
        st.markdown(f"#### ⚙️ {title}")
        
        col1, col2 = st.columns(2)
        with col1:
            st.markdown(f'<div class="algo-stat-item"><span class="algo-stat-label">🔍 Nodes Explored:</span> {algo_perf["nodes_explored"]:,}</div>', unsafe_allow_html=True)
            st.markdown(f'<div class="algo-stat-item"><span class="algo-stat-label">✂️ Pruning Efficiency:</span> {algo_perf["pruning_efficiency"]:.1f}%</div>', unsafe_allow_html=True)
        
        with col2:
            st.markdown(f'<div class="algo-stat-item"><span class="algo-stat-label">🚫 Nodes Pruned:</span> {algo_perf["nodes_pruned"]:,}</div>', unsafe_allow_html=True)
            st.markdown(f'<div class="algo-stat-item"><span class="algo-stat-label">⚡ Response Time:</span> {algo_perf["time_ms"]:.0f}ms</div>', unsafe_allow_html=True)
        
        st.markdown(f'<div class="algo-stat-item"><span class="algo-stat-label">🌳 Search Depth:</span> {algo_perf["depth"]}</div>', unsafe_allow_html=True)
        st.markdown('</div>', unsafe_allow_html=True)

# Main Game Layout
if st.session_state.game_mode == "vs AI":
    col1, col2 = st.columns([1, 1], gap="large")
    
    with col1:
        st.subheader("🎯 GAME BOARD")
        board_str = st.session_state.game.board_to_string()
        st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
        
        # Learning Insights Section
        st.markdown(f'<div class="learning-insights"><div class="insight-title">📚 QUICK INSIGHT</div><div class="insight-item">{random.choice(LEARNING_INSIGHTS)}</div></div>', unsafe_allow_html=True)
        
        # Column Selection
        st.markdown("### 🎲 SELECT YOUR MOVE")
        cols = st.columns(7)
        for i, col in enumerate(cols):
            with col:
                if st.button(f"↓\n{i}", key=f"col_{i}", 
                           disabled=st.session_state.game_over or not st.session_state.game.is_valid_move(i)):
                    # Human Move
                    st.session_state.game.make_move(i, 1)
                    st.session_state.move_history.append(i)
                    st.session_state.move_count += 1
                    
                    # Get AI recommendation
                    ai_move = st.session_state.ai.get_best_move()
                    is_optimal = (i == ai_move['move'])
                    recommendation = {
                        'is_optimal': is_optimal,
                        'suggested_column': ai_move['move'],
                        'score_diff': abs(ai_move['score'] - st.session_state.game.evaluate(2))
                    }
                    
                    # Store human algorithm performance
                    human_algo_perf = {
                        'nodes_explored': ai_move.get('nodes_explored', 0),
                        'nodes_pruned': ai_move.get('nodes_pruned', 0),
                        'pruning_efficiency': ai_move.get('pruning_efficiency', 0),
                        'depth': ai_move.get('depth', 0),
                        'time_ms': ai_move.get('time_ms', 0)
                    }
                    st.session_state.last_human_algo_perf = human_algo_perf
                    
                    # Generate explanation
                    explanation_data = None
                    if st.session_state.explainer:
                        move_data = {
                            'move': i,
                            'score': st.session_state.game.evaluate(2),
                            'threats': ai_move.get('threats', []),
                            'nodes_explored': ai_move.get('nodes_explored', 0)
                        }
                        explanation_result = st.session_state.explainer.explain_move(move_data)
                        if explanation_result['success']:
                            explanation_data = explanation_result['explanation']
                            st.session_state.last_human_move_analysis = explanation_result
                    
                    move_detail = {
                        'player': 1,
                        'player_name': 'Human',
                        'column': i,
                        'analysis': ai_move,
                        'explanation': explanation_data,
                        'recommendation': recommendation
                    }
                    st.session_state.move_history_detailed.append(move_detail)
                    
                    # Check win
                    if st.session_state.game.check_winner(1):
                        st.session_state.game_over = True
                        st.session_state.winner = "Human"
                        st.session_state.show_winner_popup = True
                        st.rerun()
                    
                    if st.session_state.game.is_board_full():
                        st.session_state.game_over = True
                        st.session_state.winner = "Draw"
                        st.session_state.show_winner_popup = True
                        st.rerun()
                    
                    # AI Move
                    if not st.session_state.game_over:
                        ai_move = st.session_state.ai.get_best_move()
                        st.session_state.game.make_move(ai_move['move'], 2)
                        st.session_state.move_history.append(ai_move['move'])
                        st.session_state.move_count += 1
                        
                        # Store AI algorithm performance
                        ai_algo_perf = {
                            'nodes_explored': ai_move.get('nodes_explored', 0),
                            'nodes_pruned': ai_move.get('nodes_pruned', 0),
                            'pruning_efficiency': ai_move.get('pruning_efficiency', 0),
                            'depth': ai_move.get('depth', 0),
                            'time_ms': ai_move.get('time_ms', 0)
                        }
                        st.session_state.last_ai_algo_perf = ai_algo_perf
                        
                        # AI explanation
                        ai_explanation_data = None
                        if st.session_state.explainer:
                            ai_move_data = {
                                'move': ai_move['move'],
                                'score': ai_move['score'],
                                'threats': ai_move.get('threats', []),
                                'nodes_explored': ai_move.get('nodes_explored', 0)
                            }
                            ai_explanation_result = st.session_state.explainer.explain_move(ai_move_data)
                            if ai_explanation_result['success']:
                                ai_explanation_data = ai_explanation_result['explanation']
                                st.session_state.last_ai_move_analysis = ai_explanation_result
                        
                        ai_move_detail = {
                            'player': 2,
                            'player_name': 'AI (Ultra)',
                            'column': ai_move['move'],
                            'analysis': ai_move,
                            'explanation': ai_explanation_data
                        }
                        st.session_state.move_history_detailed.append(ai_move_detail)
                        
                        # Check AI win
                        if st.session_state.game.check_winner(2):
                            st.session_state.game_over = True
                            st.session_state.winner = "AI"
                            st.session_state.show_winner_popup = True
                            st.rerun()
                        
                        if st.session_state.game.is_board_full():
                            st.session_state.game_over = True
                            st.session_state.winner = "Draw"
                            st.session_state.show_winner_popup = True
                            st.rerun()
                    
                    st.rerun()
    
    with col2:
        st.subheader("🤖 AI ANALYSIS & INSIGHTS")
        
        # Display Human Move Analysis
        if st.session_state.last_human_move_analysis:
            st.markdown('<div class="analysis-card">', unsafe_allow_html=True)
            st.markdown("#### 👤 YOUR LAST MOVE")
            analysis = st.session_state.last_human_move_analysis
            st.info(f"**Explanation:** {analysis['explanation']}")
            st.success(f"**Threat Analysis:** {analysis['threat_analysis']}")
            st.warning(f"**Key Insight:** {analysis['key_insight']}")
            st.markdown('</div>', unsafe_allow_html=True)
            
            # Display Human Algorithm Performance
            if st.session_state.last_human_algo_perf:
                display_algorithm_performance("YOUR MOVE - ALGORITHM PERFORMANCE", st.session_state.last_human_algo_perf)
        
        # Display AI Move Analysis
        if st.session_state.last_ai_move_analysis:
            st.markdown('<div class="analysis-card">', unsafe_allow_html=True)
            st.markdown("#### 🤖 AI'S LAST MOVE")
            analysis = st.session_state.last_ai_move_analysis
            st.info(f"**Explanation:** {analysis['explanation']}")
            st.success(f"**Threat Analysis:** {analysis['threat_analysis']}")
            st.warning(f"**Key Insight:** {analysis['key_insight']}")
            st.markdown('</div>', unsafe_allow_html=True)
            
            # Display AI Algorithm Performance
            if st.session_state.last_ai_algo_perf:
                display_algorithm_performance("AI MOVE - ALGORITHM PERFORMANCE", st.session_state.last_ai_algo_perf)
        
        if not st.session_state.last_human_move_analysis and not st.session_state.last_ai_move_analysis:
            st.info("🎲 Make your first move to see AI analysis!")

else:  # Two Player Mode
    col1, col2 = st.columns([1, 1], gap="large")
    
    with col1:
        st.subheader("🎯 GAME BOARD")
        board_str = st.session_state.game.board_to_string()
        st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
        
        # Learning Insights Section
        st.markdown(f'<div class="learning-insights"><div class="insight-title">📚 QUICK INSIGHT</div><div class="insight-item">{random.choice(LEARNING_INSIGHTS)}</div></div>', unsafe_allow_html=True)
        
        # Current Player Indicator
        current_player_symbol = "🔴 RED" if st.session_state.current_player == 1 else "🟡 YELLOW"
        st.markdown(f'<div class="info-card"><h3 style="text-align: center;">Current Turn: {current_player_symbol}</h3></div>', unsafe_allow_html=True)
        
        # Column Selection
        st.markdown("### 🎲 SELECT COLUMN")
        cols = st.columns(7)
        for i, col in enumerate(cols):
            with col:
                if st.button(f"↓\n{i}", key=f"col_{i}", 
                           disabled=st.session_state.game_over or not st.session_state.game.is_valid_move(i)):
                    # Make move
                    st.session_state.game.make_move(i, st.session_state.current_player)
                    st.session_state.move_history.append(i)
                    st.session_state.move_count += 1
                    
                    # Get AI analysis
                    ai_move = st.session_state.ai.get_best_move()
                    is_optimal = (i == ai_move['move'])
                    recommendation = {
                        'is_optimal': is_optimal,
                        'suggested_column': ai_move['move'],
                        'score_diff': abs(ai_move['score'] - st.session_state.game.evaluate(2))
                    }
                    
                    # Store algorithm performance
                    algo_perf = {
                        'nodes_explored': ai_move.get('nodes_explored', 0),
                        'nodes_pruned': ai_move.get('nodes_pruned', 0),
                        'pruning_efficiency': ai_move.get('pruning_efficiency', 0),
                        'depth': ai_move.get('depth', 0),
                        'time_ms': ai_move.get('time_ms', 0)
                    }
                    
                    if st.session_state.current_player == 1:
                        st.session_state.last_p1_algo_perf = algo_perf
                    else:
                        st.session_state.last_p2_algo_perf = algo_perf
                    
                    # Generate explanation
                    explanation_data = None
                    if st.session_state.explainer:
                        move_data = {
                            'move': i,
                            'score': st.session_state.game.evaluate(2),
                            'threats': ai_move.get('threats', []),
                            'nodes_explored': ai_move.get('nodes_explored', 0)
                        }
                        explanation_result = st.session_state.explainer.explain_move(move_data)
                        if explanation_result['success']:
                            explanation_data = explanation_result['explanation']
                            if st.session_state.current_player == 1:
                                st.session_state.player1_analyses.append(explanation_result)
                            else:
                                st.session_state.player2_analyses.append(explanation_result)
                    
                    player_name = f"Player {st.session_state.current_player}"
                    move_detail = {
                        'player': st.session_state.current_player,
                        'player_name': player_name,
                        'column': i,
                        'analysis': ai_move,
                        'explanation': explanation_data,
                        'recommendation': recommendation
                    }
                    st.session_state.move_history_detailed.append(move_detail)
                    
                    # Check win
                    if st.session_state.game.check_winner(st.session_state.current_player):
                        st.session_state.game_over = True
                        st.session_state.winner = f"Player {st.session_state.current_player}"
                        st.session_state.show_winner_popup = True
                        st.rerun()
                    
                    if st.session_state.game.is_board_full():
                        st.session_state.game_over = True
                        st.session_state.winner = "Draw"
                        st.session_state.show_winner_popup = True
                        st.rerun()
                    
                    # Switch player
                    st.session_state.current_player = 2 if st.session_state.current_player == 1 else 1
                    st.rerun()
    
    with col2:
        st.subheader("📊 PLAYER ANALYSIS & PERFORMANCE")
        
        # Player 1 Analysis
        if st.session_state.player1_analyses:
            st.markdown('<div class="analysis-card">', unsafe_allow_html=True)
            st.markdown("#### 🔴 PLAYER 1 - LAST MOVE")
            analysis = st.session_state.player1_analyses[-1]
            st.info(f"**Explanation:** {analysis['explanation']}")
            st.success(f"**Threat Analysis:** {analysis['threat_analysis']}")
            st.warning(f"**Key Insight:** {analysis['key_insight']}")
            st.markdown('</div>', unsafe_allow_html=True)
            
            # Display Player 1 Algorithm Performance
            if st.session_state.last_p1_algo_perf:
                display_algorithm_performance("PLAYER 1 - ALGORITHM PERFORMANCE", st.session_state.last_p1_algo_perf)
        
        # Player 2 Analysis
        if st.session_state.player2_analyses:
            st.markdown('<div class="analysis-card">', unsafe_allow_html=True)
            st.markdown("#### 🟡 PLAYER 2 - LAST MOVE")
            analysis = st.session_state.player2_analyses[-1]
            st.info(f"**Explanation:** {analysis['explanation']}")
            st.success(f"**Threat Analysis:** {analysis['threat_analysis']}")
            st.warning(f"**Key Insight:** {analysis['key_insight']}")
            st.markdown('</div>', unsafe_allow_html=True)
            
            # Display Player 2 Algorithm Performance
            if st.session_state.last_p2_algo_perf:
                display_algorithm_performance("PLAYER 2 - ALGORITHM PERFORMANCE", st.session_state.last_p2_algo_perf)
        
        if not st.session_state.player1_analyses and not st.session_state.player2_analyses:
            st.info("🎲 Start playing to see move analysis!")

# Winner Display
if st.session_state.show_winner_popup:
    if st.session_state.winner == "Draw":
        st.balloons()
        st.success("🤝 **GAME OVER - IT'S A DRAW!**")
    elif st.session_state.winner == "Human":
        st.balloons()
        st.success("🏆 **CONGRATULATIONS! YOU WON!**")
    elif st.session_state.winner == "AI":
        st.balloons()
        st.error("🤖 **AI WINS! Better luck next time!**")
    else:
        st.balloons()
        st.success(f"🏆 **{st.session_state.winner.upper()} WINS!**")

# Match Report Download
if st.session_state.game_over and st.session_state.move_history_detailed:
    st.markdown("---")
    st.subheader("📄 MATCH REPORT")
    
    report = generate_match_report(
        game_mode=st.session_state.game_mode,
        ai_mode="Ultra AI" if st.session_state.game_mode == "vs AI" else "N/A",
        winner=st.session_state.winner,
        move_history_data=st.session_state.move_history_detailed,
        game_board=st.session_state.game.board_to_string(),
        search_depth=st.session_state.current_depth if st.session_state.game_mode == "vs AI" else None
    )
    
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    st.download_button(
        label="📥 DOWNLOAD MATCH REPORT",
        data=report,
        file_name=f"connect_four_match_report_{timestamp}.txt",
        mime="text/plain",
        use_container_width=True
    )