<script lang="ts">
  import type { EvalResult } from '../lib/model';
  import { t } from '../lib/i18n/index.svelte';

  let {
    preview,
    hints,
    busy,
    ambiguous,
    dir,
    ondraw,
    onskip,
    onshuffle,
    onhint,
    ondir,
  }: {
    preview: EvalResult | null;
    hints: number;
    busy: boolean;
    ambiguous: boolean;
    dir: 'H' | 'V';
    ondraw: () => void;
    onskip: () => void;
    onshuffle: () => void;
    onhint: () => void;
    ondir: () => void;
  } = $props();
</script>

<div class="controls">
  <div class="preview">
    {#if preview}
      {#if preview.legal}
        <span class="ok">{t('game.preview', { n: preview.score })}</span>
      {:else}
        <span class="bad">{t('game.previewIllegal')}</span>
      {/if}
    {/if}
    {#if ambiguous}
      <button class="dir" onclick={ondir} title="direction">{dir === 'H' ? '↔' : '↕'}</button>
    {/if}
  </div>
  <div class="row">
    <button onclick={ondraw} disabled={busy}>{t('game.draw')}</button>
    <button onclick={onskip} disabled={busy}>{t('game.skip')}</button>
    <button onclick={onshuffle} disabled={busy}>{t('game.shuffle')}</button>
    <button class="hint" onclick={onhint} disabled={busy || hints <= 0}>
      {t('game.hint')}{hints > 0 ? ` (${hints})` : ''}
    </button>
  </div>
</div>

<style>
  .controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .preview {
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
  }
  .ok {
    color: var(--ok);
  }
  .bad {
    color: var(--danger);
  }
  .dir {
    margin-left: auto;
    width: 34px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }
  .row {
    display: flex;
    gap: 6px;
  }
  .row button {
    flex: 1;
    padding: 11px 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-weight: 600;
  }
  .row button:disabled {
    opacity: 0.45;
  }
  .hint {
    color: var(--accent);
  }
</style>
