<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const container = ref<HTMLElement | null>(null)
const isVisible = ref(false)
const step = ref(0)
const playing = ref(false)
let observer: IntersectionObserver | null = null
let timer: ReturnType<typeof setTimeout> | null = null

const STEPS = 5
const STEP_DELAY = 800

function play() {
  if (playing.value) return
  playing.value = true
  step.value = 0
  advance()
}

function advance() {
  timer = setTimeout(() => {
    if (step.value < STEPS) {
      step.value++
      advance()
    } else {
      playing.value = false
    }
  }, STEP_DELAY)
}

function replay() {
  if (timer) clearTimeout(timer)
  playing.value = false
  step.value = 0
  timer = setTimeout(play, 200)
}

onMounted(() => {
  observer = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting && !isVisible.value) {
        isVisible.value = true
        play()
      }
    },
    { threshold: 0.3 }
  )
  if (container.value) observer.observe(container.value)
})

onUnmounted(() => {
  observer?.disconnect()
  if (timer) clearTimeout(timer)
})
</script>

<template>
  <section id="demo" ref="container" class="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
    <p class="font-mono text-xs uppercase tracking-[0.15em] text-accent-500 text-center mb-3">See it in action</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Every PR gets spec-aware analysis
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-10">
      When a developer opens a PR, the Specwright agent comments with a detailed spec realization report.
    </p>

    <!-- PR Comment mockup -->
    <div class="max-w-3xl mx-auto rounded-xl border border-border-light dark:border-slate-800 overflow-hidden bg-surface-light dark:bg-surface-elevated shadow-sm">
      <!-- Header -->
      <div class="flex items-center gap-3 px-4 py-3 border-b border-border-light dark:border-slate-800">
        <div class="w-7 h-7 rounded-full bg-gradient-to-r from-accent-500 to-cyan-400 flex items-center justify-center text-white text-xs font-bold shrink-0">S</div>
        <p class="text-sm text-slate-500 dark:text-slate-400">
          <strong class="text-slate-900 dark:text-white">specwright</strong> bot commented on <strong class="text-slate-900 dark:text-white">PR #142</strong>
        </p>
      </div>

      <!-- Body -->
      <div class="px-4 sm:px-6 py-4 text-sm space-y-4">
        <!-- Summary -->
        <transition name="fade">
          <p v-if="step >= 1" class="border-l-2 border-accent-500 pl-4 text-slate-600 dark:text-slate-400">
            This PR implements retry logic for the payments service. It addresses 2 of 3 acceptance criteria in
            <code class="px-1.5 py-0.5 rounded text-xs font-mono bg-surface-light-elevated dark:bg-surface-alt text-accent-500">payments-overhaul.md &sect;3.2</code>
            and introduces a new error type not yet documented.
          </p>
        </transition>

        <!-- Spec Realization -->
        <div v-if="step >= 2">
          <p class="font-semibold text-slate-900 dark:text-white mb-2">Spec Realization</p>
          <div class="space-y-1.5">
            <div class="flex items-start gap-2 text-slate-600 dark:text-slate-400">
              <span class="text-emerald-500 shrink-0">&#10003;</span>
              <span><strong>&sect;3.2 AC1</strong> Exponential backoff &mdash; realized in <code class="px-1 py-0.5 rounded text-xs font-mono bg-surface-light-elevated dark:bg-surface-alt text-accent-500">src/payments/retry.ts:42</code></span>
            </div>
            <transition name="fade">
              <div v-if="step >= 3" class="flex items-start gap-2 text-slate-600 dark:text-slate-400">
                <span class="text-amber-500 shrink-0">&#9888;</span>
                <span><strong>&sect;3.2 AC2</strong> Max 3 retries &mdash; code uses max 5. Update spec or code?</span>
              </div>
            </transition>
            <transition name="fade">
              <div v-if="step >= 3" class="flex items-start gap-2 text-slate-600 dark:text-slate-400">
                <span class="text-slate-400 shrink-0">&#9744;</span>
                <span><strong>&sect;3.2 AC3</strong> Preserve idempotency key across retries &mdash; not addressed</span>
              </div>
            </transition>
          </div>
        </div>

        <!-- Other Docs Affected -->
        <transition name="fade">
          <div v-if="step >= 4" class="pt-3 border-t border-border-light dark:border-slate-800">
            <p class="font-semibold text-slate-900 dark:text-white text-sm mb-2">Other Docs Affected</p>
            <div class="space-y-1.5">
              <div class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
                <span class="text-amber-500 shrink-0">&#9888;</span>
                <span><code class="px-1 py-0.5 rounded text-xs font-mono bg-surface-light-elevated dark:bg-surface-alt text-accent-500">README.md</code> &sect;Error Handling &mdash; missing PaymentTimeoutError</span>
              </div>
              <div class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
                <span class="text-amber-500 shrink-0">&#9888;</span>
                <span><code class="px-1 py-0.5 rounded text-xs font-mono bg-surface-light-elevated dark:bg-surface-alt text-accent-500">docs/architecture.md</code> &sect;Retry Strategy &mdash; references &ldquo;3 retries,&rdquo; now stale</span>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <!-- Actions -->
      <transition name="fade">
        <div v-if="step >= 5" class="px-4 py-3 border-t border-border-light dark:border-slate-800 flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-md text-xs font-medium text-slate-500 bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-700">Update spec</span>
          <span class="px-3 py-1 rounded-md text-xs font-medium text-slate-500 bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-700">Create doc PR</span>
          <span class="px-3 py-1 rounded-md text-xs font-medium text-slate-500 bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-700">@specwright reanalyze</span>
          <span class="px-3 py-1 rounded-md text-xs font-medium text-slate-500 bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-700">Dismiss</span>
        </div>
      </transition>
    </div>

    <!-- Replay button -->
    <div class="text-center mt-6">
      <button
        v-if="!playing && step >= STEPS"
        class="text-sm font-medium text-accent-500 hover:text-accent-400 transition-colors"
        @click="replay"
      >
        Replay demo &rarr;
      </button>
    </div>
  </section>
</template>

<style scoped>
.fade-enter-active { transition: opacity 0.4s ease, transform 0.4s ease; }
.fade-enter-from { opacity: 0; transform: translateY(4px); }
</style>
