<script setup lang="ts">
import { ref, computed } from 'vue'
import { ButtonCommon, FormCommon } from '@/components'

interface Props {
    title?: string
    subtitle?: string
    buttonText?: string
    hideBackButton?: boolean
    backButtonText?: string
    placeholder?: string
    label?: string
    loading?: boolean
    error?: boolean
    errorMessage?: string
}

const props = withDefaults(defineProps<Props>(), {
    title: 'Access Wallet',
    subtitle: 'Enter your password to unlock your wallet',
    buttonText: 'Unlock Wallet',
    backButtonText: 'Back',
    hideBackButton: false,
    placeholder: 'Enter your password',
    label: 'Password',
    loading: false,
    error: false,
    errorMessage: 'Invalid password',
})

const emit = defineEmits<{
    submit: [password: string]
    back: []
}>()

const password = ref('')
const passwordError = ref('')

const canProceed = computed(() => {
    return password.value.length > 0 && !passwordError.value
})

const handleSubmit = () => {
    if (!canProceed.value) {
        if (!password.value) {
            passwordError.value = 'Please enter your password'
        }
        return
    }
    passwordError.value = ''
    emit('submit', password.value)
}

const handleBack = () => {
    emit('back')
    password.value = ''
    passwordError.value = ''
}
</script>

<template>
    <div class="auth-card-content">
        <div class="form-group">
            <FormCommon
                v-model="password"
                type="password"
                :label="props.label"
                :placeholder="props.placeholder"
                show-password-toggle
                required
                :error="passwordError"
                @input="passwordError = ''"
                @keyup.enter="handleSubmit"
            />
            <span v-if="error" class="error-message">{{ errorMessage }}</span>
        </div>

        <div class="auth-button-group">
            <ButtonCommon
                v-if="!props.hideBackButton"
                type="default"
                size="large"
                class="auth-button"
                block
                @click="handleBack"
            >
                {{ props.backButtonText }}
            </ButtonCommon>
            <ButtonCommon
                type="primary"
                size="large"
                class="auth-button"
                block
                :disabled="!canProceed"
                :loading="props.loading"
                @click="handleSubmit"
            >
                {{ props.buttonText }}
            </ButtonCommon>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.auth-card-content {
    .form-group {
        margin-bottom: var(--spacing-xl);
    }
}

.auth-button {
    width: fit-content;
    margin: 0 auto;
}

.auth-button-group {
    width: 50%;
    margin: 0 auto;
    margin-top: var(--spacing-2xl);
    @include center_flex;
    gap: var(--spacing-md);
}

.error-message {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--error-light);
    color: var(--error-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    text-align: center;
}
</style>
