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

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

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

    test('deposits page loads with table', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('deposits table has Sent To column', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const header = page.locator('[data-testid="deposits-table"] th', { hasText: 'Sent To' });
        await expect(header).toBeVisible();
    });

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

    test('clicking Approved filter reloads with filtered view', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const approvedFilter = page.locator('[data-testid="deposit-status-filters"]').locator('text=Approved');
        await approvedFilter.click();
        await page.waitForLoadState('networkidle');
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
        expect(page.url()).toContain('status=approved');
    });

    test('clicking Rejected filter reloads with filtered view', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const rejectedFilter = page.locator('[data-testid="deposit-status-filters"]').locator('text=Rejected');
        await rejectedFilter.click();
        await page.waitForLoadState('networkidle');
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
        expect(page.url()).toContain('status=rejected');
    });

    test('can approve a pending deposit if one exists', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const approveBtn = page.locator('[data-testid^="btn-approve-"]').first();
        if (await approveBtn.count() === 0) {
            test.skip();
            return;
        }
        const id = (await approveBtn.getAttribute('data-testid'))?.replace('btn-approve-', '');
        await approveBtn.click();
        await page.waitForLoadState('networkidle');
        if (await page.locator(`[data-testid="deposit-row-${id}"]`).count() > 0) {
            await page.goto(`${BASE_URL}/wfbo/deposits`);
        }
        await expect(page.locator(`[data-testid="btn-approve-${id}"]`)).not.toBeAttached({ timeout: 10000 });
    });

    test('can reject a pending deposit with a review note', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const rejectBtn = page.locator('[data-testid^="btn-reject-"]').first();
        if (await rejectBtn.count() === 0) {
            test.skip();
            return;
        }
        const id = (await rejectBtn.getAttribute('data-testid'))?.replace('btn-reject-', '');
        const noteInput = page.locator(`[data-testid="input-review-note-${id}"]`);
        if (await noteInput.count() > 0) {
            await noteInput.fill('Insufficient proof of payment');
        }
        await rejectBtn.click();
        await page.waitForLoadState('networkidle');
        if (await page.locator(`[data-testid="deposit-row-${id}"]`).count() > 0) {
            await page.goto(`${BASE_URL}/wfbo/deposits`);
        }
        await expect(page.locator(`[data-testid="btn-reject-${id}"]`)).not.toBeAttached({ timeout: 10000 });
    });

    test('FINANCE user can access deposits page', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('ADMIN user can access deposits page', async ({ page }) => {
        await loginAs(page, ADMIN.mobile, ADMIN.password);
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('OPERATIONS user is blocked from deposits page', async ({ page }) => {
        await loginAs(page, OPERATIONS.mobile, OPERATIONS.password);
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposits-table"]')).not.toBeVisible();
    });

    test('search form is visible on deposits page', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await expect(page.locator('[data-testid="deposit-search-form"]')).toBeVisible();
        await expect(page.locator('[data-testid="input-deposit-search"]')).toBeVisible();
        await expect(page.locator('[data-testid="btn-deposit-search"]')).toBeVisible();
    });

    test('search input auto-submits via debounce without clicking Search', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await page.waitForLoadState('networkidle');
        // Focus and type to ensure reliable input events
        await page.locator('[data-testid="input-deposit-search"]').focus();
        await page.keyboard.type('DebounceAutoTest', { delay: 50 });
        // Debounce fires at 400ms; wait for navigation/URL change
        await page.waitForURL(/search=DebounceAutoTest/, { timeout: 10000 });
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('sidebar deposit badge element exists in DOM for FINANCE user', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        // Badge span is rendered server-side and managed by wfbo-pending controller
        await expect(page.locator('[data-wfbo-pending-target="depositBadge"]')).toBeAttached();
    });

    test('searching by name filters the deposits table', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await page.fill('[data-testid="input-deposit-search"]', 'Test');
        await page.click('[data-testid="btn-deposit-search"]');
        await page.waitForLoadState('networkidle');

        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
        expect(page.url()).toContain('search=Test');
    });

    test('searching by mobile number filters the deposits table', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        await page.fill('[data-testid="input-deposit-search"]', '+1000');
        await page.click('[data-testid="btn-deposit-search"]');
        await page.waitForLoadState('networkidle');

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

    test('clear button removes search and reloads', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits?search=Test`);
        await expect(page.locator('[data-testid="btn-deposit-search-clear"]')).toBeVisible();
        await page.click('[data-testid="btn-deposit-search-clear"]');
        await page.waitForLoadState('networkidle');

        expect(page.url()).not.toContain('search=');
        await expect(page.locator('[data-testid="deposits-table"]')).toBeVisible();
    });

    test('search preserves status filter', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits?status=pending`);
        await page.fill('[data-testid="input-deposit-search"]', 'User');
        await page.click('[data-testid="btn-deposit-search"]');
        await page.waitForLoadState('networkidle');

        expect(page.url()).toContain('status=pending');
        expect(page.url()).toContain('search=User');
    });

    test('view transaction button opens modal when deposit has an image', async ({ page }) => {
        await page.goto(`${BASE_URL}/wfbo/deposits`);
        const viewBtn = page.locator('[data-testid^="btn-view-transaction-image-"]').first();
        if (await viewBtn.count() === 0) {
            test.skip();
            return;
        }
        await viewBtn.click();
        await expect(page.locator('#deposit-image-modal')).toBeVisible();
    });

});