// Экран без выбранной встречи: что можно сделать.

import { api, files } from "../api";
import { addAudioFrom } from "./sidebar";

export async function renderStart(root: HTMLElement): Promise<void> {
  const view = await api.getSettings();
  const noKey = !view.openrouter_key;
  root.innerHTML = `
    <section class="start">
      <h1>Встреча → заметка</h1>
      <ol class="start-steps">
        <li><strong>Звук.</strong> ${
          view.capture_supported
            ? "«Записать» слева — перед встречей в Zoom: запишутся Zoom и ваш микрофон. Или добавьте"
            : "Запись работает в Windows; здесь добавьте"
        } готовый аудиофайл — с диктофона или из облака Zoom.</li>
        <li><strong>Расшифровка.</strong> Когда нужно — «Расшифровать». Текст ляжет в заметку.</li>
        <li><strong>ИИ.</strong> «Конспект», «Задачи», «Ревью» или свой запрос. Всё в заметке можно править и копировать.</li>
      </ol>
      <button class="drop-zone" data-add-audio>
        <strong>Перетащите аудиофайл в окно</strong>
        <span class="small muted">или нажмите, чтобы выбрать: mp3, m4a, wav, aiff, flac, ogg</span>
      </button>
      ${
        noKey
          ? `<p class="start-key small">Для расшифровки и ИИ нужен ключ OpenRouter — <a href="#/settings">подключить</a>.</p>`
          : ""
      }
    </section>`;
  root.querySelector("[data-add-audio]")?.addEventListener("click", async () => addAudioFrom(await files.pickAudio()));
}