<template>
  <!-- Mobile gamepad overlay — NES-styled D-pad + action buttons.
       Sends postMessage({ type: 'arcade-input', key, player, action }) to iframe. -->
  <div class="mobile-gamepad">
    <!-- D-Pad (left side) -->
    <div class="gamepad-dpad">
      <button
        class="dpad-btn dpad-up"
        @touchstart.prevent="down('ArrowUp')"
        @touchend.prevent="up('ArrowUp')"
        @touchcancel.prevent="up('ArrowUp')"
        aria-label="Up"
      >
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-6 8h12z"/></svg>
      </button>
      <button
        class="dpad-btn dpad-left"
        @touchstart.prevent="down('ArrowLeft')"
        @touchend.prevent="up('ArrowLeft')"
        @touchcancel.prevent="up('ArrowLeft')"
        aria-label="Left"
      >
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 12l8-6v12z"/></svg>
      </button>
      <div class="dpad-center" />
      <button
        class="dpad-btn dpad-right"
        @touchstart.prevent="down('ArrowRight')"
        @touchend.prevent="up('ArrowRight')"
        @touchcancel.prevent="up('ArrowRight')"
        aria-label="Right"
      >
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 12l-8-6v12z"/></svg>
      </button>
      <button
        class="dpad-btn dpad-down"
        @touchstart.prevent="down('ArrowDown')"
        @touchend.prevent="up('ArrowDown')"
        @touchcancel.prevent="up('ArrowDown')"
        aria-label="Down"
      >
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l6-8H6z"/></svg>
      </button>
    </div>

    <!-- Center: START / SELECT -->
    <div class="gamepad-meta">
      <button
        class="meta-btn"
        @touchstart.prevent="tap('Escape')"
        aria-label="Select"
      >SEL</button>
      <button
        class="meta-btn"
        @touchstart.prevent="tap('Enter')"
        aria-label="Start"
      >START</button>
    </div>

    <!-- Action buttons (right side) -->
    <div class="gamepad-actions">
      <button
        class="action-btn action-b"
        @touchstart.prevent="down('b')"
        @touchend.prevent="up('b')"
        @touchcancel.prevent="up('b')"
        aria-label="Kick"
      >B</button>
      <button
        class="action-btn action-a"
        @touchstart.prevent="down('a')"
        @touchend.prevent="up('a')"
        @touchcancel.prevent="up('a')"
        aria-label="Punch"
      >A</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  iframeRef: HTMLIFrameElement | null
  player?: number
}>()

function send(key: string, action: 'down' | 'up') {
  props.iframeRef?.contentWindow?.postMessage(
    { type: 'arcade-input', key, player: props.player ?? 1, action },
    '*'
  )
}

function down(key: string) { send(key, 'down') }
function up(key: string) { send(key, 'up') }
function tap(key: string) { send(key, 'down'); setTimeout(() => send(key, 'up'), 80) }
</script>

<style scoped>
.mobile-gamepad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 12px 20px;
  padding-bottom: calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ── D-Pad ── */
.gamepad-dpad {
  display: grid;
  grid-template-columns: 48px 48px 48px;
  grid-template-rows: 48px 48px 48px;
  gap: 2px;
  flex-shrink: 0;
}

.dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.1s;
}
.dpad-btn:active {
  background: rgba(251, 146, 60, 0.3);
  color: white;
}
.dpad-btn svg {
  width: 20px;
  height: 20px;
}
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center {
  grid-column: 2;
  grid-row: 2;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

/* ── Meta buttons (START / SELECT) ── */
.gamepad-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.meta-btn {
  padding: 6px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.meta-btn:active {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

/* ── Action buttons (A / B) ── */
.gamepad-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  transition: background 0.1s, transform 0.1s;
}
.action-btn:active {
  transform: scale(0.92);
}

.action-a {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.5);
  color: #fb923c;
}
.action-a:active {
  background: rgba(251, 146, 60, 0.45);
}

.action-b {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.5);
  color: #60a5fa;
}
.action-b:active {
  background: rgba(96, 165, 250, 0.45);
}
</style>
