// @vitest-environment jsdom
import { describe, it, expect, vi, beforeEach } from 'vitest';
import '@testing-library/jest-dom/vitest';
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
import { NotebookList } from '../../src/renderer/inbox/components/NotebookList';

const notebooks = [
  { id: 'nb-1', name: '기본', color: null, createdAt: 't', updatedAt: 't', noteCount: 3 },
  { id: 'nb-2', name: '회사', color: '#0a4b80', createdAt: 't', updatedAt: 't', noteCount: 7 }
];

describe('NotebookList', () => {
  beforeEach(cleanup);

  it('노트북 이름 + count 렌더링', () => {
    render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} />);
    expect(screen.getByText('기본')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
    expect(screen.getByText('회사')).toBeInTheDocument();
    expect(screen.getByText('7')).toBeInTheDocument();
  });

  it('클릭 시 onSelect 호출', () => {
    const onSelect = vi.fn();
    render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={onSelect} onCreate={() => {}} />);
    fireEvent.click(screen.getByText('회사'));
    expect(onSelect).toHaveBeenCalledWith('nb-2');
  });

  it('+ 새 노트북 클릭 시 onCreate 호출', () => {
    const onCreate = vi.fn();
    render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={onCreate} />);
    fireEvent.click(screen.getByRole('button', { name: /새 노트북/ }));
    expect(onCreate).toHaveBeenCalled();
  });

  it('selected notebook 의 background 가 다름', () => {
    render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} />);
    const btn1 = screen.getByText('기본').closest('button')!;
    const btn2 = screen.getByText('회사').closest('button')!;
    expect(btn1.style.background).not.toBe('transparent');
    expect(btn2.style.background).toBe('transparent');
  });

  it('hover 시 ↑↓ 버튼 노출', () => {
    const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} onReorder={async () => {}} />);
    // 기본 상태: ↑↓ 미노출
    expect(screen.queryByLabelText(/위로/)).not.toBeInTheDocument();
    // hover 후 보임 — position:relative 인 row div 선택
    const row = container.querySelector('div[style*="position: relative"]') as HTMLElement;
    fireEvent.mouseEnter(row);
    expect(screen.getAllByLabelText(/위로/).length).toBeGreaterThan(0);
  });

  it('↑ 클릭 시 onReorder up 호출', () => {
    const onReorder = vi.fn();
    const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-2" onSelect={() => {}} onCreate={() => {}} onReorder={onReorder} />);
    const rows = container.querySelectorAll('div[style*="position: relative"]');
    // 두번째 row (nb-2) hover → 위로 클릭
    fireEvent.mouseEnter(rows[1] as Element);
    fireEvent.click(screen.getByLabelText('회사 위로'));
    expect(onReorder).toHaveBeenCalledWith('nb-2', 'up');
  });

  it('첫 row 의 ↑ 는 disabled', () => {
    const { container } = render(<NotebookList notebooks={notebooks} selectedId="nb-1" onSelect={() => {}} onCreate={() => {}} onReorder={async () => {}} />);
    const rows = container.querySelectorAll('div[style*="position: relative"]');
    fireEvent.mouseEnter(rows[0] as Element);
    const upBtn = screen.getByLabelText('기본 위로');
    expect(upBtn).toBeDisabled();
  });
});