<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { generateSpecStream } from '@/api/editor'

const props = defineProps<{
  owner: string
  repo: string
}>()

const emit = defineEmits<{
  chunk: [text: string]
  done: []
  start: []
}>()

const auth = useAuthStore()
const description = ref('')
const generating = ref(false)
const error = ref('')
const collapsed = ref(false)

async function handleGenerate() {
  if (!description.value.trim() || generating.value) return

  generating.value = true
  error.value = ''
  emit('start')

  await generateSpecStream(
    auth.org,
    props.owner,
    props.repo,
    { description: description.value.trim() },
    (text) => emit('chunk', text),
    () => {
      generating.value = false
      collapsed.value = true
      emit('done')
    },
    (err) => {
      generating.value = false
      error.value = err
    },
  )
}
</script>

<template>
  <div class="rounded-lg border border-accent-200 dark:border-accent-800 bg-accent-50/50 dark:bg-accent-900/10 p-4">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-sm font-medium text-accent-700 dark:text-accent-300 flex items-center gap-1.5">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
        AI Spec Generator
      </h3>
      <button
        v-if="collapsed"
        class="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
        @click="collapsed = false"
      >
        Expand
      </button>
    </div>

    <div v-if="!collapsed">
      <textarea
        v-model="description"
        :disabled="generating"
        class="w-full border border-border-light dark:border-slate-600 bg-surface-light dark:bg-[#0a0f1a] rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 resize-y"
        rows="3"
        placeholder="Describe the feature you want to spec out..."
      ></textarea>

      <div class="mt-2 flex items-center gap-3">
        <button
          :disabled="!description.trim() || generating"
          class="px-3 py-1.5 text-sm font-medium rounded-md text-white bg-accent-600 hover:bg-accent-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
          @click="handleGenerate"
        >
          <svg v-if="generating" class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          {{ generating ? 'Generating...' : 'Generate Spec' }}
        </button>

        <span v-if="generating" class="text-xs text-slate-500">
          Streaming from Claude...
        </span>
      </div>

      <p v-if="error" class="mt-2 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
    </div>
    <p v-else class="text-xs text-slate-500">Spec generated from AI. Click Expand to generate again.</p>
  </div>
</template>
