/**
 * 文書編集モーダルの描画確認テスト。
 * 保存・キャンセルボタンの表示、Toast UI ツールバーおよびアイコンの描画を検証する。
 *
 * 実行: npm run test:e2e
 * このスペックのみ: npx wdio run wdio.conf.js --spec tests/e2e/specs/docs-edit-drawing.spec.js
 */

import { waitForAppReady } from '../helpers/wait-for-app.js';

describe('文書編集モーダル 描画確認', () => {
  const openDocsPanel = async () => {
    const navDocs = await $('button[data-panel="docs"]');
    await navDocs.click();
    const panel = await $('#panel-docs');
    await panel.waitForDisplayed({ timeout: 5000 });
    await expect(panel).not.toHaveElementClass('hidden');
  };

  const openEditModal = async () => {
    const addBtn = await $('#docs-add-btn');
    await addBtn.waitForDisplayed({ timeout: 3000 });
    await addBtn.click();
    const modal = await $('#docs-edit-modal');
    await modal.waitForDisplayed({ timeout: 5000 });
    await expect(modal).not.toHaveElementClass('hidden');
    // Toast UI エディタのマウント待ち
    await browser.pause(1500);
  };

  before(async function () {
    this.timeout(45000);
    await waitForAppReady(browser);
    await openDocsPanel();
    await openEditModal();
  });

  it('編集モーダルが表示されている', async () => {
    const modal = await $('#docs-edit-modal');
    await expect(modal).toBeDisplayed();
    await expect(modal).not.toHaveElementClass('hidden');
  });

  it('保存・キャンセルボタンが表示されている', async () => {
    const saveBtn = await $('#docs-save-btn');
    const cancelBtn = await $('#docs-cancel-btn');
    await expect(saveBtn).toBeDisplayed();
    await expect(cancelBtn).toBeDisplayed();
    await expect(saveBtn).toHaveText('保存');
    await expect(cancelBtn).toHaveText('キャンセル');
  });

  it('保存・キャンセルボタンが視認可能なスタイルを持つ', async () => {
    const saveBtn = await $('#docs-save-btn');
    const cancelBtn = await $('#docs-cancel-btn');
    const saveColor = await saveBtn.getCSSProperty('color');
    const cancelColor = await cancelBtn.getCSSProperty('color');
    const saveBg = await saveBtn.getCSSProperty('background-color');
    const cancelBg = await cancelBtn.getCSSProperty('background-color');
    // 透明でないこと（視認可能）
    expect(saveColor.value).not.toMatch(/rgba?\(0,\s*0,\s*0,\s*0\)|transparent/i);
    expect(cancelColor.value).not.toMatch(/rgba?\(0,\s*0,\s*0,\s*0\)|transparent/i);
    expect(saveBg.value).not.toMatch(/rgba?\(0,\s*0,\s*0,\s*0\)|transparent/i);
    expect(cancelBg.value).not.toMatch(/rgba?\(0,\s*0,\s*0,\s*0\)|transparent/i);
  });

  it('Toast UI エディタのツールバーが表示されている', async () => {
    const toolbar = await $('.docs-editor-container .toastui-editor-toolbar');
    await toolbar.waitForExist({ timeout: 5000 });
    await expect(toolbar).toBeDisplayed();
  });

  it('ツールバーに操作可能な要素がある（アイコンは background-image で描画される想定）', async () => {
    const toolbar = await $('.docs-editor-container .toastui-editor-toolbar');
    await expect(toolbar).toBeDisplayed();
    const buttons = await $$('.docs-editor-container .toastui-editor-toolbar button');
    expect(buttons.length).toBeGreaterThan(0);
    let withImage = 0;
    for (const el of buttons) {
      const bgImage = await el.getCSSProperty('background-image');
      if (bgImage.value && bgImage.value !== 'none') withImage += 1;
    }
    if (withImage === 0) {
      console.warn('[描画確認] ツールバー内のいずれの要素も background-image が none です。アイコンが非表示の可能性があります。');
    }
  });

  it('エディタのメインUI（ツールバーまたはタブ・モード切替）が存在する', async () => {
    const defaultUI = await $('.docs-editor-container .toastui-editor-defaultUI');
    const toolbar = await $('.docs-editor-container .toastui-editor-toolbar');
    const tabs = await $('.docs-editor-container .toastui-editor-tabs');
    const modeSwitch = await $('.docs-editor-container [class*="mode-switch"]');
    const hasUI = (await defaultUI.isDisplayed()) || (await toolbar.isDisplayed());
    const hasTabsOrMode =
      ((await tabs.isDisplayed()) && (await $$('.docs-editor-container .toastui-editor-tabs button')).length >= 2) ||
      ((await modeSwitch.isDisplayed()) && (await $$('.docs-editor-container [class*="mode-switch"] button')).length >= 2);
    expect(hasUI).toBe(true);
    if (!hasTabsOrMode) {
      console.warn('[描画確認] タブ/モード切替は見つかりませんでした。initialEditType や DOM 構造により非表示の可能性があります。');
    }
  });

  it('キャンセルボタンでモーダルが閉じる', async () => {
    const cancelBtn = await $('#docs-cancel-btn');
    await cancelBtn.click();
    await browser.pause(500);
    const modal = await $('#docs-edit-modal');
    await expect(modal).toHaveElementClass('hidden');
  });
});