<script setup lang="ts">
import { useLeadForm } from '../composables/useLeadForm'
import { useContent } from '../composables/useContent'
import StepIndicator from './StepIndicator.vue'
import EquipmentStep from './EquipmentStep.vue'
import PhotoUpload from './PhotoUpload.vue'
import ScheduleStep from './ScheduleStep.vue'
import ContactStep from './ContactStep.vue'
import ReviewStep from './ReviewStep.vue'
import SuccessScreen from './SuccessScreen.vue'

const {
  currentStep,
  currentStepIndex,
  isFirstStep,
  isLastStep,
  submitted,
  steps,
  stepLabels,
  nextStep,
  prevStep,
  goToStep,
  submitForm,
} = useLeadForm()

const { content } = useContent()
</script>

<template>
  <div v-if="submitted" class="animate-fade-in">
    <SuccessScreen />
  </div>

  <div v-else>
    <StepIndicator
      :steps="[...steps]"
      :step-labels="stepLabels"
      :current-index="currentStepIndex"
      @go-to="goToStep"
    />

    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <EquipmentStep v-if="currentStep === 'equipment'" />
      <PhotoUpload v-else-if="currentStep === 'photos'" />
      <ScheduleStep v-else-if="currentStep === 'schedule'" />
      <ContactStep v-else-if="currentStep === 'contact'" />
      <ReviewStep v-else-if="currentStep === 'review'" />

      <!-- Navigation -->
      <div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
        <button
          v-if="!isFirstStep"
          type="button"
          class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          @click="prevStep"
        >
          {{ content.navigation.back }}
        </button>
        <div v-else />

        <button
          v-if="!isLastStep"
          type="button"
          class="px-5 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-dark transition-colors"
          @click="nextStep"
        >
          {{ content.navigation.continue }}
        </button>
        <button
          v-else
          type="button"
          class="px-6 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-dark transition-colors"
          @click="submitForm"
        >
          {{ content.navigation.submit }}
        </button>
      </div>
    </div>
  </div>
</template>
