<template>
  <div class="scanner-wrapper" :class="{ active: showScanner }">
    <!-- Compact Scanner View (when enabled) -->
    <div v-if="showScanner" class="scanner-section">
      <div class="scanner-video-container-inline">
        <!-- Quagga will inject video and canvas here -->
        <div class="scanner-frame-inline"></div>
      </div>
      <!-- Inline status indicator -->
      <div class="scanner-status-inline" :class="{ processing: isProcessingScan, error: scannerError }">
        <i :class="scannerError ? 'ti ti-alert-circle' : 'ti ti-scan'"></i>
        <span>{{ scannerError || statusText }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  showScanner: Boolean,
  scannerError: String,
  isProcessingScan: Boolean,
  loading: Boolean
})

const statusText = computed(() => {
  if (props.loading) return 'Searching...'
  if (props.isProcessingScan) return 'Processing...'
  return 'Ready to scan'
})
</script>

<style scoped>
/* Barcode Scanner Styles - Compact View */
.scanner-wrapper {
  margin-bottom: 12px;
}

.scanner-section {
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
  border: 2px solid #2a5a5a;
}

.scanner-video-container-inline {
  position: relative;
  width: 100%;
  height: 120px;
  background: #000000;
  overflow: hidden;
}

.scanner-video-container-inline :deep(video),
.scanner-video-container-inline :deep(canvas) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.scanner-video-container-inline :deep(canvas.drawingBuffer) {
  position: absolute;
  top: 0;
  left: 0;
}

.scanner-frame-inline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 50%;
  border: 2px solid #6ee7b7;
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: pulse 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
  }
}

.scanner-frame-inline::before,
.scanner-frame-inline::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #6ee7b7;
}

.scanner-frame-inline::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.scanner-frame-inline::after {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}

/* Inline status bar */
.scanner-status-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: #1f3b3b;
  color: #6ee7b7;
  font-size: 13px;
  font-weight: 600;
}

.scanner-status-inline i {
  font-size: 16px;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.scanner-status-inline.processing {
  background: #3a3a1a;
  color: #fbbf24;
}

.scanner-status-inline.error {
  background: #3a1a1a;
  color: #ff6b6b;
}

.scanner-status-inline.error i {
  animation: none;
}

@keyframes scanPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Tablet landscape - even more compact */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .scanner-wrapper {
    max-width: 400px;
    margin: 0 auto 12px auto;
  }

  .scanner-video-container-inline {
    height: 100px;
  }
}
</style>
