<script setup lang="ts">
import { useSetupStore } from '../../stores/setup'
import StepDatabase from './StepDatabase.vue'
import StepTables from './StepTables.vue'
import StepLLM from './StepLLM.vue'
import StepTest from './StepTest.vue'

const setupStore = useSetupStore()

const steps = [
  { label: 'Database', component: StepDatabase },
  { label: 'Tables', component: StepTables },
  { label: 'LLM Setup', component: StepLLM },
  { label: 'Test', component: StepTest },
]

function launchApp() {
  globalThis.window.location.reload()
}
</script>

<template>
  <div class="min-h-screen bg-dark-950 flex items-center justify-center">
    <div class="w-full max-w-2xl mx-4">
      <!-- Header -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-primary-400 mb-2">V3Q.AI Setup</h1>
        <p class="text-dark-400">Configure your data sources and AI services</p>
      </div>

      <!-- Step indicator -->
      <div class="flex items-center justify-center gap-2 mb-8">
        <template v-for="(step, i) in steps" :key="i">
          <div
            :class="[
              'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium',
              i <= setupStore.currentStep ? 'bg-primary-600 text-white' : 'bg-dark-700 text-dark-400'
            ]"
          >{{ i + 1 }}</div>
          <div v-if="i < steps.length - 1" :class="['w-12 h-0.5', i < setupStore.currentStep ? 'bg-primary-600' : 'bg-dark-700']" />
        </template>
      </div>

      <!-- Step content -->
      <div class="card">
        <component :is="steps[setupStore.currentStep].component" />

        <!-- Navigation -->
        <div class="flex justify-between mt-6 pt-4 border-t border-dark-700">
          <button
            v-if="setupStore.currentStep > 0"
            @click="setupStore.prevStep()"
            class="btn-secondary"
          >Back</button>
          <div v-else />

          <button
            v-if="setupStore.currentStep < steps.length - 1"
            @click="setupStore.nextStep()"
            class="btn-primary"
          >Next</button>
          <button
            v-else
            @click="launchApp()"
            class="btn-primary"
          >Launch V3Q.AI</button>
        </div>
      </div>
    </div>
  </div>
</template>
