import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { within, userEvent } from '@storybook/test';
import { TwoFactorVerify } from './TwoFactorVerify';

/**
 * TwoFactorVerify - Vérification 2FA
 * 
 * Composant pour saisir le code de vérification 2FA
 * lors de la connexion avec authentification à deux facteurs.
 */
const meta: Meta<typeof TwoFactorVerify> = {
    title: 'Features/Auth/TwoFactorVerify',
    component: TwoFactorVerify,
    parameters: {
        layout: 'centered',
        docs: {
            description: {
                component: 'Formulaire de vérification 2FA avec support des codes de backup.',
            },
        },
    },
    tags: ['autodocs'],
    args: {
        onSuccess: fn(),
        onCancel: fn(),
    },
    argTypes: {
        onSuccess: {
            description: 'Callback appelé avec le code après vérification réussie',
            action: 'onSuccess',
        },
        onCancel: {
            description: 'Callback appelé quand l\'utilisateur annule',
            action: 'onCancel',
        },
    },
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * État par défaut - saisie du code TOTP.
 */
export const Default: Story = {
    name: 'Par défaut',
};

/**
 * État avec erreur de vérification.
 */
export const WithError: Story = {
    name: 'Avec erreur',
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        // Saisir un code invalide
        const codeInput = canvas.getByLabelText(/verification code/i);
        await userEvent.type(codeInput, '123456');

        // Cliquer sur Verify
        const verifyButton = canvas.getByRole('button', { name: /verify/i });
        await userEvent.click(verifyButton);
    },
    parameters: {
        docs: {
            description: {
                story: 'Affiche le message d\'erreur après un code invalide.',
            },
        },
    },
};

/**
 * État de chargement pendant la vérification.
 */
export const Loading: Story = {
    name: 'Chargement',
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        // Saisir un code
        const codeInput = canvas.getByLabelText(/verification code/i);
        await userEvent.type(codeInput, '123456');

        // Cliquer sur Verify pour voir le spinner
        const verifyButton = canvas.getByRole('button', { name: /verify/i });
        await userEvent.click(verifyButton);
    },
    parameters: {
        docs: {
            description: {
                story: 'Montre le spinner pendant la vérification.',
            },
        },
    },
};

/**
 * Mode backup code.
 */
export const BackupCode: Story = {
    name: 'Code de backup',
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        // Cliquer sur "Use a backup code"
        const backupLink = canvas.getByRole('button', { name: /use a backup code/i });
        await userEvent.click(backupLink);
    },
    parameters: {
        docs: {
            description: {
                story: 'Interface pour utiliser un code de backup au lieu du TOTP.',
            },
        },
    },
};