<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Panel } from 'mpr-ui-framework'
import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
import type { FrameBBox, FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
import type { DataSource } from 'mpr-ui-framework'

const props = defineProps<{
  source: DataSource
  status?: 'idle' | 'live' | 'processing' | 'error'
  /** Debug overlay layers passed from parent (editor mode) */
  overlays?: FrameOverlay[]
  /** Frame image from checkpoint (scenario mode) — overrides SSE */
  frameImage?: string | null
  /** Boxes from editor (local CV or server) — merged with SSE boxes */
  editorBoxes?: import('mpr-ui-framework/src/renderers/FrameRenderer.vue').FrameBBox[]
}>()

const imageSrc = ref(props.frameImage ?? '')

// Sync prop → internal ref when checkpoint frame changes
watch(() => props.frameImage, (v) => {
  if (v) imageSrc.value = v
})

// Per-stage box accumulation
const stageBoxes = ref<Record<string, FrameBBox[]>>({})
const stageStatus = ref<Record<string, string>>({})
// Toggles — multiple can be active at once, all start ON
const activeToggles = ref<Set<string>>(new Set())

const STAGE_TABS = [
  { key: 'detect_edges', label: 'Edges', color: '#00bcd4' },
  { key: 'detect_objects', label: 'YOLO', color: '#f5a623' },
  { key: 'preprocess', label: 'Prep', color: '#e0e0e0' },
  { key: 'run_ocr', label: 'OCR', color: '#ff8c42' },
  { key: 'match_brands', label: 'Brands', color: '#3ecf8e' },
  { key: 'escalate_vlm', label: 'VLM', color: '#4f9cf9' },
  { key: 'escalate_cloud', label: 'Cloud', color: '#a78bfa' },
]

// Frame updates — store image, replace (not accumulate) boxes per frame
props.source.on<{
  frame_ref: number
  timestamp: number
  jpeg_b64: string
  boxes: FrameBBox[]
}>('frame_update', (e) => {
  imageSrc.value = e.jpeg_b64

  // Group incoming boxes by stage, replace previous for that stage
  const incoming: Record<string, FrameBBox[]> = {}
  for (const box of e.boxes) {
    const stage = box.stage || 'detect_objects'
    if (!incoming[stage]) incoming[stage] = []
    incoming[stage].push(box)
  }

  for (const [stage, boxes] of Object.entries(incoming)) {
    stageBoxes.value[stage] = boxes
    ensureToggleOn(stage)
  }
})

// Track stage status from graph updates
props.source.on<{ nodes: { id: string; status: string }[] }>('graph_update', (e) => {
  for (const node of e.nodes) {
    stageStatus.value[node.id] = node.status
  }
})

// Detection events also produce boxes
props.source.on<{
  brand: string
  confidence: number
  source: string
  timestamp: number
  frame_ref: number | null
  bbox?: { x: number; y: number; w: number; h: number } | null
}>('detection', (e) => {
  if (!e.bbox) return

  const stage = sourceToStage(e.source)
  const box: FrameBBox = {
    x: e.bbox.x,
    y: e.bbox.y,
    w: e.bbox.w,
    h: e.bbox.h,
    confidence: e.confidence,
    label: e.brand,
    resolved_brand: e.brand,
    source: e.source,
    stage: stage,
  }

  if (!stageBoxes.value[stage]) {
    stageBoxes.value[stage] = []
  }
  stageBoxes.value[stage].push(box)
  ensureToggleOn(stage)
})

function toggleStage(key: string) {
  if (activeToggles.value.has(key)) {
    activeToggles.value.delete(key)
  } else {
    activeToggles.value.add(key)
  }
  // Force reactivity
  activeToggles.value = new Set(activeToggles.value)
}

function ensureToggleOn(stage: string) {
  if (!activeToggles.value.has(stage)) {
    activeToggles.value.add(stage)
    activeToggles.value = new Set(activeToggles.value)
  }
}

function sourceToStage(source: string): string {
  const map: Record<string, string> = {
    ocr: 'match_brands',
    local_vlm: 'escalate_vlm',
    cloud_llm: 'escalate_cloud',
  }
  return map[source] || 'match_brands'
}

// Filtered boxes — show all toggled-on stages + editor boxes
const visibleBoxes = computed<FrameBBox[]>(() => {
  const result: FrameBBox[] = []
  // SSE boxes filtered by toggles
  for (const [stage, boxes] of Object.entries(stageBoxes.value)) {
    if (activeToggles.value.has(stage)) {
      result.push(...boxes)
    }
  }
  // Editor boxes (from local CV or server) — always shown
  if (props.editorBoxes?.length) {
    result.push(...props.editorBoxes)
  }
  return result
})

// Which toggles are visible (stage exists in pipeline)
const visibleTabs = computed(() => {
  return STAGE_TABS.filter((tab) => {
    const status = stageStatus.value[tab.key]
    return status !== undefined
  })
})

// Whether a toggle has data (boxes available)
function hasData(key: string): boolean {
  return (stageBoxes.value[key]?.length || 0) > 0
}


</script>

<template>
  <Panel title="Frame Viewer" :status="status">
    <div class="frame-panel">
      <div class="stage-toggles" v-if="visibleTabs.length > 0">
        <button
          v-for="tab in visibleTabs"
          :key="tab.key"
          :class="['stage-toggle', {
            active: activeToggles.has(tab.key),
            running: stageStatus[tab.key] === 'running',
            done: stageStatus[tab.key] === 'done',
            disabled: !hasData(tab.key),
          }]"
          :style="{ '--toggle-color': tab.color }"
          :disabled="!hasData(tab.key)"
          @click="toggleStage(tab.key)"
        >
          <span class="toggle-dot" />
          {{ tab.label }}
          <span class="toggle-count" v-if="stageBoxes[tab.key]?.length">
            {{ stageBoxes[tab.key].length }}
          </span>
        </button>
      </div>
      <div class="frame-content">
        <FrameRenderer :image-src="imageSrc" :boxes="visibleBoxes" :overlays="overlays" />
      </div>
    </div>
  </Panel>
</template>

<style scoped>
.frame-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stage-toggles {
  display: flex;
  gap: 2px;
  padding: 4px;
  flex-shrink: 0;
  overflow-x: auto;
  background: var(--surface-2);
  border-bottom: var(--panel-border);
}

.stage-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.stage-toggle:hover {
  color: var(--text-secondary);
  background: var(--surface-3);
}

.stage-toggle.active {
  color: var(--text-primary);
  border-color: var(--toggle-color, var(--text-dim));
  background: var(--surface-3);
}

.stage-toggle:not(.active) {
  opacity: 0.5;
}

.stage-toggle:not(.active) .toggle-dot {
  background: var(--text-dim);
}

.stage-toggle.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stage-toggle.disabled:hover {
  background: transparent;
  color: var(--text-dim);
}

.stage-toggle.running .toggle-dot {
  animation: pulse 1s infinite;
}

.toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--toggle-color, var(--text-dim));
}

.toggle-count {
  background: var(--surface-1);
  padding: 0 4px;
  border-radius: 8px;
  font-size: 9px;
}

.frame-content {
  flex: 1;
  min-height: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
</style>
