<script lang="ts">
  import { onDestroy } from 'svelte'
  import { Note } from 'tonal'
  import { CHROMATIC_ROOTS } from '../../lib/music/theory'
  import { Drone } from '../../lib/audio/drone'
  import { keepAwake, allowSleep } from '../../lib/wakeLock'

  interface Props {
    root?: string
    octave?: number
  }
  // Bindable so a parent (T6) can tie a fretboard to the drone's root.
  let { root = $bindable('A'), octave = $bindable(3) }: Props = $props()

  let volume = $state(0.35)
  let playing = $state(false)
  const drone = new Drone()

  let midi = $derived(Note.midi(`${root}${octave}`) ?? 57)

  // Follow root/octave changes live while playing.
  $effect(() => {
    if (playing) drone.setNote(midi)
  })

  async function toggle() {
    if (playing) {
      drone.stop()
      playing = false
      allowSleep()
    } else {
      await drone.start(midi)
      drone.setVolume(volume)
      playing = true
      keepAwake()
    }
  }
  function onVol(e: Event) {
    volume = Number((e.target as HTMLInputElement).value)
    drone.setVolume(volume)
  }

  onDestroy(() => {
    drone.stop()
    allowSleep()
  })
</script>

<section class="drone">
  <button class="play" class:playing onclick={toggle} aria-label={playing ? 'Stop drone' : 'Play drone'}>
    <span class="glyph">{playing ? '❚❚' : '▶'}</span>
    {playing ? 'Stop drone' : 'Play drone'}
    <span class="note num">{root}<sub>{octave}</sub></span>
  </button>

  <div class="row">
    <span class="eyebrow">Root</span>
    <div class="chips">
      {#each CHROMATIC_ROOTS as r}
        <button class="chip" class:sel={r === root} onclick={() => (root = r)}>{r}</button>
      {/each}
    </div>
  </div>

  <div class="row inline">
    <div class="oct">
      <span class="eyebrow">Octave</span>
      <div class="chips">
        {#each [2, 3, 4] as o}
          <button class="chip" class:sel={o === octave} onclick={() => (octave = o)}>{o}</button>
        {/each}
      </div>
    </div>
    <label class="vol">
      <span class="eyebrow">Volume</span>
      <input type="range" min="0" max="1" step="0.01" value={volume} oninput={onVol} aria-label="Drone volume" />
    </label>
  </div>
</section>

<style>
  .drone {
    background: var(--walnut);
    border: 1px solid var(--fretwire-dim);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .play {
    width: 100%;
    padding: 0.9rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    background: var(--tubeglow);
    color: #201607;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .play.playing { background: transparent; color: var(--tubeglow); border: 1px solid var(--tubeglow-soft); }
  .note { margin-left: 0.4rem; font-weight: 500; }
  .note sub { font-size: 0.6em; }
  .row { display: flex; flex-direction: column; gap: 0.5rem; }
  .row.inline { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
  .chip {
    min-width: 2.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--walnut-hi);
    border: 1px solid var(--fretwire-dim);
    border-radius: 999px;
    color: var(--inlay-dim);
    font-family: var(--font-mono);
    font-size: var(--step-0);
    text-align: center;
  }
  .chip.sel { color: var(--tubeglow); border-color: var(--tubeglow-soft); }
  .vol { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; max-width: 45%; }
  .vol input { accent-color: var(--tubeglow); width: 100%; }
</style>
