import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { ContactFolderTree } from '@/components/contacts/ContactFolderTree';

vi.mock('@/api/hooks', () => ({
  useContactFolders: () => ({
    data: [
      { id: 'folder1', name: 'Customers', parent_id: null, contact_count: 5, sort_order: 0 },
      { id: 'folder2', name: 'Suppliers', parent_id: null, contact_count: 3, sort_order: 1 },
    ],
    isLoading: false,
  }),
  useCreateContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
  useUpdateContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
  useDeleteContactFolder: () => ({ mutate: vi.fn(), isPending: false }),
  useMoveContactToFolder: () => ({ mutate: vi.fn(), isPending: false }),
}));

vi.mock('@/api/contactFolders', async (importOriginal) => {
  const actual = await importOriginal<typeof import('@/api/contactFolders')>();
  return {
    ...actual,
    buildFolderTree: (folders: any[]) => folders.map(f => ({ ...f, children: [] })),
  };
});

const defaultProps = {
  selectedFilter: 'all' as const,
  onSelect: vi.fn(),
  tags: ['important', 'vip'],
};

describe('ContactFolderTree', () => {
  it('renders folder tree container', () => {
    render(<ContactFolderTree {...defaultProps} />);
    expect(screen.getByTestId('contact-folder-tree')).toBeInTheDocument();
  });

  it('renders all contacts button', () => {
    render(<ContactFolderTree {...defaultProps} />);
    expect(screen.getByText(/all contacts|alle kontakte/i)).toBeInTheDocument();
  });

  it('renders folder names', () => {
    render(<ContactFolderTree {...defaultProps} />);
    expect(screen.getByText('Customers')).toBeInTheDocument();
    expect(screen.getByText('Suppliers')).toBeInTheDocument();
  });

  it('renders tags section', () => {
    render(<ContactFolderTree {...defaultProps} />);
    expect(screen.getByText('important')).toBeInTheDocument();
    expect(screen.getByText('vip')).toBeInTheDocument();
  });

  it('calls onSelect with all when all contacts clicked', () => {
    render(<ContactFolderTree {...defaultProps} />);
    fireEvent.click(screen.getByText(/all contacts|alle kontakte/i));
    expect(defaultProps.onSelect).toHaveBeenCalledWith('all');
  });

  it('calls onSelect with folder filter when folder clicked', () => {
    render(<ContactFolderTree {...defaultProps} />);
    fireEvent.click(screen.getByText('Customers'));
    expect(defaultProps.onSelect).toHaveBeenCalledWith('folder:folder1');
  });

  it('calls onSelect with tag filter when tag clicked', () => {
    render(<ContactFolderTree {...defaultProps} />);
    fireEvent.click(screen.getByText('important'));
    expect(defaultProps.onSelect).toHaveBeenCalledWith('tag:important');
  });

  it('renders contact count for folders', () => {
    render(<ContactFolderTree {...defaultProps} />);
    expect(screen.getByText('5')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
  });
});
