<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrintGuard</title>
    <link rel="stylesheet" href="{{ url_for('static', path='css/universal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/index.css') }}">
    <script type="module" src="{{ url_for('static', path='js/notifications.js') }}"></script>
    <script src="{{ url_for('static', path='js/sse.js') }}" defer></script>
    <script type="module" src="{{ url_for('static', path='js/utils.js') }}" defer></script>
    <script type="module" src="{{ url_for('static', path='js/index.js') }}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/figlet@1.8.1/lib/figlet.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
</head>
<body>
    <div id="notificationPopup" class="notification-popup">
        <div id="notificationsContainer"></div>
    </div>
    <div class="grid-container">
        <div class="grid-item">
            <pre id="ascii-title"></pre>
            <div class="camera-header">
                <p class="camera-title" id="cameraTitle"></p>
                <span class="live-indicator"></span>
            </div>
        </div>
        <div class="grid-item">
            <img id="videoPreview" src="" alt="Live Video Feed Preview" />
        </div>
        <div class="grid-item" id="camera-list-container">
            <ul id="cameraList" name="camera">
                {% for camera_id in camera_states %}
                    <li class="camera-item">
                        <div class="camera-text-content">
                            <div class="camera-header">
                                <span>Camera ID: {{ camera_id }}</span>
                                <span class="camera-status"></span>
                            </div>
                            <span class="camera-prediction">-</span>
                            <span class="camera-prediction-time">Detected at: <span id="lastTimeValue">-</span></span>
                        </div>
                        <img src="{{ url_for('static', path='images/default_icon.png') }}" alt="Camera Icon" class="camera-video-preview" id="cameraPreview">
                    </li>
                {% endfor %}
                {% if not camera_states %}
                <li class="camera-item">
                    <div class="camera-text-content">
                        <span>No cameras available</span>
                        <span>Check connection or settings</span>
                    </div>
                    <img src="{{ url_for('static', path='images/default_icon.png') }}" alt="Icon" class="camera-video-preview">
                </li>
                {% endif %}
            </ul>
        </div>
        <div class="grid-item">
            <div class="camera-display-section">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-value success-status" id="camPredictionDisplay">Inactive</span>
                        <span class="info-label" id="camPredictionTimeDisplay">at -</span>
                    </div>
                    <div class="info-item">
                        <span class="info-value" id="camTotalDetectionsDisplay">-</span>
                        <span class="info-label">total detections</span>
                    </div>
                    <div class="info-item">
                        <button class="start-stop-btn" id="camDetectionToggleButton">Start Detection</button>
                    </div>
                    <div class="info-item">
                        <span class="info-value" id="camFrameRateDisplay">-</span>
                        <span class="info-label">frames per second</span>
                    </div>
                </div>
            </div>
            <div class="settings-section" style="display: none;">
                <form action="{{ url_for('update_settings') }}" method="post" class="settings-form settings-grid">
                    <input type="hidden" id="camera_index" name="camera_index"  value="{{ camera_index }}">
                    <div class="settings-item">
                        <label for="sensitivity">Sensitivity: <span id="sensitivity_val"></span></label>
                        <input type="range" id="sensitivity" name="sensitivity" min="0" max="2" step="0.05"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="brightness">Brightness: <span id="brightness_val"></span></label>
                        <input type="range" id="brightness" name="brightness" min="0" max="2" step="0.05"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="contrast">Contrast: <span id="contrast_val"></span></label>
                        <input type="range" id="contrast" name="contrast" min="0" max="2" step="0.05"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="focus">Focus: <span id="focus_val"></span></label>
                        <input type="range" id="focus" name="focus" min="0" max="2" step="0.05"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="countdown_time">Countdown Time (s): <span id="countdown_time_val"></span></label>
                        <input type="range" id="countdown_time" name="countdown_time" min="0" max="300" step="5"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="countdown_action">Countdown Action</label>
                        <select id="countdown_action" name="countdown_action" class="settings-dropdown">
                            <option value="dismiss">Dismiss</option>
                            <option value="cancel_print">Cancel Print</option>
                            <option value="pause_print">Pause Print</option>
                        </select>
                    </div>
                    <div class="settings-item">
                        <label for="majority_vote_threshold">Majority Vote Threshold: <span id="majority_vote_threshold_val"></span></label>
                        <input type="range" id="majority_vote_threshold" name="majority_vote_threshold" min="1" max="20"  value="-" />
                    </div>
                    <div class="settings-item">
                        <label for="majority_vote_window">Majority Vote Window (frames): <span id="majority_vote_window_val"></span></label>
                        <input type="range" id="majority_vote_window" name="majority_vote_window" min="1" max="100"  value="-" />
                    </div>
                    <div class="settings-item">
                        <button class="start-stop-btn" id="printerConfigBtn" style="display: none;">
                            <span id="printerConfigStatus">Printer Connected</span>
                        </button>
                        <button class="start-stop-btn" id="linkPrinterBtn">
                            Link Printer
                        </button>
                    </div>
                    <div class="settings-item">
                        <label for="notificationBtn">Notifications</label>
                        <div class="notification-control">
                            <button id="notificationBtn">Enable Notifications</button>
                        </div>
                    </div>
                    <div class="settings-item">
                        <button class="start-stop-btn" id="configureSetupBtn">Configure Setup</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <button class="settings-button" id="settingsButton">
        Settings
    </button>
    <div class="setup-modal-overlay" id="setupModalOverlay">
        <div class="setup-modal">
            <div class="setup-modal-header">
                <h2 class="setup-modal-title">Configure Setup</h2>
                <button class="setup-modal-close" id="setupModalClose">×</button>
            </div>
            <div class="setup-modal-content">
                <div class="setup-section">
                    <h3 class="setup-section-title">Initial Setup</h3>
                    <p>Access the initial setup page to reconfigure your 3D printer settings, camera parameters, and notification preferences.</p>
                    <p>This will take you through the complete setup process again, allowing you to modify all system configurations.</p>
                    <button class="start-stop-btn" id="goToSetupBtn">Go to Initial Setup</button>
                </div>
                
                <div class="setup-section">
                    <h3 class="setup-section-title">Feed Settings</h3>
                    <p>Adjust stream quality and detection parameters for optimal performance.</p>
                    <form class="feed-settings-form">
                        <div class="feed-settings-grid">
                            <div class="feed-setting-item">
                                <label for="streamMaxFps">Max FPS: <span id="streamMaxFps_val">30</span></label>
                                <input type="range" id="streamMaxFps" name="streamMaxFps" min="1" max="60" step="1" value="30" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="streamTunnelFps">Tunnel FPS: <span id="streamTunnelFps_val">10</span></label>
                                <input type="range" id="streamTunnelFps" name="streamTunnelFps" min="1" max="30" step="1" value="10" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="streamJpegQuality">JPEG Quality: <span id="streamJpegQuality_val">85</span></label>
                                <input type="range" id="streamJpegQuality" name="streamJpegQuality" min="10" max="100" step="5" value="85" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="streamMaxWidth">Max Width: <span id="streamMaxWidth_val">1280</span></label>
                                <input type="range" id="streamMaxWidth" name="streamMaxWidth" min="320" max="1920" step="80" value="1280" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="detectionsPerSecond">Detections/Sec: <span id="detectionsPerSecond_val">15</span></label>
                                <input type="range" id="detectionsPerSecond" name="detectionsPerSecond" min="1" max="30" step="1" value="15" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="detectionInterval">Detection Interval (ms): <span id="detectionInterval_val">67</span></label>
                                <input type="range" id="detectionInterval" name="detectionInterval" min="33" max="1000" step="17" value="67" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="printerStatPollingRate">Printer Stat Polling (ms): <span id="printerStatPollingRate_val">2000</span></label>
                                <input type="range" id="printerStatPollingRate" name="printerStatPollingRate" min="250" max="10000" step="250" value="2000" />
                            </div>
                            <div class="feed-setting-item">
                                <label for="minSseDispatchDelay">Min SSE Dispatch Delay (ms): <span id="minSseDispatchDelay_val">100</span></label>
                                <input type="range" id="minSseDispatchDelay" name="minSseDispatchDelay" min="0" max="10000" step="20" value="100" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="setup-modal-overlay" id="printerModalOverlay" style="display:none;">
        <div class="setup-modal printer-modal">
            <div class="setup-modal-header">
                <h2 class="setup-modal-title">Printer Details</h2>
                <button class="setup-modal-close" id="printerModalClose">×</button>
            </div>
            <div class="setup-modal-content">
                <div id="modalPrinterInfo" style="display:none;">
                    <h4 id="modalPrinterName">-</h4>
                    <p id="modalPrinterType">-</p>
                    <p>Status: <span id="modalPrinterStatus">-</span></p>
                    <p>Nozzle: <span id="modalNozzleTemp">-</span>°C</p>
                    <p>Bed: <span id="modalBedTemp">-</span>°C</p>
                    <div class="button-group">
                        <button id="modalCancelPrintBtn" class="start-stop-btn secondary">Cancel Print</button>
                        <button id="modalPausePrintBtn" class="start-stop-btn secondary">Pause Print</button>
                        <button id="modalUnlinkPrinterBtn" class="start-stop-btn danger">Unlink Printer</button>
                    </div>
                </div>
                <div id="modalNoPrinterForm" style="display:none;">
                    <form id="linkPrinterForm" class="printer-link-form">
                        <div class="form-group">
                            <label for="modalPrinterConnectionType">Connection Type</label>
                            <select id="modalPrinterConnectionType" name="printer_type" required>
                                <option value="">Select connection type...</option>
                                <option value="octoprint">OctoPrint</option>
                            </select>
                        </div>
                        <div id="modalOctoprintConfig" style="display:none;">
                            <div class="form-group">
                                <label for="modalPrinterNameInput">Printer Name</label>
                                <input type="text" id="modalPrinterNameInput" name="name" required />
                            </div>
                            <div class="form-group">
                                <label for="modalOctoprintUrlInput">Base URL</label>
                                <input type="url" id="modalOctoprintUrlInput" name="base_url" required />
                            </div>
                            <div class="form-group">
                                <label for="modalOctoprintApiKeyInput">API Key</label>
                                <input type="text" id="modalOctoprintApiKeyInput" name="api_key" required />
                            </div>
                        </div>
                        <button type="submit" id="modalLinkPrinterSubmit" class="start-stop-btn primary">Link Printer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
