<template>
  <div class="row full-height">
    <div class="col-3 q-pa-sm bg-grey-1">
      <q-list dense bordered class="vertical-nav">
        <q-item v-for="(s, idx) in steps" :key="s.id" clickable @click="active = idx" :active="active === idx">
          <q-item-section>
            <div class="text-body1">{{ idx + 1 }}. {{ s.title }}</div>

          </q-item-section>
        </q-item>
      </q-list>
    </div>

    <div class="col q-pa-md full-height">
      <q-card flat class="q-pa-md full-height">
        <q-card-section>
          <div v-if="!currentComponent" class="text-h6">{{ steps[active]?.title }}</div>
          <component
            v-if="currentComponent && currentStep"
            :is="currentComponent"
            :step="currentStep"
            @next="onChildNext"
            @prev="onChildPrev"
          />
          <div v-else class="q-mt-md"><!-- placeholder: no dynamic component for this step -->
          </div>
        </q-card-section>
      </q-card>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineAsyncComponent } from 'vue'
import type { StepDescriptor } from '../types/types'

const rawSteps = [
  { id: 'welcome', title: 'Benvenuto', order: 0 },
  { id: 'taxpayer', title: 'Dati contribuente e dichiarazione precedente', order: 1 },
  { id: 'marital', title: 'Stato civile', order: 2 },
  { id: 'children', title: 'Figli', order: 3 },
  { id: 'income', title: 'Redditi', order: 4 },
  { id: 'professionalExpenses', title: 'Spese professionali', order: 5 },
  { id: 'sideIncome', title: 'Reddito accessorio', order: 6 },
  { id: 'annuities', title: 'Rendite', order: 7 },
  { id: 'insurance', title: 'Spese assicurative e mediche', order: 8 },
  { id: 'pillar3', title: 'Polizze 3A / 3B', order: 9 },
  { id: 'bankAccounts', title: 'Conti bancari', order: 10 },
  { id: 'otherAssets', title: 'Altri beni / averi', order: 11 },
  { id: 'debts', title: 'Debiti / ipoteche', order: 12 },
  { id: 'properties', title: 'Immobili', order: 13 },
  { id: 'foreign', title: 'Redditi o averi all’estero', order: 14 }
] as { id: string; title: string; order: number }[]

const maxOrder = Math.max(...rawSteps.map(s => s.order))
const steps: StepDescriptor[] = new Array(maxOrder + 1).fill(undefined).map(() => ({} as StepDescriptor))
rawSteps.forEach(s => {
  steps[s.order] = { id: s.id, title: s.title, order: s.order }
})

const active = ref(0)

const currentComponent = computed(() => {
  const id = steps[active.value]?.id
  if (id === 'welcome') return defineAsyncComponent(() => import('./steps/WelcomeStep.vue'))
  if (id === 'taxpayer') return defineAsyncComponent(() => import('./steps/TaxpayerStep.vue'))
  if (id === 'marital') return defineAsyncComponent(() => import('./steps/MaritalStep.vue'))
  if (id === 'children') return defineAsyncComponent(() => import('./steps/ChildrenStep.vue'))
  if (id === 'income') return defineAsyncComponent(() => import('./steps/IncomeStep.vue'))
  if (id === 'professionalExpenses') return defineAsyncComponent(() => import('./steps/ProfessionalExpensesStep.vue'))
  if (id === 'sideIncome') return defineAsyncComponent(() => import('./steps/SideIncomeStep.vue'))
  return null
})

  const currentStep = computed<StepDescriptor | undefined>(() => steps[active.value])

// navigation handled by child step events via onChildNext/onChildPrev

function onChildNext(payload: unknown) {
  // payload may be a next step id or undefined
  if (typeof payload === 'string') {
    const idx = steps.findIndex(s => s.id === payload)
    if (idx !== -1) {
      active.value = idx
      return
    }
  }
  // default: move to next step index if available
  if (active.value < steps.length - 1) active.value++
}

function onChildPrev(payload: unknown) {
  // payload may be a prev step id or undefined
  if (typeof payload === 'string') {
    const idx = steps.findIndex(s => s.id === payload)
    if (idx !== -1) {
      active.value = idx
      return
    }
  }
  if (active.value > 0) active.value--
}
</script>

<style scoped>
.q-stepper { max-width: 900px; margin: 0 auto; }

.full-height { height: 100%; }

.vertical-nav .q-item {
  border-radius: 4px;
  margin-bottom: 4px;
  max-width: 350px;
}
.vertical-nav .q-item--active {
  background-color: var(--q-color-primary) !important;
}

.vertical-nav .q-item--active .text-body1,
.vertical-nav .q-item--active .q-item__label {
  font-weight: 700 !important;
}

</style>
