/**
 * File browser tests — tree, file viewer, editor, image/PDF/CSV support.
 */

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

describe('File browser', () => {
  before(async () => {
    // Navigate to Files tab in a project card
    await clickProjectTab('files');
  });

  it('should render the file browser container', async () => {
    const fb = await browser.$(S.FILE_BROWSER);
    if (await fb.isExisting()) {
      await expect(fb).toBeDisplayed();
    }
  });

  it('should show the tree panel', async () => {
    const tree = await browser.$(S.FB_TREE);
    if (await tree.isExisting()) {
      await expect(tree).toBeDisplayed();
    }
  });

  it('should show the viewer panel', async () => {
    const viewer = await browser.$(S.FB_VIEWER);
    if (await viewer.isExisting()) {
      await expect(viewer).toBeDisplayed();
    }
  });

  it('should show directory rows in tree', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.FB_DIR);
    if (count > 0) {
      expect(count).toBeGreaterThan(0);
    }
  });

  it('should show file rows in tree', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.FB_FILE);
    if (count > 0) {
      expect(count).toBeGreaterThan(0);
    }
  });

  it('should show placeholder when no file selected', async () => {
    const text = await browser.execute((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent?.toLowerCase() ?? '';
    }, S.FB_EMPTY);
    if (text) {
      expect(text).toContain('select');
    }
  });

  it('should expand a directory on click', async () => {
    const dirs = await browser.$$(S.FB_DIR);
    if (dirs.length === 0) return;

    await dirs[0].click();
    await browser.pause(500);

    const isOpen = await browser.execute((sel: string) => {
      const chevron = document.querySelector(`${sel} .fb-chevron`);
      return chevron?.classList.contains('open') ?? false;
    }, S.FB_DIR);
    if (isOpen !== undefined) {
      expect(typeof isOpen).toBe('boolean');
    }
  });

  it('should select a file and show content', async () => {
    const files = await browser.$$(S.FB_FILE);
    if (files.length === 0) return;

    await files[0].click();
    await browser.pause(500);

    const hasContent = await browser.execute(() => {
      return (document.querySelector('.fb-editor-header')
        ?? document.querySelector('.fb-image-wrap')
        ?? document.querySelector('.fb-error')
        ?? document.querySelector('.cm-editor')) !== null;
    });
    expect(hasContent).toBe(true);
  });

  it('should show file type icon in tree', async () => {
    const count = await browser.execute((sel: string) => {
      return document.querySelectorAll(sel).length;
    }, S.FILE_TYPE);
    if (count > 0) {
      expect(count).toBeGreaterThan(0);
    }
  });

  it('should show selected state on clicked file', async () => {
    const files = await browser.$$(S.FB_FILE);
    if (files.length === 0) return;

    await files[0].click();
    await browser.pause(300);

    const cls = await files[0].getAttribute('class');
    expect(cls).toContain('selected');
  });

  it('should have CodeMirror editor for text files', async () => {
    const hasCM = await browser.execute(() => {
      return document.querySelector('.cm-editor') !== null;
    });
    expect(typeof hasCM).toBe('boolean');
  });

  it('should have save button when editing', async () => {
    const hasBtn = await browser.execute(() => {
      return (document.querySelector('.save-btn')
        ?? document.querySelector('.fb-save')) !== null;
    });
    expect(typeof hasBtn).toBe('boolean');
  });

  it('should show dirty indicator for modified files', async () => {
    const hasDirty = await browser.execute(() => {
      return (document.querySelector('.dirty-dot')
        ?? document.querySelector('.unsaved')) !== null;
    });
    expect(typeof hasDirty).toBe('boolean');
  });

  it('should handle image display', async () => {
    const hasImage = await browser.execute(() => {
      return document.querySelector('.fb-image-wrap')
        ?? document.querySelector('.fb-image');
    });
    expect(hasImage !== undefined).toBe(true);
  });

  it('should have PDF viewer component', async () => {
    const hasPdf = await browser.execute(() => {
      return document.querySelector('.pdf-viewer')
        ?? document.querySelector('.pdf-container');
    });
    expect(hasPdf !== undefined).toBe(true);
  });
});