import { test, expect } from '@playwright/test';
import { BASE_URL, ADMIN, USER, loginAs } from '../helpers';

test.describe('WFBO Deposit Management', () => {

    test.beforeEach(async ({ page }) => {
        await loginAs(page, ADMIN.mobile, ADMIN.password);
    });

    test('deposits page loads with table', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);

        await expect(page.locator('[data-testid="wfbo-sidebar"]')).toBeVisible();
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('deposits nav is visible in WFBO sidebar', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo`);
        await expect(page.locator('[data-testid="wfbo-nav-deposits"]')).toBeVisible();
    });

    test('WFBO dashboard shows pending deposits stat card', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo`);
        await expect(page.locator('[data-testid="stat-pending-deposits"]')).toBeVisible();
    });

    test('deposits table has status filter tabs', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposit-status-filters"]')).toBeVisible();
    });

    test('can approve a pending deposit', async ({ page }) => {
        // Create a deposit as USER so we always have one to approve
        await loginAs(page, USER.mobile, USER.password);
        await page.goto(`${BASE_URL}/deposit`);

        const bankOptions = page.locator('[data-testid="select-payment-detail"] option:not([value=""])');
        if (await bankOptions.count() === 0) {
            test.skip();
            return;
        }
        const txnRef = `TXN-APRV-${Date.now()}`;
        await page.selectOption('[data-testid="select-payment-detail"]', { index: 1 });
        await page.fill('[data-testid="input-amount"]', '100.00');
        await page.fill('[data-testid="input-transaction-reference"]', txnRef);
        await page.click('[data-testid="btn-deposit-submit"]');
        // waitForLoadState ensures the POST → redirect → GET cycle completes
        await page.waitForLoadState('networkidle');

        // Login as ADMIN, search for the specific deposit to avoid concurrency conflicts
        await loginAs(page, ADMIN.mobile, ADMIN.password);
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await page.fill('[data-testid="input-deposit-search"]', txnRef);
        await page.waitForLoadState('networkidle');

        // Use native form submit bypassing the Stimulus AJAX to avoid race conditions
        const form = page.locator('[data-testid^="form-approve-"]').first();
        await expect(form).toBeVisible();
        const id = (await form.getAttribute('data-testid'))?.replace('form-approve-', '');
        await form.evaluate((f: HTMLFormElement) => {
            // Temporarily remove the Stimulus action so the form submits natively
            f.removeAttribute('data-action');
            f.requestSubmit();
        });
        // Native POST -> server approves and redirects
        await page.waitForURL(/\/wfbo\/deposits/, { timeout: 10000 });
        await expect(page.locator(`[data-testid="btn-approve-${id}"]`)).not.toBeAttached({ timeout: 10000 });
    });

});