import { test, expect } from '@playwright/test';
import { login } from './helpers/auth';

/**
 * Star ERP 登入流程端到端測試
 */
test.describe('登入功能', () => {

    test('頁面應正確顯示登入表單', async ({ page }) => {
        // 前往登入頁面
        await page.goto('/');

        // 驗證：帳號輸入框存在
        await expect(page.locator('#username')).toBeVisible();

        // 驗證：密碼輸入框存在
        await expect(page.locator('#password')).toBeVisible();

        // 驗證：登入按鈕存在
        await expect(page.getByRole('button', { name: '登入系統' })).toBeVisible();
    });

    test('輸入錯誤的帳密應顯示錯誤訊息', async ({ page }) => {
        await page.goto('/');

        // 輸入錯誤的帳號密碼
        await page.fill('#username', 'wronguser');
        await page.fill('#password', 'wrongpassword');

        // 點擊登入
        await page.getByRole('button', { name: '登入系統' }).click();

        // 等待頁面回應
        await page.waitForTimeout(2000);

        // 驗證：應該還是停在登入頁面（未成功跳轉）
        await expect(page).toHaveURL(/\//);

        // 驗證：頁面上應顯示某種錯誤提示（紅色文字或 toast）
        // 先用寬鬆的檢查方式，後續可以根據實際錯誤訊息調整
        const hasError = await page.locator('.text-red-500, .text-red-600, [role="alert"], .toast, [data-sonner-toast]').count();
        expect(hasError).toBeGreaterThan(0);
    });

    test('輸入正確帳密後應成功登入並跳轉', async ({ page }) => {
        // 使用共用登入函式
        await login(page);

        // 驗證：頁面右上角應顯示使用者名稱
        await expect(page.getByText('mama')).toBeVisible();

        // 驗證：儀表板的關鍵指標卡片存在
        await expect(page.getByText('庫存總值')).toBeVisible();

        // 截圖留存（成功登入畫面）
        await page.screenshot({ path: 'e2e/screenshots/login-success.png', fullPage: true });
    });

    test('空白帳密不應能登入', async ({ page }) => {
        await page.goto('/');

        // 不填任何東西，直接點登入
        await page.getByRole('button', { name: '登入系統' }).click();

        // 等待頁面回應
        await page.waitForTimeout(1000);

        // 驗證：應該還在登入頁面
        await expect(page.locator('#username')).toBeVisible();
    });

});