import { createTopBar } from '../components/topbar.js';
import {
  isDeveloperToolsEnabled,
  isDmFileTransferEnabled,
  setDeveloperToolsEnabled,
  setDmFileTransferEnabled,
} from '../services/feature-settings.js';

export const pageMeta = { id: 'advanced-settings-view', title: 'Дополнительные настройки' };

function createToggleRow({ id, title, hint, checked }) {
  const label = document.createElement('label');
  label.className = 'card settings-feature-toggle-row';
  label.htmlFor = id;
  label.innerHTML = `
    <span class="settings-feature-toggle-copy">
      <strong class="settings-feature-toggle-title">${title}</strong>
      <span class="settings-feature-toggle-hint">${hint}</span>
    </span>
    <input class="settings-feature-switch" id="${id}" type="checkbox" ${checked ? 'checked' : ''} />
  `;
  return label;
}

export function render({ navigate, chrome }) {
  const screen = document.createElement('section');
  screen.className = 'stack advanced-settings-screen';

  chrome?.setTopbar(createTopBar({
    title: 'Дополнительные настройки',
    back: { label: '←', onClick: () => navigate('settings-view') },
  }));

  const intro = document.createElement('div');
  intro.className = 'card stack advanced-settings-intro';
  intro.innerHTML = `
    <p class="field-label">Скрытые возможности SHiNE</p>
    <p class="meta-muted">Этот экран открывается пятью быстрыми нажатиями по логотипу в обычных настройках и имеет постоянный адрес <code>/settings/advanced</code>.</p>
  `;

  const developerRow = createToggleRow({
    id: 'advanced-developer-tools',
    title: 'Настройки разработчика',
    hint: 'Показывать блок «Версии» и кнопку настроек разработчика в обычных настройках.',
    checked: isDeveloperToolsEnabled(),
  });

  const filesRow = createToggleRow({
    id: 'advanced-dm-files',
    title: 'Передача файлов в личных сообщениях',
    hint: 'Разрешить отправку новых зашифрованных файлов через удержание кнопки эмодзи. Полученные ранее файлы останутся доступными.',
    checked: isDmFileTransferEnabled(),
  });

  const developerInput = developerRow.querySelector('#advanced-developer-tools');
  const filesInput = filesRow.querySelector('#advanced-dm-files');
  developerInput?.addEventListener('change', () => setDeveloperToolsEnabled(developerInput.checked));
  filesInput?.addEventListener('change', () => setDmFileTransferEnabled(filesInput.checked));

  screen.append(intro, developerRow, filesRow);
  return screen;
}