<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Панель управления системой для сбора и обработки данных в реальном времени">
    <meta name="author" content="VNA System">
    <title>Радар</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
    <link rel="alternate icon" href="/static/assets/favicon.svg">

    <!-- Theme color for mobile browsers -->
    <meta name="theme-color" content="#1e293b">

    <!-- Plotly.js -->
    <script src="/static/js/vendor/plotly-2.26.0.min.js"></script>

    <!-- Styles -->
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/variables.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="/static/css/components.css">
    <link rel="stylesheet" href="/static/css/charts.css">
    <link rel="stylesheet" href="/static/css/settings.css">
    <link rel="stylesheet" href="/static/css/acquisition.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header__container">
            <div class="header__brand">
                <span data-icon="activity" class="header__icon"></span>
                <h1 class="header__title">МФТИ</h1>
            </div>

            <div class="header__status">
                <div class="status-indicator" id="connectionStatus">
                    <div class="status-indicator__dot"></div>
                    <span class="status-indicator__text">Подключение...</span>
                </div>
            </div>

            <div class="header__controls">
                <button class="btn btn--primary btn--sm" id="startBtn" title="Запустить непрерывный сбор">
                    <span data-icon="play"></span>
                    <span class="btn__text">Запуск</span>
                </button>
                <button class="btn btn--secondary btn--sm" id="stopBtn" title="Остановить сбор">
                    <span data-icon="square"></span>
                    <span class="btn__text">Стоп</span>
                </button>
                <button class="btn btn--accent btn--sm" id="singleSweepBtn" title="Запустить одиночный свип (клавиша S)" aria-keyshortcuts="S">
                    <span data-icon="zap"></span>
                    <span class="btn__text">Одиночный</span>
                    <span class="btn__shortcut" aria-hidden="true">S</span>
                </button>
            </div>

            <nav class="header__nav">
                <button class="nav-btn nav-btn--active" data-view="dashboard">
                    <span data-icon="bar-chart-3"></span>
                    <span>Панель</span>
                </button>
                <button class="nav-btn" data-view="settings">
                    <span data-icon="settings"></span>
                    <span>Настройки</span>
                </button>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main class="main">
        <!-- Dashboard View -->
        <div class="view view--active" id="dashboardView">
            <!-- Controls Panel -->
            <div class="controls-panel">
                <div class="controls-panel__container">
                    <div class="controls-group">
                        <label class="controls-label">Информация о сборе</label>
                        <div class="acquisition-controls">
                            <div class="acquisition-summary header__summary" id="headerSummary">
                                <div class="header-summary__item">
                                    <span class="header-summary__label">Пресет</span>
                                    <span class="header-summary__value" id="headerPresetSummary">Не выбран</span>
                                </div>
                                <span class="header-summary__divider" aria-hidden="true"></span>
                                <div class="header-summary__item">
                                    <span class="header-summary__label">Калибровка</span>
                                    <span class="header-summary__value" id="headerCalibrationSummary">Не задана</span>
                                </div>
                                <span class="header-summary__divider" aria-hidden="true"></span>
                                <div class="header-summary__item">
                                    <span class="header-summary__label">Эталон</span>
                                    <span class="header-summary__value" id="headerReferenceSummary">Не снят</span>
                                </div>
                            </div>
                        </div>
                        <div class="acquisition-status" id="acquisitionStatus">
                            <div class="status-indicator">
                                <div class="status-indicator__dot status-indicator__dot--idle"></div>
                                <span class="status-indicator__text" id="acquisitionStatusText">Ожидание</span>
                            </div>
                            <div class="acquisition-mode" id="acquisitionMode">
                                <span class="mode-label">Режим:</span>
                                <span class="mode-value" id="acquisitionModeText">Непрерывный</span>
                            </div>
                        </div>
                    </div>

                    <div class="controls-group">
                        <label class="controls-label">Процессоры</label>
                        <div class="processor-toggles" id="processorToggles">
                            <!-- Переключатели процессоров создаются динамически -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Grid -->
            <div class="charts-container">
                <div class="charts-grid" id="chartsGrid">
                    <!-- Графики создаются динамически -->
                </div>

                <div class="empty-state" id="emptyState">
                    <div class="empty-state__content">
                        <span data-icon="activity" class="empty-state__icon"></span>
                        <h3 class="empty-state__title">Нет данных</h3>
                        <p class="empty-state__description">
                            Ожидаем данные свипа от системы...
                        </p>
                        <div class="loading-spinner">
                            <div class="spinner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings View -->
        <div class="view" id="settingsView">
            <div class="settings-container">
                <div class="settings-section">
                    <h2 class="settings-title">
                        <span data-icon="settings" class="settings-icon"></span>
                        Настройки системы
                    </h2>

                    <!-- Configuration Presets Section -->
                    <div class="settings-card">
                        <h3 class="settings-card-title">Конфигурационные пресеты</h3>
                        <p class="settings-card-description">Выберите конфигурацию измерений из доступных пресетов</p>

                        <div class="preset-controls">
                            <div class="control-group">
                                <label class="control-label">Доступные пресеты:</label>
                                <div class="preset-selector" id="presetSelector">
                                    <select class="preset-dropdown settings-select" id="presetDropdown" disabled>
                                        <option value="">Загрузка пресетов...</option>
                                    </select>
                                    <button class="btn btn--primary" id="setPresetBtn" disabled>
                                        <span data-icon="check"></span>
                                        Сделать активным
                                    </button>
                                </div>
                            </div>

                            <div class="preset-info" id="presetInfo">
                                <div class="preset-details">
                                    <div class="preset-param">
                                        <span class="param-label">Текущий:</span>
                                        <span class="param-value" id="currentPreset">Нет</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Calibration Section -->
                    <div class="settings-card">
                        <h3 class="settings-card-title">Управление калибровкой</h3>
                        <p class="settings-card-description">Управление калибровочными данными для точных измерений</p>

                        <!-- Current Calibration Status -->
                        <div class="calibration-status" id="calibrationStatus">
                            <div class="status-item">
                                <span class="status-label">Текущая калибровка:</span>
                                <span class="status-value" id="currentCalibration">Нет</span>
                            </div>
                        </div>

                        <!-- Calibration Workflow -->
                        <div class="calibration-workflow">
                            <!-- Start New Calibration -->
                            <div class="workflow-section">
                                <h4 class="workflow-title">Новая калибровка</h4>
                                <div class="workflow-controls">
                                    <button class="btn btn--primary" id="startCalibrationBtn" disabled>
                                        <span data-icon="play"></span>
                                        Начать калибровку
                                    </button>
                                </div>
                            </div>

                            <!-- Calibration Steps -->
                            <div class="workflow-section" id="calibrationSteps" style="display: none;">
                                <h4 class="workflow-title">Шаги калибровки</h4>
                                <div class="calibration-progress" id="calibrationProgress">
                                    <div class="progress-info">
                                        <span class="progress-text" id="progressText">0/0</span>
                                    </div>
                                </div>

                                <div class="calibration-standards" id="calibrationStandards">
                                    <!-- Кнопки стандартов создаются динамически -->
                                </div>

                                <div class="calibration-actions settings-action-group">
                                    <button class="btn btn--secondary" id="viewCurrentPlotsBtn" disabled>
                                        <span data-icon="bar-chart-3"></span>
                                        Графики текущей калибровки
                                    </button>
                                    <input type="text" class="calibration-name-input settings-input" id="calibrationNameInput" placeholder="Введите имя калибровки" disabled>
                                    <button class="btn btn--primary" id="saveCalibrationBtn" disabled>
                                        <span data-icon="save"></span>
                                        Сохранить калибровку
                                    </button>
                                </div>
                            </div>

                            <!-- Existing Calibrations -->
                            <div class="workflow-section">
                                <h4 class="workflow-title">Существующие калибровки</h4>
                                <div class="existing-calibrations" id="existingCalibrations">
                                    <select class="calibration-dropdown settings-select" id="calibrationDropdown" disabled>
                                        <option value="">Калибровки отсутствуют</option>
                                    </select>
                                    <div class="calibration-actions settings-action-group">
                                        <button class="btn btn--primary" id="setCalibrationBtn" disabled>
                                            <span data-icon="check"></span>
                                            Сделать активной
                                        </button>
                                        <button class="btn btn--secondary" id="clearCalibrationBtn" disabled>
                                            <span data-icon="square"></span>
                                            Сбросить
                                        </button>
                                        <button class="btn btn--secondary" id="viewPlotsBtn" disabled>
                                            <span data-icon="bar-chart-3"></span>
                                            Показать графики
                                        </button>
                                        <button class="btn btn--secondary" id="deleteCalibrationBtn" disabled>
                                            <span data-icon="trash-2"></span>
                                            Удалить
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Open Air Reference -->
                    <div class="settings-card">
                        <h3 class="settings-card-title">Эталон открытого пространства</h3>
                        <div class="settings-card-content">

                            <!-- Create Reference -->
                            <div class="workflow-section">
                                <h4 class="workflow-title">Создать эталон</h4>
                                <div class="reference-creation">
                                    <input type="text" class="reference-name-input settings-input" id="referenceNameInput" placeholder="Введите имя эталона">
                                    <input type="text" class="reference-description-input settings-input" id="referenceDescriptionInput" placeholder="Описание (необязательно)">
                                    <button class="btn btn--primary" id="createReferenceBtn">
                                        <span data-icon="target"></span>
                                        Снять эталон
                                    </button>
                                </div>
                            </div>

                            <!-- Existing References -->
                            <div class="workflow-section">
                                <h4 class="workflow-title">Существующие эталоны</h4>
                                <div class="reference-list" id="referenceList">
                                    <select class="reference-dropdown settings-select" id="referenceDropdown" disabled>
                                        <option value="">Эталоны отсутствуют</option>
                                    </select>
                                    <div class="reference-actions settings-action-group">
                                    <button class="btn btn--primary" id="setReferenceBtn" disabled>
                                            <span data-icon="check"></span>
                                            Использовать
                                        </button>
                                    <button class="btn btn--secondary" id="clearReferenceBtn" disabled>
                                        <span data-icon="square"></span>
                                        Сбросить
                                    </button>
                                    <button class="btn btn--secondary" id="previewReferenceBtn" disabled>
                                        <span data-icon="bar-chart-3"></span>
                                        Просмотр
                                    </button>
                                        <button class="btn btn--secondary" id="deleteReferenceBtn" disabled>
                                            <span data-icon="trash-2"></span>
                                            Удалить
                                        </button>
                                    </div>
                                    <div class="reference-details" id="currentReferenceInfo" style="display: none;">
                                        <div class="reference-details__row">
                                            <span class="reference-details__label">Имя:</span>
                                            <span class="reference-details__value" id="currentReferenceName">—</span>
                                        </div>
                                        <div class="reference-details__row">
                                            <span class="reference-details__label">Дата:</span>
                                            <span class="reference-details__value" id="currentReferenceTimestamp">—</span>
                                        </div>
                                        <div class="reference-details__row reference-details__row--description">
                                            <span class="reference-details__label">Описание:</span>
                                            <span class="reference-details__value" id="currentReferenceDescription">—</span>
                                        </div>
                                        <div class="reference-details__row" style="display: none;">
                                            <span class="reference-details__label">Калибровка:</span>
                                            <span class="reference-details__value" id="currentReferenceCalibration">—</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Laser Control Section -->
                    <div class="settings-card">
                        <h3 class="settings-card-title">Управление лазером</h3>
                        <p class="settings-card-description">Контроль параметров лазерной схемы оптического смесителя</p>

                        <div class="laser-controls">
                            <!-- Mode Selection -->
                            <div class="control-section">
                                <h4 class="control-section-title">Режим работы</h4>
                                <div class="control-group">
                                    <label class="control-label control-label--checkbox">
                                        <input type="checkbox" id="laserManualMode">
                                        <span>Ручной режим ввода</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Manual Mode Controls -->
                            <div class="control-section" id="laserManualSection">
                                <h4 class="control-section-title">Параметры ручного режима</h4>
                                <div class="laser-params-table">
                                    <div class="laser-param-cell laser-param-header">Температура лазера 1 (°C)</div>
                                    <div class="laser-param-cell laser-param-header">Температура лазера 2 (°C)</div>
                                    <div class="laser-param-cell laser-param-header">Управляющий ток лазера 1 (15-60 мА)</div>
                                    <div class="laser-param-cell laser-param-header">Управляющий ток лазера 2 (15-60 мА)</div>

                                    <div class="laser-param-cell laser-param-input">
                                        <input type="number" class="settings-input" id="laserTemp1"
                                               min="-1" max="45" step="0.1" value="28">
                                    </div>
                                    <div class="laser-param-cell laser-param-input">
                                        <input type="number" class="settings-input" id="laserTemp2"
                                               min="-1" max="45" step="0.1" value="28.9">
                                    </div>
                                    <div class="laser-param-cell laser-param-input">
                                        <input type="number" class="settings-input" id="laserCurrent1"
                                               min="15" max="60" step="0.1" value="33">
                                    </div>
                                    <div class="laser-param-cell laser-param-input">
                                        <input type="number" class="settings-input" id="laserCurrent2"
                                               min="15" max="60" step="0.1" value="35">
                                    </div>
                                </div>
                            </div>

                            <!-- Scan Mode Controls -->
                            <div class="control-section" id="laserScanSection" style="display: none;">
                                <h4 class="control-section-title">Режим сканирования тока лазера 1</h4>

                                <div class="control-subsection">
                                    <h5 class="control-subsection-title">Параметры сканирования</h5>
                                    <div class="control-grid">
                                        <div class="control-group">
                                            <label class="control-label">Минимальный ток лазера 1 (мА):</label>
                                            <input type="number" class="settings-input" id="laserMinCurrent1"
                                                   min="15" max="70" step="0.1" value="33" disabled>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Максимальный ток лазера 1 (мА):</label>
                                            <input type="number" class="settings-input" id="laserMaxCurrent1"
                                                   min="15" max="70" step="0.1" value="70" disabled>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Шаг дискретизации тока лазера 1 (0.002-0.5 мА):</label>
                                            <input type="number" class="settings-input" id="laserDeltaCurrent1"
                                                   min="0.002" max="0.5" step="0.001" value="0.05" disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="control-subsection">
                                    <h5 class="control-subsection-title">Фиксированные параметры</h5>
                                    <div class="control-grid">
                                        <div class="control-group">
                                            <label class="control-label">Температура лазера 1 (°C):</label>
                                            <input type="number" class="settings-input" id="laserScanTemp1"
                                                   min="-1" max="45" step="0.1" value="28" disabled>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Температура лазера 2 (°C):</label>
                                            <input type="number" class="settings-input" id="laserScanTemp2"
                                                   min="-1" max="45" step="0.1" value="28.9" disabled>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Управляющий ток лазера 2 (мА):</label>
                                            <input type="number" class="settings-input" id="laserScanCurrent2"
                                                   min="15" max="60" step="0.1" value="35" disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="control-subsection">
                                    <h5 class="control-subsection-title">Параметры времени</h5>
                                    <div class="control-grid">
                                        <div class="control-group">
                                            <label class="control-label">Шаг дискретизации времени (20-100 мкс, шаг 10):</label>
                                            <input type="number" class="settings-input" id="laserDeltaTime"
                                                   min="20" max="100" step="10" value="50" disabled>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">Время задержки (3-10 мс):</label>
                                            <input type="number" class="settings-input" id="laserTau"
                                                   min="3" max="10" step="1" value="10" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Control Buttons -->
                            <div class="control-section">
                                <div class="control-group control-group--buttons">
                                    <button class="btn btn--primary" id="laserStartBtn">
                                        <span data-icon="play"></span>
                                        Пуск
                                    </button>
                                    <button class="btn btn--secondary" id="laserStopBtn" disabled>
                                        <span data-icon="square"></span>
                                        Стоп
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- System Summary -->
                    <div class="settings-card">
                        <h3 class="settings-card-title">Сводка системы</h3>
                        <div class="system-summary" id="systemSummary">
                            <div class="status-item">
                                <span class="status-label">Получено свипов:</span>
                                <span class="status-value" id="sweepCount">-</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Калибровок сохранено:</span>
                                <span class="status-value" id="calibrationCount">-</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Эталонов сохранено:</span>
                                <span class="status-value" id="referenceCount">-</span>
                            </div>
                            <div class="status-item">
                                <span class="status-label">Статус системы:</span>
                                <span class="status-value" id="systemStatus">Режим: —</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Calibration Plots Modal -->
    <div class="modal" id="plotsModal">
        <div class="modal__backdrop" data-modal-close></div>
        <div class="modal__content modal__content--large">
            <div class="modal__header">
                <h2 class="modal__title">
                    <span data-icon="bar-chart-3"></span>
                    Графики стандартов калибровки
                </h2>
                <div class="modal__actions">
                    <button class="btn btn--secondary btn--sm" id="downloadAllBtn" title="Скачать все данные калибровки">
                        <span data-icon="download-cloud"></span>
                        Скачать всё
                    </button>
                    <button class="modal__close" data-modal-close title="Закрыть">
                        <span data-icon="x"></span>
                    </button>
                </div>
            </div>
            <div class="modal__body" id="plotsModalBody">
                <div class="plots-container">
                    <div class="plots-content">
                        <div class="plots-grid" id="plotsGrid">
                            <!-- Здесь появятся отдельные графики -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notification System -->
    <div class="notifications" id="notifications"></div>

    <!-- Scripts -->
    <script type="module" src="/static/js/main.js"></script>
</body>
</html>
