<template>
  <div
    :class="[
      'frame-card',
      `frame-card--${size}`,
      status !== 'ok' && `frame-card--${status}`,
    ]"
  >
    <!-- Status badge (color + text — never color alone) -->
    <div v-if="status !== 'ok'" class="frame-card__status-badge" aria-live="polite">
      <span class="frame-card__status-dot" aria-hidden="true" />
      {{ status === 'offline' ? 'Offline' : 'Sync issue' }}
    </div>

    <!-- Settings button (large card only) -->
    <button
      v-if="size === 'large'"
      class="frame-card__settings-btn"
      type="button"
      aria-label="Frame settings"
      @click="$emit('edit', deviceId)"
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
        <circle cx="12" cy="12" r="3"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
      </svg>
    </button>

    <!-- Preview area -->
    <div class="frame-card__preview" :style="previewStyle">
      <img
        v-if="thumbnailUrl"
        :src="thumbnailUrl"
        :alt="`Current photo on ${name}`"
        class="frame-card__img"
      />
      <div v-else class="frame-card__empty-preview" aria-hidden="true">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <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>
      </div>
    </div>

    <div class="frame-card__body">
      <p class="frame-card__name">{{ name }}</p>
      <p v-if="size === 'compact'" class="frame-card__count">
        {{ photoCount }} {{ photoCount === 1 ? 'photo' : 'photos' }}
      </p>

      <BaseButton
        :variant="size === 'large' ? 'primary' : 'icon-pill'"
        :aria-label="size === 'large' ? `Add photo to ${name}` : `Add photo to ${name}`"
        class="frame-card__add-btn"
        @click="$emit('add-photo', deviceId)"
      >
        <span v-if="size === 'large'">+ Add Photo</span>
        <span v-else aria-hidden="true">+</span>
      </BaseButton>
    </div>
  </div>
</template>

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

const props = defineProps<{
  deviceId: number
  name: string
  size: 'large' | 'compact'
  status: 'ok' | 'offline' | 'sync-fail'
  orientation: 'landscape' | 'portrait'
  thumbnailUrl?: string
  photoCount?: number
}>()

defineEmits<{ 'add-photo': [deviceId: number]; edit: [deviceId: number] }>()

const previewStyle = computed(() =>
  props.size === 'large'
    ? { aspectRatio: props.orientation === 'portrait' ? '3/5' : '5/3' }
    : {}
)
</script>

<style scoped lang="scss">
.frame-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast);

  &--offline  { border-color: #c0392b; }
  &--sync-fail { border-color: #c49a20; }

  &__status-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--color-surface-2);

    .frame-card--offline  & { color: #c0392b; }
    .frame-card--sync-fail & { color: #8a6a00; }
  }

  &__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;

    .frame-card--offline  & { background: #c0392b; }
    .frame-card--sync-fail & { background: #c49a20; }
  }

  // ── Large (single device) ────────────────────────────────────────────────
  &--large &__preview {
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--large &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  &--large &__body {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  &--large &__name {
    font-size: var(--text-md);
    font-weight: 700;
  }

  // ── Compact (multi device) ───────────────────────────────────────────────
  &--compact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  &--compact &__preview {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  &--compact &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &--compact &__empty-preview {
    color: var(--color-text-muted);
    opacity: 0.4;
  }

  &--compact &__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  &--compact &__name {
    font-size: var(--text-base);
    font-weight: 700;
  }

  &--compact &__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  &__add-btn { flex-shrink: 0; }
}
</style>
