<template>
  <main class="home-view">
    <!-- Loading -->
    <div v-if="devicesStore.loading" class="home-view__loading" aria-live="polite">
      Loading…
    </div>

    <!-- Empty state -->
    <div v-else-if="devicesStore.devices.length === 0" class="home-view__empty">
      <div class="home-view__empty-card">
        <svg class="home-view__empty-icon" width="48" height="48" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="1.5" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="2"/>
          <circle cx="8.5" cy="8.5" r="1.5"/>
          <polyline points="21,15 16,10 5,21"/>
        </svg>
        <p class="home-view__empty-title">Set up your first frame</p>
        <p class="home-view__empty-sub">
          Power on your pictureFrame device and scan the QR code it displays to get started.
        </p>
      </div>
    </div>

    <!-- Single device — large card -->
    <div v-else-if="devicesStore.devices.length === 1" class="home-view__single">
      <FrameCard
        :deviceId="devicesStore.devices[0].id"
        :name="devicesStore.devices[0].name"
        size="large"
        status="ok"
        :orientation="devicesStore.devices[0].orientation"
        @add-photo="onAddPhoto"
        @edit="onEdit"
      />
    </div>

    <!-- Multiple devices — compact stack -->
    <div v-else class="home-view__list">
      <FrameCard
        v-for="device in devicesStore.devices"
        :key="device.id"
        :deviceId="device.id"
        :name="device.name"
        size="compact"
        status="ok"
        :orientation="device.orientation"
        @add-photo="onAddPhoto"
        @edit="onEdit"
      />
    </div>
  </main>

  <!-- Frame settings sheet -->
  <BaseBottomSheet v-model="sheetOpen" label="Frame settings">
    <h2 class="home-view__sheet-title">Frame settings</h2>

    <div class="home-view__sheet-field">
      <BaseInput
        v-model="editName"
        label="Frame name"
        maxlength="100"
      />
    </div>

    <div class="home-view__sheet-field">
      <p class="home-view__sheet-label">Orientation</p>
      <OrientationPicker v-model="editOrientation" />
    </div>

    <BaseButton
      variant="primary"
      class="home-view__sheet-save"
      :disabled="saving"
      @click="saveSettings"
    >
      {{ saving ? 'Saving…' : 'Save' }}
    </BaseButton>
  </BaseBottomSheet>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import type { Device } from '@/types'
import FrameCard from '@/components/FrameCard.vue'
import BaseBottomSheet from '@/components/BaseBottomSheet.vue'
import BaseButton from '@/components/BaseButton.vue'
import BaseInput from '@/components/BaseInput.vue'
import OrientationPicker from '@/components/OrientationPicker.vue'

const devicesStore = useDevicesStore()

onMounted(() => devicesStore.fetchDevices())

function onAddPhoto(deviceId: number) {
  // Photo upload flow — Epic 3
  console.log('add-photo', deviceId)
}

// ── Settings sheet ────────────────────────────────────────────────────────────

const sheetOpen = ref(false)
const saving = ref(false)
const editingDevice = ref<Device | null>(null)
const editName = ref('')
const editOrientation = ref<Device['orientation']>('landscape')

function onEdit(deviceId: number) {
  const device = devicesStore.devices.find(d => d.id === deviceId)
  if (!device) return
  editingDevice.value = device
  editName.value = device.name
  editOrientation.value = device.orientation
  sheetOpen.value = true
}

async function saveSettings() {
  if (!editingDevice.value) return
  saving.value = true
  try {
    await devicesStore.updateDevice(editingDevice.value.id, {
      name: editName.value.trim() || editingDevice.value.name,
      orientation: editOrientation.value,
    })
    sheetOpen.value = false
  } finally {
    saving.value = false
  }
}
</script>

<style scoped lang="scss">
.home-view {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  &__loading {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-4) 0;
    text-align: center;
  }

  &__empty {
    display: flex;
    justify-content: center;
    padding-top: var(--space-6);
  }

  &__empty-card {
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    max-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  &__empty-icon {
    color: var(--color-text-muted);
    opacity: 0.5;
  }

  &__empty-title {
    font-size: var(--text-md);
    font-weight: 700;
  }

  &__empty-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
  }

  &__single {
    display: flex;
    flex-direction: column;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  &__sheet-title {
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-4);
  }

  &__sheet-field {
    margin-bottom: var(--space-4);
  }

  &__sheet-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
  }

  &__sheet-save {
    width: 100%;
    margin-top: var(--space-2);
  }
}
</style>
