<template>
  <div class="orientation-picker" role="radiogroup" aria-label="Display orientation">
    <button
      v-for="opt in OPTIONS"
      :key="opt.value"
      type="button"
      role="radio"
      :aria-checked="modelValue === opt.value"
      :aria-label="opt.label"
      :class="['orientation-opt', { 'orientation-opt--active': modelValue === opt.value }]"
      @click="$emit('update:modelValue', opt.value)"
    >
      <!-- Frame diagram: rectangle + ribbon indicator -->
      <svg
        class="orientation-opt__diagram"
        :viewBox="opt.viewBox"
        fill="none"
        aria-hidden="true"
      >
        <!-- Display body -->
        <rect v-bind="opt.rect" rx="2"
          :stroke="modelValue === opt.value ? 'var(--color-primary)' : 'currentColor'"
          stroke-width="1.5"
          :fill="modelValue === opt.value ? 'color-mix(in srgb, var(--color-primary) 12%, transparent)' : 'var(--color-surface-2)'"
        />
        <!-- Ribbon cable indicator -->
        <rect v-bind="opt.ribbon"
          :fill="modelValue === opt.value ? 'var(--color-primary)' : 'var(--color-text-muted)'"
          rx="1"
        />
      </svg>
      <span class="orientation-opt__label">{{ opt.label }}</span>
      <span class="orientation-opt__sub">{{ opt.sub }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { Device } from '@/types'

type Orientation = Device['orientation']

defineProps<{ modelValue: Orientation }>()
defineEmits<{ 'update:modelValue': [value: Orientation] }>()

// All diagrams use a 48×48 viewBox.
// rect = the display body; ribbon = the cable tab protruding from one edge.
const OPTIONS: Array<{
  value: Orientation
  label: string
  sub: string
  viewBox: string
  rect: Record<string, number>
  ribbon: Record<string, number>
}> = [
  {
    value: 'landscape',
    label: 'Landscape',
    sub: 'Ribbon at bottom',
    viewBox: '0 0 48 48',
    rect:   { x: 4,  y: 12, width: 40, height: 24 },
    ribbon: { x: 20, y: 36, width: 8,  height: 5  },
  },
  {
    value: 'portrait',
    label: 'Portrait',
    sub: 'Ribbon on left',
    viewBox: '0 0 48 48',
    rect:   { x: 12, y: 4,  width: 24, height: 40 },
    ribbon: { x: 7,  y: 20, width: 5,  height: 8  },
  },
]
</script>

<style scoped lang="scss">
.orientation-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.orientation-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast);
  min-height: var(--touch-min);

  &--active {
    border-color: var(--color-primary);
  }

  &__diagram {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
  }

  &__label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
  }

  &__sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
  }
}
</style>
