<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#1a1a2e">
    <title>Idea Exchange</title>
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="/icons/icon-192.png">
    
    <!-- Styles -->
    <link rel="stylesheet" href="/css/styles.css">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <span class="brand-icon">💡</span>
                <span class="brand-text">Idea Exchange</span>
            </div>
            <div class="nav-domain-toggle">
                <button class="domain-btn active" data-domain="mebs">MEBS</button>
                <button class="domain-btn" data-domain="worldbuilding">Worldbuilding</button>
            </div>
            <button class="nav-menu-btn" id="menuBtn">☰</button>
        </div>
    </nav>

    <!-- Side Menu -->
    <div class="side-menu" id="sideMenu">
        <div class="menu-header">
            <h3>Menu</h3>
            <button class="close-menu-btn" id="closeMenuBtn">✕</button>
        </div>
        <ul class="menu-list">
            <li><a href="#" data-view="dashboard" class="menu-item active">📊 Dashboard</a></li>
            <li><a href="#" data-view="ideas" class="menu-item">💭 Ideas</a></li>
            <li><a href="#" data-view="locations" class="menu-item">📍 Locations</a></li>
            <li><a href="#" data-view="stale" class="menu-item">⏰ Stale Ideas</a></li>
            <li><a href="#" data-view="create" class="menu-item">➕ Create New</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Dashboard View -->
        <div id="dashboardView" class="view active">
            <div class="view-header">
                <h1>Dashboard</h1>
                <button class="refresh-btn" onclick="refreshDashboard()">🔄 Refresh</button>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card stat-proposed">
                    <div class="stat-value" id="statProposed">-</div>
                    <div class="stat-label">Proposed</div>
                </div>
                <div class="stat-card stat-review">
                    <div class="stat-value" id="statReview">-</div>
                    <div class="stat-label">Under Review</div>
                </div>
                <div class="stat-card stat-adopted">
                    <div class="stat-value" id="statAdopted">-</div>
                    <div class="stat-label">Adopted</div>
                </div>
                <div class="stat-card stat-implemented">
                    <div class="stat-value" id="statImplemented">-</div>
                    <div class="stat-label">Implemented</div>
                </div>
                <div class="stat-card stat-blocking">
                    <div class="stat-value" id="statBlocking">-</div>
                    <div class="stat-label">Blocking</div>
                </div>
                <div class="stat-card stat-high">
                    <div class="stat-value" id="statHigh">-</div>
                    <div class="stat-label">High Priority</div>
                </div>
            </div>

            <div class="flow-progress" id="flowProgress">
                <!-- Flow progress will be inserted here -->
            </div>
        </div>

        <!-- Ideas List View -->
        <div id="ideasView" class="view">
            <div class="view-header">
                <h1>Ideas</h1>
                <div class="filters">
                    <select id="urgencyFilter" class="filter-select">
                        <option value="">All Urgencies</option>
                        <option value="blocking">Blocking</option>
                        <option value="high">High</option>
                        <option value="medium">Medium</option>
                        <option value="low">Low</option>
                    </select>
                    <select id="statusFilter" class="filter-select">
                        <option value="">Active Only</option>
                        <option value="proposed">Proposed</option>
                        <option value="under_review">Under Review</option>
                        <option value="adopted">Adopted</option>
                        <option value="needs_clarification">Needs Clarification</option>
                        <option value="implemented">Implemented</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
            </div>
            
            <div class="ideas-list" id="ideasList">
                <!-- Ideas will be inserted here -->
            </div>
        </div>

        <!-- Locations View -->
        <div id="locationsView" class="view">
            <div class="view-header">
                <h1>Pending Locations</h1>
                <button class="refresh-btn" onclick="refreshLocations()">🔄 Refresh</button>
            </div>
            
            <div class="locations-list" id="locationsList">
                <!-- Locations will be inserted here -->
            </div>
        </div>

        <!-- Stale Ideas View -->
        <div id="staleView" class="view">
            <div class="view-header">
                <h1>Stale Ideas</h1>
                <div class="stale-controls">
                    <label>
                        Days threshold:
                        <input type="number" id="staleDays" value="30" min="1" max="365">
                    </label>
                    <button class="refresh-btn" onclick="refreshStale()">🔄 Refresh</button>
                </div>
            </div>
            
            <div class="ideas-list" id="staleList">
                <!-- Stale ideas will be inserted here -->
            </div>
        </div>

        <!-- Create New View -->
        <div id="createView" class="view">
            <div class="view-header">
                <h1>Create New</h1>
            </div>
            
            <div class="create-tabs">
                <button class="tab-btn active" data-tab="idea">💭 Idea</button>
                <button class="tab-btn" data-tab="lore">📖 Lore Request</button>
                <button class="tab-btn" data-tab="location">📍 Location</button>
            </div>

            <!-- Idea Form -->
            <div id="ideaForm" class="create-form active">
                <div class="form-group">
                    <label>Title *</label>
                    <input type="text" id="ideaTitle" maxlength="200" placeholder="Brief title">
                </div>
                <div class="form-group">
                    <label>Description *</label>
                    <textarea id="ideaDescription" rows="4" placeholder="Detailed description"></textarea>
                </div>
                <div class="form-group">
                    <label>Source Domain *</label>
                    <select id="ideaSource">
                        <option value="mebs">MEBS</option>
                        <option value="worldbuilding">Worldbuilding</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Target Domain *</label>
                    <select id="ideaTarget">
                        <option value="worldbuilding">Worldbuilding</option>
                        <option value="mebs">MEBS</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Type *</label>
                    <select id="ideaType">
                        <option value="mebs_gameplay">MEBS: Gameplay</option>
                        <option value="mebs_mechanics">MEBS: Mechanics</option>
                        <option value="worldbuilding_lore">Worldbuilding: Lore</option>
                        <option value="worldbuilding_geo">Worldbuilding: Geography</option>
                        <option value="cross_pollination">Cross-Pollination</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Urgency *</label>
                    <select id="ideaUrgency">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="blocking">Blocking</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Context (optional)</label>
                    <textarea id="ideaContext" rows="2" placeholder="Why did this come up?"></textarea>
                </div>
                <div class="form-group">
                    <label>Implications (optional)</label>
                    <textarea id="ideaImplications" rows="2" placeholder="What does this affect?"></textarea>
                </div>
                <button class="submit-btn" onclick="createIdea()">Create Idea</button>
            </div>

            <!-- Lore Request Form -->
            <div id="loreForm" class="create-form">
                <div class="form-group">
                    <label>Title *</label>
                    <input type="text" id="loreTitle" maxlength="200" placeholder="Brief title">
                </div>
                <div class="form-group">
                    <label>Gameplay Element *</label>
                    <input type="text" id="loreElement" maxlength="100" placeholder="e.g., ethnicity, team, league">
                </div>
                <div class="form-group">
                    <label>Lore Request *</label>
                    <textarea id="loreRequest" rows="4" placeholder="What lore/context do you need?"></textarea>
                </div>
                <div class="form-group">
                    <label>Urgency *</label>
                    <select id="loreUrgency">
                        <option value="low" selected>Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                        <option value="blocking">Blocking</option>
                    </select>
                </div>
                <button class="submit-btn" onclick="createLoreRequest()">Create Lore Request</button>
            </div>

            <!-- Location Form -->
            <div id="locationForm" class="create-form">
                <div class="form-group">
                    <label>Location Name *</label>
                    <input type="text" id="locationName" maxlength="200" placeholder="e.g., Port Tenebris">
                </div>
                <div class="form-group">
                    <label>Type *</label>
                    <input type="text" id="locationType" maxlength="50" placeholder="e.g., city, region, landmark">
                </div>
                <div class="form-group">
                    <label>Parent Location *</label>
                    <input type="text" id="locationParent" maxlength="200" placeholder="e.g., Shadowlands, Independent">
                </div>
                <div class="form-group">
                    <label>Population (optional)</label>
                    <input type="number" id="locationPop" placeholder="e.g., 400000">
                </div>
                <div class="form-group">
                    <label>Description (optional)</label>
                    <textarea id="locationDesc" rows="3" placeholder="Brief description"></textarea>
                </div>
                <div class="form-group">
                    <label>Reference Document (optional)</label>
                    <input type="text" id="locationRef" placeholder="e.g., docs/shadowlands/port_tenebris.md">
                </div>
                <button class="submit-btn" onclick="createLocation()">Create Location</button>
            </div>
        </div>
    </main>

    <!-- Idea Detail Modal -->
    <div class="modal" id="ideaModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">Idea Details</h2>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- Idea details will be inserted here -->
            </div>
            <div class="modal-actions" id="modalActions">
                <!-- Action buttons will be inserted here -->
            </div>
        </div>
    </div>

    <!-- Toast Notifications -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
    </div>

    <!-- Scripts -->
    <script src="/js/config.js"></script>
    <script src="/js/api.js"></script>
    <script src="/js/ui.js"></script>
    <script src="/js/app.js"></script>
    
    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => console.log('Service Worker registered'))
                    .catch(err => console.log('Service Worker registration failed:', err));
            });
        }
    </script>
</body>
</html>
