<template>
  <div class="p-6 max-w-4xl mx-auto">
    <div class="mb-5">
      <h1 class="text-text-primary text-xl font-semibold mb-1">Diagnose</h1>
      <p class="text-text-dim text-sm">
        Quick: describe a symptom to surface log evidence.
        Structured: tag a timestamped incident record.
      </p>
    </div>

    <!-- Tab toggle -->
    <div class="flex gap-1 mb-6 border-b border-surface-border">
      <button
        v-for="t in tabs"
        :key="t.key"
        @click="activeTab = t.key"
        :class="[
          'px-4 py-2 text-sm transition-colors border-b-2 -mb-px',
          activeTab === t.key
            ? 'border-accent text-accent'
            : 'border-transparent text-text-muted hover:text-text-primary'
        ]"
      >{{ t.label }}</button>
    </div>

    <!-- Quick tab -->
    <QuickCapture v-if="activeTab === 'quick'" />

    <!-- Structured tab -->
    <template v-else>
      <IncidentForm @created="onCreated" />
      <div
        v-if="createdLabel"
        class="mt-4 p-3 rounded bg-green-900/30 border border-green-700/40 text-green-400 text-sm"
      >
        Incident "{{ createdLabel }}" saved —
        <RouterLink to="/incidents" class="underline underline-offset-2">view in Incidents</RouterLink>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import QuickCapture from '@/components/QuickCapture.vue'
import IncidentForm from '@/components/IncidentForm.vue'

const route = useRoute()
const tabs: { key: 'quick' | 'structured'; label: string }[] = [
  { key: 'quick',      label: 'Quick' },
  { key: 'structured', label: 'Structured' },
]
const activeTab    = ref<'quick' | 'structured'>('quick')
const createdLabel = ref('')

onMounted(() => {
  if (route.query.tab === 'structured') activeTab.value = 'structured'
})

watch(() => route.query.tab, (tab) => {
  if (tab === 'structured' || tab === 'quick') activeTab.value = tab
})

function onCreated(label: string) {
  createdLabel.value = label
  setTimeout(() => { createdLabel.value = '' }, 4000)
}
</script>
