<script lang="ts">
  import { preferences, type ThemeName } from '$lib/stores/preferencesStore';

  export let replayBoot: () => void;

  function setTheme(theme: ThemeName) {
    preferences.setTheme(theme);
  }

  function setSimpleMode(event: Event) {
    preferences.updatePreference({ simpleModePreferred: (event.currentTarget as HTMLInputElement).checked });
  }
</script>

<section class="control-panel" aria-label="Control Panel">
  <h2>Control Panel</h2>
  <div class="control-grid">
    <section>
      <h3>Boot</h3>
      <p>Replay the verification identity screen and ianOS boot sequence.</p>
      <button type="button" on:click={replayBoot}>Replay Boot</button>
    </section>
    <section>
      <h3>Simple Mode</h3>
      <label class="switch">
        <input type="checkbox" checked={$preferences.simpleModePreferred} on:change={setSimpleMode} />
        <span>Prefer simple reading mode</span>
      </label>
      <a href="/simple">Open Simple Mode</a>
    </section>
    <section>
      <h3>Theme</h3>
      <div class="segmented" aria-label="Theme selector">
        <button type="button" class:active={$preferences.theme === 'ianos'} on:click={() => setTheme('ianos')}>ianOS</button>
        <button type="button" class:active={$preferences.theme === 'verified'} on:click={() => setTheme('verified')}>Verified</button>
      </div>
    </section>
    <section>
      <h3>Privacy</h3>
      <p>No analytics, no autoplay audio, no login, no user tracking. The only persistence is local UI preference storage.</p>
    </section>
  </div>
</section>
