import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import BannerItemEditor from './banner-item-editor';
import type { ImageBannerItem, SourceBannerItem } from '../types';

// DndContext 外でのテスト用に useSortable を no-op でモック（menu.test.tsx と同じ方式）
vi.mock('@dnd-kit/sortable', () => ({
  useSortable: () => ({
    attributes: {},
    listeners: {},
    setNodeRef: vi.fn(),
    setActivatorNodeRef: vi.fn(),
    transform: null,
    transition: undefined,
    isDragging: false,
  }),
}));

const createImageItem = (overrides: Partial<ImageBannerItem> = {}): ImageBannerItem => ({
  id: 'item-1',
  media_banner_type: 'image',
  media_banner_status: 'true',
  media_banner_datestart: '2026-01-01',
  media_banner_timestart: '00:00:00',
  media_banner_dateend: '9999-12-31',
  media_banner_timeend: '23:59:59',
  media_banner_alt: '',
  media_banner_link: '',
  media_banner_override_link: '',
  media_banner_preview: '',
  media_banner_target: 'false',
  media_banner_attr1: '',
  media_banner_attr2: '',
  ...overrides,
});

const createSourceItem = (overrides: Partial<SourceBannerItem> = {}): SourceBannerItem => ({
  id: 'item-2',
  media_banner_type: 'source',
  media_banner_status: 'true',
  media_banner_datestart: '2026-01-01',
  media_banner_timestart: '00:00:00',
  media_banner_dateend: '9999-12-31',
  media_banner_timeend: '23:59:59',
  media_banner_source: '',
  ...overrides,
});

// item のジェネリクスを固定するための共通 props（テストで使わないハンドラは vi.fn() で埋める）
const baseProps = {
  index: 0,
  length: 1,
  updateBannerItem: vi.fn(),
  removeBannerItem: vi.fn(),
  changeBannerItemSort: vi.fn(),
  openInsertModal: vi.fn(),
  openUpdateModal: vi.fn(),
  clearMediaItem: vi.fn(),
  scrollToActiveElement: vi.fn(),
  addItem: vi.fn(),
  onComplete: vi.fn(),
  onFileInputChage: vi.fn(),
  renderOpenDate: () => null,
  attr1: '',
  attr2: '',
  hide1: 'true',
  hide2: 'true',
  tooltip1: '',
  tooltip2: '',
};

describe('BannerItemEditor', () => {
  it('並び順・公開状態の select が Select コンポーネントの acms-admin-form-select クラスで描画される', () => {
    render(<BannerItemEditor {...baseProps} item={createImageItem()} />);

    const comboboxes = screen.getAllByRole('combobox');
    expect(comboboxes).toHaveLength(2);
    comboboxes.forEach((select) => {
      expect(select).toHaveClass('acms-admin-form-select');
    });
  });

  it('メディア選択ボタンが Button コンポーネントの acms-admin-btn クラスで描画され、クリックで openInsertModal が呼ばれる', async () => {
    const openInsertModal = vi.fn();
    const item = createImageItem();
    render(<BannerItemEditor {...baseProps} item={item} openInsertModal={openInsertModal} />);

    const selectButton = screen.getByRole('button', { name: ACMS.i18n('media.select_from_media') });
    expect(selectButton).toHaveClass('acms-admin-btn');
    expect(selectButton.className).not.toMatch(/acms-admin-btn-\w/);

    await userEvent.click(selectButton);
    expect(openInsertModal).toHaveBeenCalledWith(item);
  });

  it('新規ウィンドウ用チェックボックスが Checkbox コンポーネントの構造で描画される', () => {
    const item = createImageItem({ media_banner_target: 'true' });
    render(<BannerItemEditor {...baseProps} item={item} />);

    const checkbox = screen.getByRole('checkbox', { name: ACMS.i18n('media.new_window') }) as HTMLInputElement;
    expect(checkbox.checked).toBe(true);
    expect(checkbox.closest('.acms-admin-form-checkbox')).not.toBeNull();
  });

  it('ソースバナーの textarea が Textarea コンポーネントのクラスで描画される', () => {
    const item = createSourceItem({ media_banner_source: 'console.log(1)' });
    render(<BannerItemEditor {...baseProps} item={item} />);

    const textarea = screen.getByRole('textbox');
    expect(textarea).toHaveClass('acms-admin-form-control');
    expect(textarea).toHaveClass('acms-admin-form-width-full');
  });
});
