'use client'

import { useState } from 'react'
import { useAllauthAPI } from '../../contexts/APIContext'
import { AuthDjangoForm } from '../AuthDjangoForm'

interface MFATOTPViewProps {
    onSuccess?: () => void
    onCancel?: () => void
    onBack?: () => void
    isReauth?: boolean
}

export function MFATOTPView({ onSuccess, onCancel, onBack, isReauth }: MFATOTPViewProps) {
    const api = useAllauthAPI()
    const [cancelling, setCancelling] = useState(false)

    const handleCancel = async () => {
        setCancelling(true)
        try {
            await api.session.logout()
            onCancel?.()
        } catch {
            setCancelling(false)
        }
    }

    // Build footer links
    const footerLinks = []
    if (onBack) {
        footerLinks.push({ label: 'Use a different method', onClick: onBack })
    }
    if (onCancel) {
        footerLinks.push({
            label: cancelling ? 'Cancelling...' : 'Cancel',
            onClick: handleCancel
        })
    }

    const formName = isReauth ? 'mfa_reauthenticate' : 'mfa_authenticate'

    return (
        <AuthDjangoForm
            formName={formName}
            title="Authenticator App"
            subtitle="Enter the 6-digit code from your authenticator app."
            onSuccess={() => onSuccess?.()}
            footerLinks={footerLinks}
        />
    )
}