<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGPile - BMC Log Analyzer</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>LOGPile <span class="header-domain">mchus.pro</span></h1>
        <p>Анализатор диагностических данных BMC/IPMI</p>
    </header>

    <main>
        <section id="upload-section">
            <div class="source-switch" role="tablist" aria-label="Источник данных">
                <button type="button" class="source-switch-btn active" data-source-type="archive">Архив</button>
                <button type="button" class="source-switch-btn" data-source-type="api">API</button>
                <button type="button" class="source-switch-btn" data-source-type="convert">Convert</button>
            </div>

            <div id="archive-source-content">
                <div class="upload-area" id="drop-zone">
                    <p>Перетащите архив, TXT/LOG или JSON snapshot сюда</p>
                    <input type="file" id="file-input" accept="application/gzip,application/x-gzip,application/x-tar,application/zip,application/json,text/plain,.json,.tar,.tar.gz,.tgz,.zip,.txt,.log" hidden>
                    <button type="button" onclick="document.getElementById('file-input').click()">Выберите файл</button>
                    <p class="hint">Поддерживаемые форматы: tar.gz, zip, json, txt, log</p>
                </div>
                <div id="upload-status"></div>
                <div id="parsers-info" class="parsers-info"></div>
            </div>

            <div id="api-source-content" class="api-placeholder hidden">
                <form id="api-connect-form" novalidate>
                    <h3>Подключение к BMC API</h3>
                    <div id="api-form-errors" class="form-errors hidden"></div>

                    <div class="api-form-grid">
                        <label class="api-form-field" for="api-host">
                            <span>Host</span>
                            <input id="api-host" name="host" type="text" placeholder="10.0.0.10 или bmc.example.local">
                            <span class="field-error" data-error-for="host"></span>
                        </label>

                        <label class="api-form-field" for="api-port">
                            <span>Порт</span>
                            <input id="api-port" name="port" type="number" min="1" max="65535" value="443" placeholder="443">
                            <span class="field-error" data-error-for="port"></span>
                        </label>

                        <label class="api-form-field" for="api-username">
                            <span>Username</span>
                            <input id="api-username" name="username" type="text" placeholder="admin">
                            <span class="field-error" data-error-for="username"></span>
                        </label>

                        <label class="api-form-field" id="api-password-field" for="api-password">
                            <span>Пароль</span>
                            <input id="api-password" name="password" type="password" autocomplete="current-password">
                            <span class="field-error" data-error-for="password"></span>
                        </label>
                    </div>

                    <div class="api-form-actions">
                        <button id="api-connect-btn" type="submit">Подключиться</button>
                    </div>
                    <div id="api-connect-status" class="api-connect-status"></div>
                </form>

                <section id="api-job-status" class="job-status hidden" aria-live="polite">
                    <div class="job-status-header">
                        <h4>Статус задачи сбора</h4>
                        <button id="cancel-job-btn" type="button">Отменить</button>
                    </div>
                    <div class="job-status-meta">
                        <div><span class="meta-label">jobId:</span> <code id="job-id-value">-</code></div>
                        <div>
                            <span class="meta-label">Статус:</span>
                            <span id="job-status-value" class="job-status-badge">Queued</span>
                        </div>
                        <div><span class="meta-label">Этап:</span> <span id="job-progress-value">Сбор данных...</span></div>
                        <div><span class="meta-label">ETA:</span> <span id="job-eta-value">-</span></div>
                    </div>
                    <div class="job-progress" aria-label="Прогресс задачи">
                        <div id="job-progress-bar" class="job-progress-bar" style="width: 0%">0%</div>
                    </div>
                    <div class="job-status-logs">
                        <p class="meta-label">Журнал шагов:</p>
                        <ul id="job-logs-list"></ul>
                    </div>
                </section>
            </div>

            <div id="convert-source-content" class="api-placeholder hidden">
                <h3>Пакетная выгрузка Reanimator</h3>
                <p>Выберите папку с файлами поддерживаемого типа. Для каждого файла будет создан отдельный экспорт Reanimator.</p>
                <div class="api-form-actions">
                    <input type="file" id="convert-folder-input" webkitdirectory directory multiple hidden>
                    <button id="convert-folder-btn" type="button" onclick="document.getElementById('convert-folder-input').click()">Выбрать папку</button>
                    <button id="convert-run-btn" type="button">Конвертировать в Reanimator</button>
                </div>
                <div id="convert-progress" class="convert-progress hidden" aria-live="polite">
                    <div class="convert-progress-meta">
                        <span id="convert-progress-label">Подготовка...</span>
                        <span id="convert-progress-value">0%</span>
                    </div>
                    <div class="convert-progress-track">
                        <div id="convert-progress-bar" class="convert-progress-bar" style="width: 0%"></div>
                    </div>
                </div>
                <div id="convert-folder-summary" class="api-connect-status"></div>
                <div id="convert-status" class="api-connect-status"></div>
            </div>
        </section>

        <section id="data-section" class="hidden">
            <div class="file-info">
                <div class="parser-badge">
                    <span class="badge-label">Парсер:</span>
                    <span id="parser-name" class="badge-value"></span>
                </div>
                <div class="file-name">
                    <span class="badge-label">Файл:</span>
                    <span id="file-name" class="badge-value"></span>
                </div>
            </div>

            <nav class="tabs">
                <button class="tab active" data-tab="config">Конфигурация</button>
                <button class="tab" data-tab="firmware">Прошивки</button>
                <button class="tab" data-tab="sensors">Сенсоры</button>
                <button class="tab" data-tab="serials">Серийные номера</button>
                <button class="tab" data-tab="events">События</button>
                <button class="tab" data-tab="parse-errors">Ошибки разбора</button>
            </nav>

            <div class="tab-content active" id="config">
                <div class="toolbar">
                    <button onclick="exportData('json')">Export Raw Data</button>
                    <button onclick="exportData('reanimator')">Экспорт Reanimator</button>
                </div>
                <div id="config-content"></div>
            </div>

            <div class="tab-content" id="firmware">
                <div class="toolbar">
                    <span class="toolbar-label">Версии прошивок компонентов</span>
                </div>
                <table id="firmware-table">
                    <thead>
                        <tr>
                            <th>Компонент</th>
                            <th>Модель</th>
                            <th>Версия</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="tab-content" id="sensors">
                <div class="toolbar">
                    <select id="sensor-filter">
                        <option value="">Все сенсоры</option>
                        <option value="temperature">Температура</option>
                        <option value="voltage">Напряжение</option>
                        <option value="power">Мощность</option>
                        <option value="fan_speed">Вентиляторы</option>
                    </select>
                </div>
                <div id="sensors-content"></div>
            </div>

            <div class="tab-content" id="serials">
                <div class="toolbar">
                    <select id="serial-filter">
                        <option value="">Все компоненты</option>
                        <option value="Board">Материнская плата</option>
                        <option value="CPU">Процессоры</option>
                        <option value="Memory">Память</option>
                        <option value="Storage">Накопители</option>
                        <option value="PCIe">PCIe устройства</option>
                        <option value="Network">Сетевые адаптеры</option>
                        <option value="PSU">Блоки питания</option>
                        <option value="Firmware">Прошивки</option>
                        <option value="FRU">FRU</option>
                    </select>
                    <button onclick="exportData('csv')">Экспорт CSV</button>
                </div>
                <table id="serials-table">
                    <thead>
                        <tr>
                            <th>Категория</th>
                            <th>Компонент</th>
                            <th>Расположение</th>
                            <th>Серийный номер</th>
                            <th>Производитель</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="tab-content" id="events">
                <div class="toolbar">
                    <select id="severity-filter">
                        <option value="">Все события</option>
                        <option value="critical">Критические</option>
                        <option value="warning">Предупреждения</option>
                        <option value="info">Информационные</option>
                    </select>
                </div>
                <table id="events-table">
                    <thead>
                        <tr>
                            <th>Время</th>
                            <th>Источник</th>
                            <th>Описание</th>
                            <th>Важность</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="tab-content" id="parse-errors">
                <div class="toolbar">
                    <span class="toolbar-label">Ошибки сборки / разбора (Redfish, parser, файл)</span>
                </div>
                <div class="table-scroll">
                    <table id="parse-errors-table">
                        <thead>
                            <tr>
                                <th>Источник</th>
                                <th>Категория</th>
                                <th>Важность</th>
                                <th>Endpoint / Path</th>
                                <th>Сообщение</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-buttons">
            <button id="clear-btn" class="hidden" onclick="clearData()">Очистить данные</button>
            <button id="restart-btn" onclick="restartApp()">Перезапуск</button>
            <button id="exit-btn" onclick="exitApp()">Выход</button>
        </div>
        <div class="footer-info">
            <p>Автор: <a href="https://mchus.pro" target="_blank">mchus.pro</a> | <a href="https://git.mchus.pro/mchus/logpile" target="_blank">Git Repository</a></p>
        </div>
    </footer>

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