import { test, expect } from '@playwright/test';

/**
 * USERS MODULE E2E TESTS
 *
 * REQUIREMENTS:
 * 1. Application must be running at BASE_URL (default: http://localhost)
 * 2. Authentication middleware must be configured for testing
 *
 * NOTE: These tests are skipped until auth helper is implemented
 * TODO: Implement authentication helper in e2e/auth-helper.ts
 */
test.describe('Users Management - Form Tests', () => {
  test.skip(true, 'Authentication required - implement auth helper first');

  test.beforeEach(async ({ page }) => {
    // TODO: Add authentication login here
    await page.goto('/users');
  });

  test.describe('Create User Form', () => {
    test.skip(true, 'Authentication required');

    test('opens create user modal', async ({ page }) => {
      // Click "Tambah Pengguna" button
      const createButton = page.getByRole('button', { name: /tambah pengguna/i });
      await createButton.click();

      // Check modal is visible
      await expect(page.getByRole('dialog')).toBeVisible();

      // Check modal title
      await expect(page.getByRole('heading', { name: 'Tambah Pengguna Baru' })).toBeVisible();
    });

    test('form has all required input fields', async ({ page }) => {
      await page.getByRole('button', { name: /tambah pengguna/i }).click();

      // Check all text inputs exist
      await expect(page.getByLabel('Nama')).toBeVisible();
      await expect(page.getByLabel('Email')).toBeVisible();
      await expect(page.getByLabel('Password')).toBeVisible();
      await expect(page.getByLabel('Konfirmasi Password')).toBeVisible();
      await expect(page.getByLabel('Telepon')).toBeVisible();

      // Check select dropdowns exist
      await expect(page.getByRole('combobox', { name: 'Cabang' })).toBeVisible();
      await expect(page.getByRole('combobox', { name: 'Role' })).toBeVisible();
    });

    test('text inputs have correct name attributes', async ({ page }) => {
      await page.getByRole('button', { name: /tambah pengguna/i }).click();

      // Check name attributes on text inputs
      const nameInput = page.getByLabel('Nama');
      await expect(nameInput).toHaveAttribute('name', 'name');

      const emailInput = page.getByLabel('Email');
      await expect(emailInput).toHaveAttribute('name', 'email');

      const passwordInput = page.getByLabel('Password');
      await expect(passwordInput).toHaveAttribute('name', 'password');

      const confirmInput = page.getByLabel('Konfirmasi Password');
      await expect(confirmInput).toHaveAttribute('name', 'password_confirmation');

      const phoneInput = page.getByLabel('Telepon');
      await expect(phoneInput).toHaveAttribute('name', 'phone');
    });

    test('select dropdowns render correctly', async ({ page }) => {
      await page.getByRole('button', { name: /tambah pengguna/i }).click();

      // Check branch select is present
      const branchSelect = page.getByRole('combobox', { name: 'Cabang' });
      await expect(branchSelect).toBeVisible();

      // Check role select is present
      const roleSelect = page.getByRole('combobox', { name: 'Role' });
      await expect(roleSelect).toBeVisible();
    });
  });

  test.describe('Edit User Form', () => {
    test.skip(true, 'Authentication required');

    test('opens edit user modal', async ({ page }) => {
      // Wait for table to load
      await page.waitForSelector('table', { timeout: 10000 });

      // Click action menu on first row
      const actionMenu = page.getByRole('button', { name: /buka menu/i }).first();
      await actionMenu.click();

      // Click "Edit" option
      const editOption = page.getByRole('menuitem', { name: 'Edit' });
      await expect(editOption).toBeVisible();
      await editOption.click();

      // Check modal is visible
      await expect(page.getByRole('dialog')).toBeVisible();
      await expect(page.getByRole('heading', { name: 'Edit Pengguna' })).toBeVisible();
    });

    test('edit form has correct input fields', async ({ page }) => {
      // Click edit button
      const actionMenu = page.getByRole('button', { name: /buka menu/i }).first();
      await actionMenu.click();
      await page.getByRole('menuitem', { name: 'Edit' }).click();

      // Check all input fields exist
      await expect(page.getByLabel('Nama')).toBeVisible();
      await expect(page.getByLabel('Email')).toBeVisible();
      await expect(page.getByLabel('Password')).toBeVisible();
      await expect(page.getByLabel('Konfirmasi Password')).toBeVisible();
      await expect(page.getByLabel('Telepon')).toBeVisible();

      // Check select dropdowns
      await expect(page.getByRole('combobox', { name: 'Cabang' })).toBeVisible();
      await expect(page.getByRole('combobox', { name: 'Role' })).toBeVisible();
    });
  });
});