<template>
  <BaseBottomSheet :model-value="modelValue" label="Choose frames" @update:model-value="$emit('update:modelValue', $event)">
    <h2 class="device-picker__title">Add to frames</h2>
    <p class="device-picker__sub">Choose which frames will show this photo.</p>

    <div class="device-picker__list">
      <label
        v-for="device in devices"
        :key="device.id"
        class="device-picker__row"
      >
        <input
          type="checkbox"
          class="device-picker__check"
          :checked="selected.includes(device.id)"
          @change="toggle(device.id)"
        />
        <span class="device-picker__name">{{ device.name }}</span>
        <span class="device-picker__orientation">{{ device.orientation }}</span>
      </label>
    </div>

    <BaseButton
      variant="primary"
      class="device-picker__confirm"
      :disabled="selected.length === 0 || uploading"
      @click="$emit('confirm')"
    >
      {{ uploading ? 'Uploading…' : confirmLabel }}
    </BaseButton>
  </BaseBottomSheet>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseBottomSheet from '@/components/BaseBottomSheet.vue'
import BaseButton from '@/components/BaseButton.vue'
import type { Device } from '@/types'

const props = defineProps<{
  modelValue: boolean
  devices: Device[]
  selected: number[]
  uploading?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'update:selected', v: number[]): void
  (e: 'confirm'): void
}>()

function toggle(id: number) {
  if (props.selected.includes(id)) {
    emit('update:selected', props.selected.filter(d => d !== id))
  } else {
    emit('update:selected', [...props.selected, id])
  }
}

const confirmLabel = computed(() => {
  const n = props.selected.length
  return n === 0 ? 'Add to frame' : `Add to ${n} frame${n > 1 ? 's' : ''}`
})
</script>

<style scoped lang="scss">
.device-picker {
  &__title {
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-2);
  }

  &__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
  }

  &__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    min-height: var(--touch-min);
  }

  &__check {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
  }

  &__name {
    flex: 1;
    font-size: var(--text-base);
    font-weight: 600;
  }

  &__orientation {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: capitalize;
  }

  &__confirm {
    width: 100%;
  }
}
</style>
