import type { Locator, Page } from '@playwright/test'

/**
 * Page Object du formulaire de login (/login).
 *
 * Selecteurs : on s'appuie sur les labels/roles accessibles (stable vs les
 * changements de CSS/Tailwind). Le jour ou on veut un selecteur plus dur,
 * on ajoute des `data-testid` sur login.vue.
 */
export class LoginPage {
    readonly page: Page
    readonly usernameInput: Locator
    readonly passwordInput: Locator
    readonly submitButton: Locator

    constructor(page: Page) {
        this.page = page
        this.usernameInput = page.getByLabel("Nom d'utilisateur")
        this.passwordInput = page.getByLabel('Mot de passe')
        this.submitButton = page.getByRole('button', { name: 'Se connecter' })
    }

    async goto(): Promise<void> {
        await this.page.goto('/login')
    }

    async fillAndSubmit(username: string, password: string): Promise<void> {
        await this.usernameInput.fill(username)
        await this.passwordInput.fill(password)
        await this.submitButton.click()
    }
}