<script setup lang="ts">
import { ButtonCommon } from '@/components'
import { useNeptuneStore } from '@/stores/neptuneStore'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
import { message } from 'ant-design-vue'

const neptuneStore = useNeptuneStore()
const { createKeystore } = useNeptuneWallet()

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

const handleAccessWallet = async () => {
    try {
        const seedPhrase = neptuneStore.getSeedPhraseString
        const password = neptuneStore.getPassword!

        if (!seedPhrase || !password) {
            message.error('Missing seed or password')
            return
        }

        await createKeystore(seedPhrase, password)
        emit('accessWallet')
    } catch (err) {
        message.error('Failed to create keystore')
    }
}

const handleCreateAnother = () => {
    emit('createAnother')
}
</script>

<template>
    <div class="well-done-step">
        <h2 class="done-main">You are done!</h2>
        <p class="done-desc">
            You are now ready to take advantage of all that your wallet has to offer! Access with
            keystore file should only be used in an offline setting.
        </p>
        <div class="center-svg" style="margin: 14px auto 12px auto">
            <svg width="180" height="95" viewBox="0 0 175 92" fill="none">
                <rect x="111" y="37" width="64" height="33" rx="7" fill="#23B1EC" />
                <rect
                    x="30.5"
                    y="37.5"
                    width="80"
                    height="46"
                    rx="7.5"
                    fill="#D6F9FE"
                    stroke="#AEEBF8"
                    stroke-width="5"
                />
                <rect x="56" y="67" width="32" height="10" rx="3" fill="#B0F3A6" />
                <rect x="46" y="49" width="52" height="12" rx="3" fill="#a2d2f5" />
                <circle cx="155" cy="52" r="8" fill="#fff" />
                <rect x="121" y="43" width="27" height="7" rx="1.5" fill="#5AE9D2" />
                <rect x="128" y="59" width="17" height="4" rx="1.5" fill="#FCEBBA" />
                <circle cx="40" cy="27" r="7" fill="#A2D2F5" />
                <g>
                    <circle cx="128" cy="21" r="3" fill="#FF8585" />
                    <circle cx="57.5" cy="20.5" r="1.5" fill="#67DEFF" />
                    <rect x="95" y="18" width="7" height="5" rx="2" fill="#A2D2F5" />
                </g>
            </svg>
        </div>
        <div class="btn-row">
            <ButtonCommon
                class="done-btn"
                type="primary"
                size="large"
                block
                style="margin-bottom: 0.3em"
                @click="handleAccessWallet"
            >
                Access Wallet
            </ButtonCommon>
            <button class="done-link" type="button" @click="handleCreateAnother">
                Create Another Wallet
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.well-done-step {
    text-align: center;
    padding: 20px 8px;

    .done-title {
        color: var(--primary-color);
        font-weight: 700;
        letter-spacing: 0.07em;
        margin-bottom: 1px;
    }

    .done-main {
        font-size: 1.36rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .done-desc {
        color: var(--text-secondary);
        font-size: 1.11em;
        max-width: 410px;
        margin: 2px auto 15px auto;
    }

    .center-svg {
        display: flex;
        justify-content: center;
    }

    .btn-row {
        display: flex;
        flex-direction: column;
        gap: 11px;
        align-items: center;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 5px auto;
    }

    .done-btn {
        margin-bottom: 0.3em;
    }

    .done-link {
        background: none;
        border: none;
        color: var(--primary-color);
        font-size: 1em;
        text-decoration: underline;
        cursor: pointer;
        margin: 0 auto;
        font-weight: 600;
    }
}
</style>
