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

test.describe('Admin - Categorias', () => {
  // TODO: Fazer login como admin
  // test.beforeEach(async ({ page }) => {
  //   await page.goto('/auth/login');
  //   await page.getByLabel(/email/i).fill('admin@teste.com');
  //   await page.getByLabel(/senha/i).fill('123456');
  //   await page.getByRole('button', { name: /entrar/i }).click();
  //   await page.waitForURL(/\/admin\/dashboard/);
  // });

  test.describe('Lista de Categorias', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/admin/dashboard/categories');
    });

    test('deve mostrar lista de categorias', async ({ page }) => {
      await expect(page.getByText(/categorias|categories/i)).toBeVisible();
    });

    test('deve mostrar cor de cada categoria', async ({ page }) => {
      const categoryCard = page.locator('[data-testid="category-card"], .card').first();
      if (await categoryCard.isVisible()) {
        // Deve ter badge/cor visual
        const colorBadge = categoryCard.locator('[class*="bg-"]').first();
        await expect(colorBadge).toBeVisible();
      }
    });

    test('deve ter botão de adicionar nova categoria', async ({ page }) => {
      await expect(page.getByRole('link', { name: /adicionar|nova|criar/i })).toBeVisible();
    });
  });

  test.describe('Criar Nova Categoria', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/admin/dashboard/categories/add');
    });

    test('deve mostrar formulário de criação', async ({ page }) => {
      await expect(page.getByLabel(/nome|name/i)).toBeVisible();
      await expect(page.getByText(/cor|color/i)).toBeVisible();
      await expect(page.getByRole('button', { name: /salvar|criar/i })).toBeVisible();
    });

    test('deve ter opções de cor para selecionar', async ({ page }) => {
      // Deve ter seletor de cores ou botões de cor
      const colorSelector = page.getByRole('combobox', { name: /cor|color/i });
      const colorButtons = page.locator('[class*="bg-emerald-"], [class*="bg-blue-"], [class*="bg-red-"]');

      const hasColorOption = await colorSelector.isVisible() || (await colorButtons.count()) > 0;
      expect(hasColorOption).toBe(true);
    });

    test('deve criar categoria com dados válidos', async ({ page }) => {
      const timestamp = Date.now();

      await page.getByLabel(/nome|name/i).fill(`Categoria ${timestamp}`);

      // Selecionar cor
      const colorSelector = page.getByRole('combobox', { name: /cor|color/i });
      if (await colorSelector.isVisible()) {
        await colorSelector.selectOption({ index: 0 });
      }

      await page.getByRole('button', { name: /salvar|criar/i }).click();

      // Deve redirecionar para lista ou mostrar sucesso
      await expect(page).toHaveURL(/\/admin\/dashboard\/categories/, { timeout: 10000 });
    });

    test('deve validar nome obrigatório', async ({ page }) => {
      await page.getByRole('button', { name: /salvar|criar/i }).click();

      await expect(page.getByText(/nome.*obrigatório|required/i)).toBeVisible();
    });
  });

  test.describe('Editar Categoria', () => {
    test('deve carregar dados da categoria', async ({ page }) => {
      // TODO: Usar ID de categoria de teste
      await page.goto('/admin/dashboard/categories/edit/category-id');

      await expect(page.getByLabel(/nome|name/i)).not.toBeEmpty();
    });

    test('deve permitir modificar nome e cor', async ({ page }) => {
      await page.goto('/admin/dashboard/categories/edit/category-id');

      await page.getByLabel(/nome|name/i).fill('Categoria Editada');

      const colorSelector = page.getByRole('combobox', { name: /cor|color/i });
      if (await colorSelector.isVisible()) {
        await colorSelector.selectOption({ index: 1 });
      }

      await page.getByRole('button', { name: /salvar|atualizar/i }).click();

      await expect(page).toHaveURL(/\/admin\/dashboard\/categories/, { timeout: 10000 });
    });
  });

  test.describe('Excluir Categoria', () => {
    test('deve confirmar antes de excluir', async ({ page }) => {
      await page.goto('/admin/dashboard/categories');

      const deleteButton = page.getByRole('button', { name: /excluir|delete/i }).first();
      if (await deleteButton.isVisible()) {
        await deleteButton.click();

        await expect(page.getByText(/tem certeza|deseja excluir/i)).toBeVisible();
        await expect(page.getByRole('button', { name: /confirmar|sim/i })).toBeVisible();
        await expect(page.getByRole('button', { name: /cancelar|não/i })).toBeVisible();
      }
    });

    test('deve excluir categoria sem arquivos vinculados', async ({ page }) => {
      // TODO: Criar categoria sem arquivos e excluir
      // await page.goto('/admin/dashboard/categories');
      // await page.getByRole('button', { name: /excluir/i }).first().click();
      // await page.getByRole('button', { name: /confirmar/i }).click();

      // await expect(page.getByText(/categoria excluída|sucesso/i)).toBeVisible();
    });

    test('não deve excluir categoria com arquivos vinculados', async ({ page }) => {
      // TODO: Tentar excluir categoria em uso
      // await page.goto('/admin/dashboard/categories/edit/used-category');
      // await page.getByRole('button', { name: /excluir/i }).click();
      // await page.getByRole('button', { name: /confirmar/i }).click();

      // await expect(page.getByText(/possui arquivos|em uso|vinculada/i)).toBeVisible();
    });
  });

  test.describe('Cores de Categoria', () => {
    test('deve ter múltiplas opções de cor', async ({ page }) => {
      await page.goto('/admin/dashboard/categories/add');

      const colorSelector = page.getByRole('combobox', { name: /cor|color/i });
      if (await colorSelector.isVisible()) {
        const options = await colorSelector.locator('option').count();
        expect(options).toBeGreaterThan(1);
      }
    });

    test('deve mostrar preview da cor selecionada', async ({ page }) => {
      await page.goto('/admin/dashboard/categories/add');

      const colorSelector = page.getByRole('combobox', { name: /cor|color/i });
      if (await colorSelector.isVisible()) {
        await colorSelector.selectOption({ index: 0 });

        // Pode haver um preview visual
        const colorPreview = page.locator('[class*="rounded-full"][class*="bg-"]').first();
        if (await colorPreview.isVisible()) {
          await expect(colorPreview).toBeVisible();
        }
      }
    });
  });
});