<script lang="ts">
  /**
   * Keyboard shortcuts (FR-3.19), and the Zwift Click buttons that mirror them.
   * The keyboard remains the fallback: if a Click pod dies or its battery goes
   * mid-ride, it is the only way to keep the session going.
   */
  import { app } from '../lib/app.svelte';

  /** Kept beside the keyboard list so the two cannot drift apart on screen —
   *  they already share one implementation in `App.svelte`. */
  const CONTROLLER: [string, string][] = [
    ['+ / −', 'Shift up / down a virtual gear'],
    ['D-pad ↑ / ↓', 'Gradient +0.5% / −0.5%'],
    ['D-pad ← / →', 'Device screen / ride screen'],
    ['A', 'Pause / resume — save the FIT on the summary'],
    ['B', 'Insert lap marker — start a new ride on the summary'],
    ['Y', 'Shift down a gear — the + pod\u2019s spare shifter'],
    ['Z', 'Profiles and routes'],
  ];

  const BINDINGS: [string, string][] = [
    ['+ / −', 'Shift up / down a virtual gear'],
    ['↑ / ↓', 'Gradient +0.5% / −0.5%'],
    ['Shift + ↑ / ↓', 'Gradient ±2% (coarse)'],
    ['0', 'Reset gradient trim to zero'],
    ['Space', 'Pause / resume'],
    ['M', 'Cycle control mode'],
    ['L', 'Insert lap marker'],
    ['P', 'Profiles and routes'],
    ['D', 'Device / connection screen'],
    ['R', 'Ride screen'],
    ['[ / ]', 'Target down / up (resistance or ERG power)'],
    ['S', 'Save the FIT file (summary screen)'],
    ['N', 'Start a new ride (summary screen)'],
    ['?', 'This list'],
  ];
</script>

<div
  class="scrim"
  role="button"
  tabindex="-1"
  onclick={() => (app.showHelp = false)}
  onkeydown={(e) => e.key === 'Escape' && (app.showHelp = false)}
></div>

<div class="panel">
  <h2>Keyboard</h2>
  <dl>
    {#each BINDINGS as [key, what]}
      <div>
        <dt><span class="kbd">{key}</span></dt>
        <dd>{what}</dd>
      </div>
    {/each}
  </dl>
  <h2>Zwift Click</h2>
  <dl>
    {#each CONTROLLER as [key, what]}
      <div>
        <dt><span class="kbd">{key}</span></dt>
        <dd>{what}</dd>
      </div>
    {/each}
  </dl>
  <!-- Per pod, because a Click v2 is two of them and losing one loses half the
       buttons — the D-pad and shift-down live on the − pod. -->
  <ul class="pods">
    {#each [app.controller?.minus, app.controller?.plus] as pod}
      {#if pod}
        <li class:tone-ok={pod.state === 'connected'} class:tone-idle={pod.state !== 'connected'}>
          <span class="dot"></span>
          {pod.symbol} pod —
          {#if pod.state === 'connected'}
            connected{pod.batteryPercent != null ? `, battery ${pod.batteryPercent}%` : ''}
          {:else if pod.state === 'searching'}
            searching…
          {:else if pod.state === 'reconnecting'}
            reconnecting…
          {:else}
            not connected
          {/if}
        </li>
      {/if}
    {/each}
  </ul>
  {#if !app.controller || app.controller.minus.state !== 'connected' || app.controller.plus.state !== 'connected'}
    <p class="note">
      A Click only advertises just after a button press, so wake the missing pod and connect it
      from the device screen. Every action below works from the keyboard meanwhile.
    </p>
  {/if}
  <p class="note">Every one of these has an on-screen equivalent in the control bar.</p>
</div>

<style>
  .scrim {
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 7, 0.75);
    z-index: 40;
  }

  .panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 41;
    width: min(34rem, 92vw);
    padding: 1.6rem 1.8rem 1.4rem;
    border-radius: 0.9rem;
    background: #0a0e14;
    border: 1px solid var(--hairline);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  }

  h2 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: -0.02em;
  }

  dl {
    margin: 0;
    display: grid;
    gap: 0.55rem;
  }

  dl div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    align-items: baseline;
    gap: 0.8rem;
  }

  dt {
    margin: 0;
  }

  dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
  }

  .pods {
    display: flex;
    gap: 1.2rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    font-weight: 600;
  }

  .pods li {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .note {
    margin: 1.2rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    color: var(--ink-dim);
    font-size: 0.84rem;
    line-height: 1.5;
  }
</style>
