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

/**
 * TwoFactorSetup - Configuration 2FA
 * 
 * Assistant multi-étapes pour configurer l'authentification
 * à deux facteurs avec QR code et codes de backup.
 */
const meta: Meta<typeof TwoFactorSetup> = {
    title: 'Components/Features/Settings/Security/TwoFactorSetup',
    component: TwoFactorSetup,
    parameters: {
        layout: 'padded',
        docs: {
            description: {
                component: 'Assistant de configuration 2FA en 3 étapes: choix de méthode, scan QR code, codes de backup.',
            },
        },
    },
    tags: ['autodocs'],
    args: {
        onBack: fn(),
        onComplete: fn(),
    },
    argTypes: {
        onBack: {
            description: 'Callback appelé quand l\'utilisateur revient en arrière',
            action: 'onBack',
        },
        onComplete: {
            description: 'Callback appelé quand la configuration est terminée',
            action: 'onComplete',
        },
    },
    decorators: [
        (Story) => (
            <div className="max-w-2xl mx-auto p-4 bg-kodo-background min-h-screen">
                <Story />
            </div>
        ),
    ],
};

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

/**
 * Étape 1 - Choix de la méthode d'authentification.
 */
export const Step1_ChooseMethod: Story = {
    name: 'Étape 1: Choix de méthode',
    parameters: {
        docs: {
            description: {
                story: 'Première étape: choisir entre Authenticator App (TOTP) ou SMS.',
            },
        },
    },
};

/**
 * Étape 2 - Scan du QR code et vérification.
 */
export const Step2_QRCode: Story = {
    name: 'Étape 2: QR Code',
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        // Cliquer sur "Authenticator App" pour passer à l'étape 2
        const totpOption = canvas.getByText(/authenticator app/i);
        await userEvent.click(totpOption);
    },
    parameters: {
        docs: {
            description: {
                story: 'Deuxième étape: scanner le QR code et entrer le code de vérification.',
            },
        },
    },
};

/**
 * Étape 3 - Affichage des codes de backup.
 */
export const Step3_BackupCodes: Story = {
    name: 'Étape 3: Codes de backup',
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        // Naviguer vers l'étape 3 (simulation)
        // Note: Cela nécessite que l'API mock retourne des données valides
        const totpOption = canvas.getByText(/authenticator app/i);
        await userEvent.click(totpOption);

        // Attendre le QR code et entrer un code
        // Cette simulation est limitée sans mocks complets
    },
    parameters: {
        docs: {
            description: {
                story: 'Troisième étape: sauvegarder les codes de backup avec options copier/télécharger.',
            },
        },
    },
};