<script setup lang="ts">
import { ref } from 'vue'
import CreatePasswordStep from './CreatePasswordStep.vue'
import SeedPhraseDisplayStep from './SeedPhraseDisplayStep.vue'
import ConfirmSeedStep from './ConfirmSeedStep.vue'
import WalletCreatedStep from './WalletCreatedStep.vue'

const emit = defineEmits<{
  goToRecover: []
  accessWallet: []
  goToWelcome: []
}>()

// TODO: Import useNeptuneWallet composable
// const { initWasm, generateWallet, createKeystore, clearWallet } = useNeptuneWallet()

const step = ref(1)
const seedPhrase = ref<string[]>([])
const password = ref('')
const isLoading = ref(false)

const handleGoToRecover = () => {
  emit('goToRecover')
}

const handleGoToWelcome = () => {
  emit('goToWelcome')
}

const handleNextFromPassword = async (pwd: string) => {
  try {
    isLoading.value = true
    // TODO: Generate wallet
    // const result = await generateWallet()
    // seedPhrase.value = result.seed_phrase

    // Mock seed phrase for now
    seedPhrase.value = [
      'abandon',
      'ability',
      'able',
      'about',
      'above',
      'absent',
      'absorb',
      'abstract',
      'absurd',
      'abuse',
      'access',
      'accident',
      'account',
      'accuse',
      'achieve',
      'acid',
      'acoustic',
      'acquire',
    ]

    password.value = pwd
    step.value = 2
  } catch (err) {
    console.error('Failed to generate wallet:', err)
  } finally {
    isLoading.value = false
  }
}

const handleBackToPassword = () => {
  step.value = 1
}

const handleNextToConfirm = () => {
  step.value = 3
}

const handleBackToSeedDisplay = () => {
  step.value = 2
}

const handleNextToSuccess = () => {
  step.value = 4
}

const handleAccessWallet = async () => {
  try {
    isLoading.value = true
    // TODO: Create keystore
    // const seedPhraseString = seedPhrase.value.join(' ')
    // await createKeystore(seedPhraseString, password.value)

    emit('accessWallet')
  } catch (err) {
    console.error('Failed to create keystore:', err)
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <div>
    <!-- Step 1: Create Password -->
    <CreatePasswordStep
      v-if="step === 1"
      @next="handleNextFromPassword"
      @go-to-recover="handleGoToRecover"
      @go-to-welcome="handleGoToWelcome"
    />

    <!-- Step 2: Display Seed Phrase -->
    <div
      v-else-if="step === 2"
      class="flex min-h-screen items-center justify-center bg-linear-to-br from-background via-background to-primary/5 p-4"
    >
      <Card class="w-full max-w-2xl border-2 border-border/50 shadow-xl">
        <CardContent class="p-6 md:p-8">
          <SeedPhraseDisplayStep
            :seed-phrase="seedPhrase"
            @back="handleBackToPassword"
            @next="handleNextToConfirm"
          />
        </CardContent>
      </Card>
    </div>

    <!-- Step 3: Confirm Seed Phrase -->
    <div
      v-else-if="step === 3"
      class="flex min-h-screen items-center justify-center bg-linear-to-br from-background via-background to-primary/5 p-4"
    >
      <Card class="w-full max-w-2xl border-2 border-border/50 shadow-xl">
        <CardContent class="p-6 md:p-8">
          <ConfirmSeedStep
            :seed-phrase="seedPhrase"
            @back="handleBackToSeedDisplay"
            @next="handleNextToSuccess"
          />
        </CardContent>
      </Card>
    </div>

    <!-- Step 4: Wallet Created Success -->
    <div
      v-else-if="step === 4"
      class="flex min-h-screen items-center justify-center bg-linear-to-br from-background via-background to-primary/5 p-4"
    >
      <Card class="w-full max-w-2xl border-2 border-border/50 shadow-xl">
        <CardContent class="p-6 md:p-8">
          <WalletCreatedStep
            :seed-phrase="seedPhrase"
            :password="password"
            @access-wallet="handleAccessWallet"
          />
        </CardContent>
      </Card>
    </div>
  </div>
</template>
