<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT Site Survey AI</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="app-container">
        <!-- Header -->
        <header class="app-header">
            <div class="logo">
                <img src="/static/logo.png" alt="BeawIT Logo" style="height: 40px; margin-right: 10px;">
                <h1>Network Site Survey AI</h1>
            </div>
            <nav class="tab-nav">
                <button class="tab-btn active" data-tab="surveys" id="nav-surveys">Surveys List</button>
                <button class="tab-btn" data-tab="create" id="nav-create">Create Survey</button>
            </nav>
        </header>

        <!-- Main Content -->
        <main class="app-main">
            <!-- Surveys List Tab -->
            <section class="tab-content active" id="tab-surveys">
                <div class="section-header">
                    <h2>Site Surveys</h2>
                    <button class="btn btn-danger" id="btn-clear-all">Clear All</button>
                </div>
                <div class="surveys-grid" id="surveys-list">
                    <div class="empty-state">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M9 12h.01M15 12h.01M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z"/>
                        </svg>
                        <p>No surveys yet. Create your first survey!</p>
                        <button class="btn btn-primary" onclick="switchTab('create')">Create Survey</button>
                    </div>
                </div>
            </section>

            <!-- Create Survey Tab -->
            <section class="tab-content" id="tab-create">
                <form id="survey-form" class="survey-form">
                    <!-- Metadata Section -->
                    <div class="form-section">
                        <h3>Survey Information</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="survey-name">Survey Name *</label>
                                <input type="text" id="survey-name" name="name" required placeholder="e.g., Q3 Infrastructure Assessment">
                            </div>
                            <div class="form-group">
                                <label for="survey-client">Client Name *</label>
                                <input type="text" id="survey-client" name="client" required placeholder="e.g., Acme Corporation">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="survey-site">Site Location *</label>
                                <input type="text" id="survey-site" name="site" required placeholder="e.g., Main HQ - San Francisco">
                            </div>
                            <div class="form-group">
                                <label for="survey-model">AI Model</label>
                                <select id="survey-model" name="model">
                                    <option value="">Loading models...</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="survey-description">Description</label>
                            <textarea id="survey-description" name="description" rows="3" placeholder="Brief description of the survey purpose..."></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary" id="btn-load-sample">Load Sample Data</button>
                        </div>
                    </div>

                    <!-- Questions Section -->
                    <div class="form-section">
                        <h3>Survey Questions <span class="question-count" id="question-count">(0/35)</span></h3>
                        <div class="questions-container" id="questions-container">
                            <!-- Questions loaded dynamically -->
                        </div>
                    </div>

                    <!-- Photos Section -->
                    <div class="form-section">
                        <h3>Site Photos</h3>
                        <div class="photo-upload-area" id="photo-upload-area">
                            <input type="file" id="photo-input" accept="image/*" multiple hidden>
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <p>Drag and drop photos here or click to browse</p>
                            <button type="button" class="btn btn-secondary" id="btn-browse-photos">Browse Photos</button>
                        </div>
                        <div class="photo-preview-grid" id="photo-preview-grid"></div>
                    </div>

                    <!-- Submit Section -->
                    <div class="form-section form-submit-section">
                        <button type="submit" class="btn btn-primary btn-large" id="btn-submit-survey">Create Survey</button>
                    </div>
                </form>
            </section>

            <!-- Analysis Tab (shown when viewing a survey) -->
            <section class="tab-content" id="tab-analysis">
                <div class="analysis-header">
                    <div class="analysis-title">
                        <button class="btn btn-secondary btn-back" id="btn-back-to-surveys">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M19 12H5M12 19l-7-7 7-7"/>
                            </svg>
                            Back
                        </button>
                        <h2 id="analysis-survey-name">Survey Analysis</h2>
                    </div>
                    <div class="analysis-controls">
                        <select id="analysis-model" class="model-select">
                            <option value="">Loading models...</option>
                        </select>
                        <button class="btn btn-primary" id="btn-generate-analysis">Generate Recommendations</button>
                    </div>
                </div>

                <div class="analysis-layout">
                    <!-- Survey Summary Panel -->
                    <div class="analysis-sidebar">
                        <div class="panel">
                            <h4>Survey Details</h4>
                            <div class="survey-meta-list" id="analysis-survey-meta">
                                <!-- Populated dynamically -->
                            </div>
                        </div>
                        <div class="panel">
                            <h4>Questions Summary</h4>
                            <div class="question-summary" id="analysis-question-summary">
                                <!-- Populated dynamically -->
                            </div>
                        </div>
                    </div>

                    <!-- Analysis Output Panel -->
                    <div class="analysis-main">
                        <div class="panel analysis-output-panel">
                            <div class="panel-header">
                                <h4>AI Analysis</h4>
                                <div class="export-buttons" id="export-buttons" style="display: none;">
                                    <button class="btn btn-secondary btn-small" id="btn-export-text">Export Text</button>
                                    <button class="btn btn-secondary btn-small" id="btn-export-pdf">Export PDF</button>
                                    <button class="btn btn-secondary btn-small" id="btn-email">Email</button>
                                </div>
                            </div>
                            <div class="analysis-output" id="analysis-output">
                                <div class="analysis-placeholder">
                                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                    </svg>
                                    <p>Click "Generate Recommendations" to get AI-powered insights</p>
                                </div>
                            </div>
                            <div class="analysis-loading" id="analysis-loading" style="display: none;">
                                <div class="spinner"></div>
                                <p>Analyzing survey data...</p>
                            </div>
                        </div>

                        <!-- Chat Interface -->
                        <div class="panel chat-panel">
                            <div class="panel-header">
                                <h4>Ask AI About This Survey</h4>
                            </div>
                            <div class="chat-messages" id="chat-messages">
                                <div class="chat-message system">
                                    <p>Ask me anything about this survey - budget planning, security recommendations, timeline suggestions, or technical details!</p>
                                </div>
                            </div>
                            <div class="chat-input-area">
                                <input type="text" id="chat-input" placeholder="Type your question..." disabled>
                                <button class="btn btn-primary" id="btn-send-chat" disabled>
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal" id="delete-modal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <h3>Delete Survey?</h3>
            <p>Are you sure you want to delete this survey? This action cannot be undone.</p>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="btn-cancel-delete">Cancel</button>
                <button class="btn btn-danger" id="btn-confirm-delete">Delete</button>
            </div>
        </div>
    </div>

    <!-- Clear All Confirmation Modal -->
    <div class="modal" id="clear-all-modal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <h3>Clear All Surveys?</h3>
            <p>Are you sure you want to delete all surveys? This action cannot be undone.</p>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="btn-cancel-clear-all">Cancel</button>
                <button class="btn btn-danger" id="btn-confirm-clear-all">Clear All</button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div class="toast" id="toast" style="display: none;">
        <span id="toast-message"></span>
    </div>

    <script src="/static/app.js?v=5"></script>
</body>
</html>
