<script>
  import { createEventDispatcher } from 'svelte'
  import { NextSpeaker, SkipSpeaker, PauseMeeting, ResumeMeeting, StopMeeting } from '../../wailsjs/go/app/App'
  import { t } from '../lib/i18n'

  export let timerState

  const dispatch = createEventDispatcher()

  $: isPaused = timerState?.paused || false
  $: hasQueue = (timerState?.remainingQueue?.length || 0) > 0

  async function handleNext() {
    await NextSpeaker()
  }

  async function handleSkip() {
    await SkipSpeaker()
  }

  async function handlePauseResume() {
    if (isPaused) {
      await ResumeMeeting()
    } else {
      await PauseMeeting()
    }
  }

  async function handleStop() {
    await StopMeeting()
    dispatch('stop')
  }

  function handleKeydown(e) {
    // ⌘N - Next speaker
    if (e.metaKey && e.key.toLowerCase() === 'n') {
      e.preventDefault()
      handleNext()
    }
    // ⌘S - Skip speaker  
    if (e.metaKey && e.key.toLowerCase() === 's') {
      e.preventDefault()
      handleSkip()
    }
    // Space - Pause/Resume
    if (e.code === 'Space' && !e.metaKey && !e.ctrlKey && !e.altKey) {
      e.preventDefault()
      handlePauseResume()
    }
    // ⌘Q - Stop meeting
    if (e.metaKey && e.key.toLowerCase() === 'q') {
      e.preventDefault()
      handleStop()
    }
  }
</script>

<svelte:window on:keydown={handleKeydown} />

<div class="controls">
  <button class="btn primary" on:click={handleNext}>
    {hasQueue ? $t('controls.next') : $t('controls.stop')}
  </button>

  {#if hasQueue}
    <button class="btn secondary" on:click={handleSkip}>
      {$t('controls.skip')}
    </button>
  {/if}

  <button class="btn secondary pause-btn" on:click={handlePauseResume}>
    {isPaused ? '▶' : '⏸'}
  </button>

  <button class="btn danger" on:click={handleStop}>
    ⏹
  </button>
</div>

<style>
  .controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 12px;
    background: #232f3e;
    border-radius: 12px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .btn.primary {
    flex: 2;
    background: #4a90d9;
    color: white;
  }

  .btn.primary:hover {
    background: #3a7bc8;
  }

  .btn.secondary {
    flex: 1;
    background: #3d4f61;
    color: #e0e0e0;
  }

  .btn.secondary:hover {
    background: #4d5f71;
  }

  .btn.pause-btn {
    flex: 0;
    min-width: 44px;
    font-size: 18px;
  }

  .btn.danger {
    flex: 0;
    min-width: 44px;
    font-size: 18px;
    background: #7f1d1d;
    color: #fca5a5;
  }

  .btn.danger:hover {
    background: #991b1b;
  }

</style>
