#!/usr/bin/env python3

import os
import subprocess
import argparse
import json
from typing import List, Dict, Any
from pathlib import Path
import re


def export_html_wasm(notebook_path: str, output_dir: str, as_app: bool = False) -> bool:
    """Export a single marimo notebook to HTML format.

    Returns:
        bool: True if export succeeded, False otherwise
    """
    output_path = notebook_path.replace(".py", ".html")

    cmd = ["marimo", "export", "html-wasm"]
    if as_app:
        print(f"Exporting {notebook_path} to {output_path} as app")
        cmd.extend(["--mode", "run", "--no-show-code"])
    else:
        print(f"Exporting {notebook_path} to {output_path} as notebook")
        cmd.extend(["--mode", "edit"])

    try:
        output_file = os.path.join(output_dir, output_path)
        os.makedirs(os.path.dirname(output_file), exist_ok=True)

        cmd.extend([notebook_path, "-o", output_file])
        subprocess.run(cmd, capture_output=True, text=True, check=True)
        return True
    except subprocess.CalledProcessError as e:
        print(f"Error exporting {notebook_path}:")
        print(e.stderr)
        return False
    except Exception as e:
        print(f"Unexpected error exporting {notebook_path}: {e}")
        return False


def get_course_metadata(course_dir: Path) -> Dict[str, Any]:
    """Extract metadata from a course directory."""
    metadata = {
        "id": course_dir.name,
        "title": course_dir.name.replace("_", " ").title(),
        "description": "",
        "notebooks": []
    }
    
    # Try to read README.md for description
    readme_path = course_dir / "README.md"
    if readme_path.exists():
        with open(readme_path, "r", encoding="utf-8") as f:
            content = f.read()
            # Extract first paragraph as description
            if content:
                lines = content.split("\n")
                # Skip title line if it exists
                start_idx = 1 if lines and lines[0].startswith("#") else 0
                description_lines = []
                for line in lines[start_idx:]:
                    if line.strip() and not line.startswith("#"):
                        description_lines.append(line)
                    elif description_lines:  # Stop at the next heading
                        break
                description = " ".join(description_lines).strip()
                # Clean up the description
                description = description.replace("_", "")
                description = description.replace("[work in progress]", "")
                description = description.replace("(https://github.com/marimo-team/learn/issues/51)", "")
                # Remove any other GitHub issue links
                description = re.sub(r'\[.*?\]\(https://github\.com/.*?/issues/\d+\)', '', description)
                description = re.sub(r'https://github\.com/.*?/issues/\d+', '', description)
                # Clean up any double spaces
                description = re.sub(r'\s+', ' ', description).strip()
                metadata["description"] = description
    
    return metadata


def organize_notebooks_by_course(all_notebooks: List[str]) -> Dict[str, Dict[str, Any]]:
    """Organize notebooks by course."""
    courses = {}
    
    for notebook_path in all_notebooks:
        path = Path(notebook_path)
        course_id = path.parts[0]
        
        if course_id not in courses:
            course_dir = Path(course_id)
            courses[course_id] = get_course_metadata(course_dir)
        
        # Extract notebook info
        filename = path.name
        notebook_id = path.stem
        
        # Try to extract order from filename (e.g., 001_numbers.py -> 1)
        order = 999
        if "_" in notebook_id:
            try:
                order_str = notebook_id.split("_")[0]
                order = int(order_str)
            except ValueError:
                pass
        
        # Create display name by removing order prefix and underscores
        display_name = notebook_id
        if "_" in notebook_id:
            display_name = "_".join(notebook_id.split("_")[1:])
        
        # Convert display name to title case, but handle italics properly
        parts = display_name.split("_")
        formatted_parts = []
        
        i = 0
        while i < len(parts):
            if i + 1 < len(parts) and parts[i] == "" and parts[i+1] == "":
                # Skip empty parts that might come from consecutive underscores
                i += 2
                continue
                
            if i + 1 < len(parts) and (parts[i] == "" or parts[i+1] == ""):
                # This is an italics marker
                if parts[i] == "":
                    # Opening italics
                    text_part = parts[i+1].replace("_", " ").title()
                    formatted_parts.append(f"<em>{text_part}</em>")
                    i += 2
                else:
                    # Text followed by italics marker
                    text_part = parts[i].replace("_", " ").title()
                    formatted_parts.append(text_part)
                    i += 1
            else:
                # Regular text
                text_part = parts[i].replace("_", " ").title()
                formatted_parts.append(text_part)
                i += 1
        
        display_name = " ".join(formatted_parts)
        
        courses[course_id]["notebooks"].append({
            "id": notebook_id,
            "path": notebook_path,
            "display_name": display_name,
            "order": order,
            "original_number": notebook_id.split("_")[0] if "_" in notebook_id else ""
        })
    
    # Sort notebooks by order
    for course_id in courses:
        courses[course_id]["notebooks"].sort(key=lambda x: x["order"])
    
    return courses


def generate_eva_css() -> str:
    """Generate Neon Genesis Evangelion inspired CSS with light/dark mode support."""
    return """
    :root {
        /* Light mode colors (default) */
        --eva-purple: #7209b7;
        --eva-green: #1c7361;
        --eva-orange: #e65100;
        --eva-blue: #0039cb;
        --eva-red: #c62828;
        --eva-black: #f5f5f5;
        --eva-dark: #e0e0e0;
        --eva-terminal-bg: rgba(255, 255, 255, 0.9);
        --eva-text: #333333;
        --eva-border-radius: 4px;
        --eva-transition: all 0.3s ease;
    }
    
    /* Dark mode colors */
    [data-theme="dark"] {
        --eva-purple: #9a1eb3;
        --eva-green: #1c7361;
        --eva-orange: #ff6600;
        --eva-blue: #0066ff;
        --eva-red: #ff0000;
        --eva-black: #111111;
        --eva-dark: #222222;
        --eva-terminal-bg: rgba(0, 0, 0, 0.85);
        --eva-text: #e0e0e0;
    }
    
    body {
        background-color: var(--eva-black);
        color: var(--eva-text);
        font-family: 'Courier New', monospace;
        margin: 0;
        padding: 0;
        line-height: 1.6;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .eva-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .eva-header {
        border-bottom: 2px solid var(--eva-green);
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: var(--eva-black);
        z-index: 100;
        backdrop-filter: blur(5px);
        padding-top: 1rem;
        transition: background-color 0.3s ease;
    }
    
    [data-theme="light"] .eva-header {
        background-color: rgba(245, 245, 245, 0.95);
    }
    
    .eva-logo {
        font-size: 2.5rem;
        font-weight: bold;
        color: var(--eva-green);
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 0 10px rgba(28, 115, 97, 0.5);
    }
    
    [data-theme="light"] .eva-logo {
        text-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
    }
    
    .eva-nav {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }
    
    .eva-nav a {
        color: var(--eva-text);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 1px;
        transition: color 0.3s;
        position: relative;
        padding: 0.5rem 0;
    }
    
    .eva-nav a:hover {
        color: var(--eva-green);
    }
    
    .eva-nav a:hover::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--eva-green);
        animation: scanline 1.5s linear infinite;
    }
    
    .theme-toggle {
        background: none;
        border: none;
        color: var(--eva-text);
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.5rem;
        margin-left: 1rem;
        transition: color 0.3s;
    }
    
    .theme-toggle:hover {
        color: var(--eva-green);
    }
    
    .eva-hero {
        background-color: var(--eva-terminal-bg);
        border: 1px solid var(--eva-green);
        padding: 3rem 2rem;
        margin-bottom: 3rem;
        position: relative;
        overflow: hidden;
        border-radius: var(--eva-border-radius);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), url('https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg');
        background-size: cover;
        background-position: center;
        background-blend-mode: overlay;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="light"] .eva-hero {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg');
    }
    
    .eva-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--eva-green);
        animation: scanline 3s linear infinite;
    }
    
    .eva-hero h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: var(--eva-green);
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 0 10px rgba(28, 115, 97, 0.5);
    }
    
    [data-theme="light"] .eva-hero h1 {
        text-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
    }
    
    .eva-hero p {
        font-size: 1.1rem;
        max-width: 800px;
        margin-bottom: 2rem;
        line-height: 1.8;
    }
    
    .eva-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    .eva-feature {
        background-color: var(--eva-terminal-bg);
        border: 1px solid var(--eva-blue);
        padding: 1.5rem;
        border-radius: var(--eva-border-radius);
        transition: var(--eva-transition);
        position: relative;
        overflow: hidden;
    }
    
    .eva-feature:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 102, 255, 0.2);
    }
    
    .eva-feature-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: var(--eva-blue);
    }
    
    .eva-feature h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        color: var(--eva-blue);
    }
    
    .eva-section-title {
        font-size: 2rem;
        color: var(--eva-green);
        margin-bottom: 2rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        position: relative;
        padding-bottom: 1rem;
    }
    
    .eva-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 2px;
        background-color: var(--eva-green);
    }
    
    /* Flashcard view for courses */
    .eva-courses {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    .eva-course {
        background-color: var(--eva-terminal-bg);
        border: 1px solid var(--eva-purple);
        border-radius: var(--eva-border-radius);
        transition: var(--eva-transition), height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        position: relative;
        overflow: hidden;
        height: 350px;
        display: flex;
        flex-direction: column;
    }
    
    .eva-course:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(154, 30, 179, 0.3);
    }
    
    .eva-course::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--eva-purple);
        animation: scanline 2s linear infinite;
    }
    
    .eva-course-badge {
        position: absolute;
        top: 15px;
        right: -40px;
        background: linear-gradient(135deg, var(--eva-orange) 0%, #ff9500 100%);
        color: var(--eva-black);
        font-size: 0.65rem;
        padding: 0.3rem 2.5rem;
        text-transform: uppercase;
        font-weight: bold;
        z-index: 3;
        letter-spacing: 1px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transform: rotate(45deg);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        overflow: hidden;
    }
    
    .eva-course-badge i {
        margin-right: 4px;
        font-size: 0.7rem;
    }
    
    [data-theme="light"] .eva-course-badge {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }
    
    .eva-course-badge::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: scanline 2s linear infinite;
    }
    
    .eva-course-header {
        padding: 1rem 1.5rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(154, 30, 179, 0.3);
        z-index: 2;
        background-color: var(--eva-terminal-bg);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.5rem;
        box-sizing: border-box;
    }
    
    .eva-course-title {
        font-size: 1.3rem;
        color: var(--eva-purple);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
    }
    
    .eva-course-toggle {
        color: var(--eva-purple);
        font-size: 1.5rem;
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .eva-course.active .eva-course-toggle {
        transform: rotate(180deg);
    }
    
    .eva-course-front {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem;
        margin-top: 3.5rem;
        transition: opacity 0.3s ease, transform 0.3s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 3.5rem);
        background-color: var(--eva-terminal-bg);
        z-index: 1;
        box-sizing: border-box;
    }
    
    .eva-course.active .eva-course-front {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
    
    .eva-course-description {
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
        line-height: 1.6;
        flex-grow: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        max-height: 150px;
    }
    
    .eva-course-stats {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        color: var(--eva-text);
        opacity: 0.7;
    }
    
    .eva-course-content {
        position: absolute;
        top: 3.5rem;
        left: 0;
        width: 100%;
        height: calc(100% - 3.5rem);
        padding: 1.5rem;
        background-color: var(--eva-terminal-bg);
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        overflow-y: auto;
        z-index: 1;
        box-sizing: border-box;
    }
    
    .eva-course.active .eva-course-content {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .eva-course.active {
        height: auto;
        min-height: 350px;
        max-height: 800px;
        transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .eva-notebooks {
        margin-top: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.75rem;
    }
    
    .eva-notebook {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
        border-left: 2px solid var(--eva-blue);
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 var(--eva-border-radius) var(--eva-border-radius) 0;
        opacity: 1;
        transform: translateX(0);
    }
    
    [data-theme="light"] .eva-notebook {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    .eva-notebook:hover {
        background-color: rgba(0, 102, 255, 0.1);
        padding-left: 1rem;
        transform: translateX(3px);
    }
    
    .eva-notebook a {
        color: var(--eva-text);
        text-decoration: none;
        display: block;
        font-size: 0.9rem;
        flex-grow: 1;
    }
    
    .eva-notebook a:hover {
        color: var(--eva-blue);
    }
    
    .eva-notebook-number {
        color: var(--eva-blue);
        font-size: 0.8rem;
        margin-right: 0.75rem;
        opacity: 0.7;
        min-width: 24px;
        font-weight: bold;
    }
    
    .eva-button {
        display: inline-block;
        background-color: transparent;
        color: var(--eva-green);
        border: 1px solid var(--eva-green);
        padding: 0.7rem 1.5rem;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 1px;
        transition: var(--eva-transition);
        cursor: pointer;
        border-radius: var(--eva-border-radius);
        position: relative;
        overflow: hidden;
    }
    
    .eva-button:hover {
        background-color: var(--eva-green);
        color: var(--eva-black);
    }
    
    .eva-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
    }
    
    .eva-button:hover::after {
        left: 100%;
    }
    
    .eva-course-button {
        margin-top: 1rem;
        margin-bottom: 1rem;
        align-self: center;
    }
    
    .eva-cta {
        background-color: var(--eva-terminal-bg);
        border: 1px solid var(--eva-orange);
        padding: 3rem 2rem;
        margin: 4rem 0;
        text-align: center;
        border-radius: var(--eva-border-radius);
        position: relative;
        overflow: hidden;
    }
    
    .eva-cta h2 {
        font-size: 2rem;
        color: var(--eva-orange);
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }
    
    .eva-cta p {
        max-width: 600px;
        margin: 0 auto 2rem;
        font-size: 1.1rem;
    }
    
    .eva-cta .eva-button {
        color: var(--eva-orange);
        border-color: var(--eva-orange);
    }
    
    .eva-cta .eva-button:hover {
        background-color: var(--eva-orange);
        color: var(--eva-black);
    }
    
    .eva-footer {
        margin-top: 4rem;
        padding-top: 2rem;
        border-top: 2px solid var(--eva-green);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .eva-footer-logo {
        max-width: 200px;
        margin-bottom: 1rem;
    }
    
    .eva-footer-links {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .eva-footer-links a {
        color: var(--eva-text);
        text-decoration: none;
        transition: var(--eva-transition);
    }
    
    .eva-footer-links a:hover {
        color: var(--eva-green);
    }
    
    .eva-social-links {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .eva-social-links a {
        color: var(--eva-text);
        font-size: 1.5rem;
        transition: var(--eva-transition);
    }
    
    .eva-social-links a:hover {
        color: var(--eva-green);
        transform: translateY(-3px);
    }
    
    .eva-footer-copyright {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .eva-search {
        position: relative;
        margin-bottom: 3rem;
    }
    
    .eva-search input {
        width: 100%;
        padding: 1rem;
        background-color: var(--eva-terminal-bg);
        border: 1px solid var(--eva-green);
        color: var(--eva-text);
        font-family: 'Courier New', monospace;
        font-size: 1rem;
        border-radius: var(--eva-border-radius);
        outline: none;
        transition: var(--eva-transition);
    }
    
    .eva-search input:focus {
        box-shadow: 0 0 10px rgba(28, 115, 97, 0.3);
    }
    
    .eva-search input::placeholder {
        color: rgba(224, 224, 224, 0.5);
    }
    
    [data-theme="light"] .eva-search input::placeholder {
        color: rgba(51, 51, 51, 0.5);
    }
    
    .eva-search-icon {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--eva-green);
        font-size: 1.2rem;
    }
    
    @keyframes scanline {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    
    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
    
    .eva-cursor {
        display: inline-block;
        width: 10px;
        height: 1.2em;
        background-color: var(--eva-green);
        margin-left: 2px;
        animation: blink 1s infinite;
        vertical-align: middle;
    }
    
    @media (max-width: 768px) {
        .eva-courses {
            grid-template-columns: 1fr;
        }
        
        .eva-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 1rem;
        }
        
        .eva-nav {
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        
        .eva-hero {
            padding: 2rem 1rem;
        }
        
        .eva-hero h1 {
            font-size: 2rem;
        }
        
        .eva-features {
            grid-template-columns: 1fr;
        }
        
        .eva-footer {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .eva-notebooks {
            grid-template-columns: 1fr;
        }
    }
    
    .eva-course.closing .eva-course-content {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .eva-course.closing .eva-course-front {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
    }
    """


def generate_index(courses: Dict[str, Dict[str, Any]], output_dir: str) -> None:
    """Generate the index.html file with Neon Genesis Evangelion aesthetics."""
    print("Generating index.html")

    index_path = os.path.join(output_dir, "index.html")
    os.makedirs(output_dir, exist_ok=True)

    try:
        with open(index_path, "w", encoding="utf-8") as f:
            f.write(
                """<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marimo Learn - Interactive Educational Notebooks</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
""" + generate_eva_css() + """
    </style>
  </head>
<body>
    <div class="eva-container">
        <header class="eva-header">
            <div class="eva-logo">MARIMO LEARN</div>
            <nav class="eva-nav">
                <a href="#features">Features</a>
                <a href="#courses">Courses</a>
                <a href="#contribute">Contribute</a>
                <a href="https://docs.marimo.io" target="_blank">Documentation</a>
                <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a>
                <button id="themeToggle" class="theme-toggle" aria-label="Toggle dark/light mode">
                    <i class="fas fa-moon"></i>
                </button>
            </nav>
        </header>

        <section class="eva-hero">
            <h1>Interactive Learning with Marimo<span class="eva-cursor"></span></h1>
            <p>
                A curated collection of educational notebooks covering computer science, 
                mathematics, data science, and more. Built with marimo - the reactive 
                Python notebook that makes data exploration delightful.
            </p>
            <a href="#courses" class="eva-button">Explore Courses</a>
        </section>

        <section id="features">
            <h2 class="eva-section-title">Why Marimo Learn?</h2>
            <div class="eva-features">
                <div class="eva-feature">
                    <div class="eva-feature-icon"><i class="fas fa-bolt"></i></div>
                    <h3>Reactive Notebooks</h3>
                    <p>Experience the power of reactive programming with marimo notebooks that automatically update when dependencies change.</p>
                </div>
                <div class="eva-feature">
                    <div class="eva-feature-icon"><i class="fas fa-code"></i></div>
                    <h3>Learn by Doing</h3>
                    <p>Interactive examples and exercises help you understand concepts through hands-on practice.</p>
                </div>
                <div class="eva-feature">
                    <div class="eva-feature-icon"><i class="fas fa-graduation-cap"></i></div>
                    <h3>Comprehensive Courses</h3>
                    <p>From Python basics to advanced optimization techniques, our courses cover a wide range of topics.</p>
                </div>
            </div>
        </section>

        <section id="courses">
            <h2 class="eva-section-title">Explore Courses</h2>
            <div class="eva-search">
                <input type="text" id="courseSearch" placeholder="Search courses and notebooks...">
                <span class="eva-search-icon"><i class="fas fa-search"></i></span>
            </div>
            <div class="eva-courses">
"""
            )
            
            # Define the custom order for courses
            course_order = ["python", "probability", "polars", "optimization", "functional_programming"]
            
            # Create a dictionary of courses by ID for easy lookup
            courses_by_id = {course["id"]: course for course in courses.values()}
            
            # Determine which courses are "work in progress" based on description or notebook count
            work_in_progress = set()
            for course_id, course in courses_by_id.items():
                # Consider a course as "work in progress" if it has few notebooks or contains specific phrases
                if (len(course["notebooks"]) < 5 or 
                    "work in progress" in course["description"].lower() or
                    "help us add" in course["description"].lower() or
                    "check back later" in course["description"].lower()):
                    work_in_progress.add(course_id)
            
            # First output courses in the specified order
            for course_id in course_order:
                if course_id in courses_by_id:
                    course = courses_by_id[course_id]
                    
                    # Skip if no notebooks
                    if not course["notebooks"]:
                        continue
                    
                    # Count notebooks
                    notebook_count = len(course["notebooks"])
                    
                    # Determine if this course is a work in progress
                    is_wip = course_id in work_in_progress
                    
                    f.write(
                        f'<div class="eva-course" data-course-id="{course["id"]}">\n'
                    )
                    
                    # Add WIP badge if needed
                    if is_wip:
                        f.write(f'    <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div>\n')
                    
                    f.write(
                        f'    <div class="eva-course-header">\n'
                        f'        <h2 class="eva-course-title">{course["title"]}</h2>\n'
                        f'        <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span>\n'
                        f'    </div>\n'
                        f'    <div class="eva-course-front">\n'
                        f'        <p class="eva-course-description">{course["description"]}</p>\n'
                        f'        <div class="eva-course-stats">\n'
                        f'            <span><i class="fas fa-book"></i> {notebook_count} notebook{"s" if notebook_count != 1 else ""}</span>\n'
                        f'        </div>\n'
                        f'        <button class="eva-button eva-course-button">View Notebooks</button>\n'
                        f'    </div>\n'
                        f'    <div class="eva-course-content">\n'
                        f'        <div class="eva-notebooks">\n'
                    )
                    
                    for i, notebook in enumerate(course["notebooks"]):
                        # Use original file number instead of sequential numbering
                        notebook_number = notebook.get("original_number", f"{i+1:02d}")
                        f.write(
                            f'            <div class="eva-notebook">\n'
                            f'                <span class="eva-notebook-number">{notebook_number}</span>\n'
                            f'                <a href="{notebook["path"].replace(".py", ".html")}" data-notebook-title="{notebook["display_name"]}">{notebook["display_name"]}</a>\n'
                            f'            </div>\n'
                        )

                    f.write(
                        f'        </div>\n'
                        f'    </div>\n'
                        f'</div>\n'
                    )
                    
                    # Remove from the dictionary so we don't output it again
                    del courses_by_id[course_id]
            
            # Then output any remaining courses alphabetically
            sorted_remaining_courses = sorted(courses_by_id.values(), key=lambda x: x["title"])
            
            for course in sorted_remaining_courses:
                # Skip if no notebooks
                if not course["notebooks"]:
                    continue
                
                # Count notebooks
                notebook_count = len(course["notebooks"])
                
                # Determine if this course is a work in progress
                is_wip = course["id"] in work_in_progress
                
                f.write(
                    f'<div class="eva-course" data-course-id="{course["id"]}">\n'
                )
                
                # Add WIP badge if needed
                if is_wip:
                    f.write(f'    <div class="eva-course-badge"><i class="fas fa-code-branch"></i> In Progress</div>\n')
                
                f.write(
                    f'    <div class="eva-course-header">\n'
                    f'        <h2 class="eva-course-title">{course["title"]}</h2>\n'
                    f'        <span class="eva-course-toggle"><i class="fas fa-chevron-down"></i></span>\n'
                    f'    </div>\n'
                    f'    <div class="eva-course-front">\n'
                    f'        <p class="eva-course-description">{course["description"]}</p>\n'
                    f'        <div class="eva-course-stats">\n'
                    f'            <span><i class="fas fa-book"></i> {notebook_count} notebook{"s" if notebook_count != 1 else ""}</span>\n'
                    f'        </div>\n'
                    f'        <button class="eva-button eva-course-button">View Notebooks</button>\n'
                    f'    </div>\n'
                    f'    <div class="eva-course-content">\n'
                    f'        <div class="eva-notebooks">\n'
                )
                
                for i, notebook in enumerate(course["notebooks"]):
                    # Use original file number instead of sequential numbering
                    notebook_number = notebook.get("original_number", f"{i+1:02d}")
                    f.write(
                        f'            <div class="eva-notebook">\n'
                        f'                <span class="eva-notebook-number">{notebook_number}</span>\n'
                        f'                <a href="{notebook["path"].replace(".py", ".html")}" data-notebook-title="{notebook["display_name"]}">{notebook["display_name"]}</a>\n'
                        f'            </div>\n'
                    )

                f.write(
                    f'        </div>\n'
                    f'    </div>\n'
                    f'</div>\n'
                )
            
            f.write(
                """            </div>
        </section>

        <section id="contribute" class="eva-cta">
            <h2>Contribute to Marimo Learn</h2>
            <p>
                Help us expand our collection of educational notebooks. Whether you're an expert in machine learning, 
                statistics, or any other field, your contributions are welcome!
            </p>
            <a href="https://github.com/marimo-team/learn" target="_blank" class="eva-button">
                <i class="fab fa-github"></i> Contribute on GitHub
            </a>
        </section>

        <footer class="eva-footer">
            <div class="eva-footer-logo">
                <a href="https://marimo.io" target="_blank">
                    <img src="https://marimo.io/logotype-wide.svg" alt="Marimo" width="200">
                </a>
            </div>
            <div class="eva-social-links">
                <a href="https://github.com/marimo-team" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
                <a href="https://marimo.io/discord?ref=learn" target="_blank" aria-label="Discord"><i class="fab fa-discord"></i></a>
                <a href="https://twitter.com/marimo_io" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="https://www.youtube.com/@marimo-io" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                <a href="https://www.linkedin.com/company/marimo-io" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
            </div>
            <div class="eva-footer-links">
                <a href="https://marimo.io" target="_blank">Website</a>
                <a href="https://docs.marimo.io" target="_blank">Documentation</a>
                <a href="https://github.com/marimo-team/learn" target="_blank">GitHub</a>
            </div>
            <div class="eva-footer-copyright">
                © 2025 Marimo Inc. All rights reserved.
            </div>
        </footer>
    </div>

    <script>
        // Set light theme as default immediately
        document.documentElement.setAttribute('data-theme', 'light');
        
        document.addEventListener('DOMContentLoaded', function() {
            // Theme toggle functionality
            const themeToggle = document.getElementById('themeToggle');
            const themeIcon = themeToggle.querySelector('i');
            
            // Update theme icon based on current theme
            updateThemeIcon('light');
            
            // Check localStorage for saved theme preference
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme && savedTheme !== 'light') {
                document.documentElement.setAttribute('data-theme', savedTheme);
                updateThemeIcon(savedTheme);
            }
            
            // Toggle theme when button is clicked
            themeToggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                document.documentElement.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
                updateThemeIcon(newTheme);
            });
            
            function updateThemeIcon(theme) {
                if (theme === 'dark') {
                    themeIcon.className = 'fas fa-sun';
                } else {
                    themeIcon.className = 'fas fa-moon';
                }
            }
            
            // Terminal typing effect for hero text
            const heroTitle = document.querySelector('.eva-hero h1');
            const heroText = document.querySelector('.eva-hero p');
            const cursor = document.querySelector('.eva-cursor');
            
            const originalTitle = heroTitle.textContent;
            const originalText = heroText.textContent.trim();
            
            heroTitle.textContent = '';
            heroText.textContent = '';
            
            let titleIndex = 0;
            let textIndex = 0;
            
            function typeTitle() {
                if (titleIndex < originalTitle.length) {
                    heroTitle.textContent += originalTitle.charAt(titleIndex);
                    titleIndex++;
                    setTimeout(typeTitle, 50);
                } else {
                    cursor.style.display = 'none';
                    setTimeout(typeText, 500);
                }
            }
            
            function typeText() {
                if (textIndex < originalText.length) {
                    heroText.textContent += originalText.charAt(textIndex);
                    textIndex++;
                    setTimeout(typeText, 20);
                }
            }
            
            typeTitle();
            
            // Course toggle functionality - flashcard style
            const courseHeaders = document.querySelectorAll('.eva-course-header');
            const courseButtons = document.querySelectorAll('.eva-course-button');
            
            // Function to toggle course
            function toggleCourse(course) {
                const isActive = course.classList.contains('active');
                
                // First close all courses with a slight delay for better visual effect
                document.querySelectorAll('.eva-course.active').forEach(c => {
                    if (c !== course) {
                        // Add a closing class for animation
                        c.classList.add('closing');
                        // Remove active class after a short delay
                        setTimeout(() => {
                            c.classList.remove('active');
                            c.classList.remove('closing');
                        }, 300);
                    }
                });
                
                // Toggle the clicked course
                if (!isActive) {
                    // Add a small delay before opening to allow others to close
                    setTimeout(() => {
                        course.classList.add('active');
                        
                        // Check if the course has any notebooks
                        const notebooks = course.querySelectorAll('.eva-notebook');
                        const content = course.querySelector('.eva-course-content');
                        
                        if (notebooks.length === 0 && !content.querySelector('.eva-empty-message')) {
                            // If no notebooks, show a message
                            const emptyMessage = document.createElement('p');
                            emptyMessage.className = 'eva-empty-message';
                            emptyMessage.textContent = 'No notebooks available in this course yet.';
                            emptyMessage.style.color = 'var(--eva-text)';
                            emptyMessage.style.fontStyle = 'italic';
                            emptyMessage.style.opacity = '0.7';
                            emptyMessage.style.textAlign = 'center';
                            emptyMessage.style.padding = '1rem 0';
                            content.appendChild(emptyMessage);
                        }
                        
                        // Animate notebooks to appear sequentially
                        notebooks.forEach((notebook, index) => {
                            notebook.style.opacity = '0';
                            notebook.style.transform = 'translateX(-10px)';
                            setTimeout(() => {
                                notebook.style.opacity = '1';
                                notebook.style.transform = 'translateX(0)';
                            }, 50 + (index * 30)); // Stagger the animations
                        });
                    }, 100);
                }
            }
            
            // Add click event to course headers
            courseHeaders.forEach(header => {
                header.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const currentCourse = this.closest('.eva-course');
                    toggleCourse(currentCourse);
                });
            });
            
            // Add click event to course buttons
            courseButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const currentCourse = this.closest('.eva-course');
                    toggleCourse(currentCourse);
                });
            });
            
            // Search functionality with improved matching
            const searchInput = document.getElementById('courseSearch');
            const courses = document.querySelectorAll('.eva-course');
            const notebooks = document.querySelectorAll('.eva-notebook');
            
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                
                if (searchTerm === '') {
                    // Reset all visibility
                    courses.forEach(course => {
                        course.style.display = 'block';
                        course.classList.remove('active');
                    });
                    
                    notebooks.forEach(notebook => {
                        notebook.style.display = 'flex';
                    });
                    
                    // Open the first course with notebooks by default when search is cleared
                    for (let i = 0; i < courses.length; i++) {
                        const courseNotebooks = courses[i].querySelectorAll('.eva-notebook');
                        if (courseNotebooks.length > 0) {
                            courses[i].classList.add('active');
                            break;
                        }
                    }
                    
                    return;
                }
                
                // First hide all courses
                courses.forEach(course => {
                    course.style.display = 'none';
                    course.classList.remove('active');
                });
                
                // Then show courses and notebooks that match the search
                let hasResults = false;
                
                // Track which courses have matching notebooks
                const coursesWithMatchingNotebooks = new Set();
                
                // First check notebooks
                notebooks.forEach(notebook => {
                    const notebookTitle = notebook.querySelector('a').getAttribute('data-notebook-title').toLowerCase();
                    const matchesSearch = notebookTitle.includes(searchTerm);
                    
                    notebook.style.display = matchesSearch ? 'flex' : 'none';
                    
                    if (matchesSearch) {
                        const course = notebook.closest('.eva-course');
                        coursesWithMatchingNotebooks.add(course.getAttribute('data-course-id'));
                        hasResults = true;
                    }
                });
                
                // Then check course titles and descriptions
                courses.forEach(course => {
                    const courseId = course.getAttribute('data-course-id');
                    const courseTitle = course.querySelector('.eva-course-title').textContent.toLowerCase();
                    const courseDescription = course.querySelector('.eva-course-description').textContent.toLowerCase();
                    
                    const courseMatches = courseTitle.includes(searchTerm) || courseDescription.includes(searchTerm);
                    
                    // Show course if it matches or has matching notebooks
                    if (courseMatches || coursesWithMatchingNotebooks.has(courseId)) {
                        course.style.display = 'block';
                        course.classList.add('active');
                        hasResults = true;
                        
                        // If course matches but doesn't have matching notebooks, show all its notebooks
                        if (courseMatches && !coursesWithMatchingNotebooks.has(courseId)) {
                            course.querySelectorAll('.eva-notebook').forEach(nb => {
                                nb.style.display = 'flex';
                            });
                        }
                    }
                });
            });
            
            // Open the first course with notebooks by default
            let firstCourseWithNotebooks = null;
            for (let i = 0; i < courses.length; i++) {
                const courseNotebooks = courses[i].querySelectorAll('.eva-notebook');
                if (courseNotebooks.length > 0) {
                    firstCourseWithNotebooks = courses[i];
                    break;
                }
            }
            
            if (firstCourseWithNotebooks) {
                firstCourseWithNotebooks.classList.add('active');
            } else if (courses.length > 0) {
                // If no courses have notebooks, just open the first one
                courses[0].classList.add('active');
            }
            
            // Smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 100,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>
  </body>
</html>"""
            )
    except IOError as e:
        print(f"Error generating index.html: {e}")


def main() -> None:
    parser = argparse.ArgumentParser(description="Build marimo notebooks")
    parser.add_argument(
        "--output-dir", default="_site", help="Output directory for built files"
    )
    parser.add_argument(
        "--course-dirs", nargs="+", default=None, 
        help="Specific course directories to build (default: all directories with .py files)"
    )
    args = parser.parse_args()

    # Find all course directories (directories containing .py files)
    all_notebooks: List[str] = []
    
    # Directories to exclude from course detection
    excluded_dirs = ["scripts", "env", "__pycache__", ".git", ".github", "assets"]
    
    if args.course_dirs:
        course_dirs = args.course_dirs
    else:
        # Automatically detect course directories (any directory with .py files)
        course_dirs = []
        for item in os.listdir("."):
            if (os.path.isdir(item) and 
                not item.startswith(".") and 
                not item.startswith("_") and
                item not in excluded_dirs):
                # Check if directory contains .py files
                if list(Path(item).glob("*.py")):
                    course_dirs.append(item)
    
    print(f"Found course directories: {', '.join(course_dirs)}")
    
    for directory in course_dirs:
        dir_path = Path(directory)
        if not dir_path.exists():
            print(f"Warning: Directory not found: {dir_path}")
            continue

        notebooks = [str(path) for path in dir_path.rglob("*.py") 
                    if not path.name.startswith("_") and "/__pycache__/" not in str(path)]
        all_notebooks.extend(notebooks)

    if not all_notebooks:
        print("No notebooks found!")
        return

    # Export notebooks sequentially
    successful_notebooks = []
    for nb in all_notebooks:
        # Determine if notebook should be exported as app or notebook
        # For now, export all as notebooks
        if export_html_wasm(nb, args.output_dir, as_app=False):
            successful_notebooks.append(nb)

    # Organize notebooks by course (only include successfully exported notebooks)
    courses = organize_notebooks_by_course(successful_notebooks)
    
    # Generate index with organized courses
    generate_index(courses, args.output_dir)
    
    # Save course data as JSON for potential use by other tools
    courses_json_path = os.path.join(args.output_dir, "courses.json")
    with open(courses_json_path, "w", encoding="utf-8") as f:
        json.dump(courses, f, indent=2)
    
    print(f"Build complete! Site generated in {args.output_dir}")
    print(f"Successfully exported {len(successful_notebooks)} out of {len(all_notebooks)} notebooks")


if __name__ == "__main__":
    main()