/**
 * Task board tests — kanban columns, cards, create form, drag-drop.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { exec } from '../helpers/execute.ts';

describe('Task board', () => {
  it('should render the task board container', async () => {
    const exists = await exec((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.TASK_BOARD);
    if (exists) {
      const el = await browser.$(S.TASK_BOARD);
      await expect(el).toBeDisplayed();
    }
  });

  it('should show the toolbar with title', async () => {
    const text = await exec((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent ?? '';
    }, S.TB_TITLE);
    if (text) {
      expect(text).toBe('Task Board');
    }
  });

  it('should have 5 kanban columns', async () => {
    const count = await exec((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.TB_COLUMN);
    if (count > 0) {
      expect(count).toBe(5);
    }
  });

  it('should show column headers with labels', async () => {
    const texts = await exec((sel: string) => {
      const labels = document.querySelectorAll(sel);
      return Array.from(labels).map(l => l.textContent?.toUpperCase() ?? '');
    }, S.TB_COL_LABEL);

    if (texts.length > 0) {
      const expected = ['TO DO', 'IN PROGRESS', 'REVIEW', 'DONE', 'BLOCKED'];
      for (const exp of expected) {
        expect(texts.some((t: string) => t.includes(exp))).toBe(true);
      }
    }
  });

  it('should show column counts', async () => {
    const count = await exec((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.TB_COL_COUNT);
    if (count > 0) {
      expect(count).toBe(5);
    }
  });

  it('should show add task button', async () => {
    const addBtn = await browser.$(S.TB_ADD_BTN);
    if (await addBtn.isExisting()) {
      expect(await addBtn.isClickable()).toBe(true);
    }
  });

  it('should toggle create form on add button click', async () => {
    const addBtn = await browser.$(S.TB_ADD_BTN);
    if (!(await addBtn.isExisting())) return;

    await addBtn.click();
    await browser.pause(300);

    const form = await browser.$(S.TB_CREATE_FORM);
    if (await form.isExisting()) {
      await expect(form).toBeDisplayed();

      // Close form
      await addBtn.click();
      await browser.pause(200);
    }
  });

  it('should show task count in toolbar', async () => {
    const text = await exec((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent ?? '';
    }, S.TB_COUNT);
    if (text) {
      expect(text).toMatch(/\d+ tasks?/);
    }
  });

  it('should have task cards in columns', async () => {
    const hasCards = await exec(() => {
      return document.querySelector('.task-card')
        ?? document.querySelector('.tb-card');
    });
    expect(hasCards !== undefined).toBe(true);
  });

  it('should support drag handle on task cards', async () => {
    const hasDrag = await exec(() => {
      return document.querySelector('.drag-handle')
        ?? document.querySelector('[draggable]');
    });
    expect(hasDrag !== undefined).toBe(true);
  });
});