import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { ContactsListPage } from '@/pages/ContactsList';

const mockContacts = [
  { id: '1', first_name: 'Max', last_name: 'Mustermann', email: 'max@test.de', phone: '+49 30 123', position: 'CEO', created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z' },
  { id: '2', first_name: 'Anna', last_name: 'Schmidt', email: 'anna@test.de', phone: '+49 89 987', position: 'CTO', created_at: '2025-01-02T00:00:00Z', updated_at: '2025-01-02T00:00:00Z' },
];

let mockData: any = { items: mockContacts, total: 2 };
let mockIsLoading = false;

vi.mock('@/api/hooks', () => ({
  useContacts: () => ({ data: mockData, isLoading: mockIsLoading }),
  useDeleteContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
}));

vi.mock('@/components/ui/Toast', () => ({
  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
}));

function renderWithRouter() {
  return render(<MemoryRouter><ContactsListPage /></MemoryRouter>);
}

describe('ContactsListPage', () => {
  it('renders the page', () => {
    renderWithRouter();
    expect(screen.getByTestId('contacts-list-page')).toBeInTheDocument();
  });

  it('renders DataGrid for contacts (TanStack Table)', () => {
    renderWithRouter();
    expect(screen.getByTestId('contacts-grid')).toBeInTheDocument();
  });

  it('renders contact data in grid', () => {
    renderWithRouter();
    expect(screen.getByText('Max Mustermann')).toBeInTheDocument();
    expect(screen.getByText('Anna Schmidt')).toBeInTheDocument();
  });

  it('renders search input', () => {
    renderWithRouter();
    expect(screen.getByLabelText(/Suchen/)).toBeInTheDocument();
  });

  it('renders create button', () => {
    renderWithRouter();
    expect(screen.getByText('Kontakt erstellen')).toBeInTheDocument();
  });

  it('renders table headers', () => {
    renderWithRouter();
    expect(screen.getByText('Name')).toBeInTheDocument();
    expect(screen.getByText('E-Mail')).toBeInTheDocument();
    expect(screen.getByText('Telefon')).toBeInTheDocument();
    expect(screen.getByText('Position')).toBeInTheDocument();
  });

  it('renders email as mailto link', () => {
    renderWithRouter();
    const emailLink = screen.getByText('max@test.de');
    expect(emailLink.closest('a')).toHaveAttribute('href', 'mailto:max@test.de');
  });

  it('shows empty state when no contacts and no search', () => {
    mockData = { items: [], total: 0 };
    renderWithRouter();
    expect(screen.getByText('Keine Kontakte vorhanden')).toBeInTheDocument();
    mockData = { items: mockContacts, total: 2 };
  });

  it('clicking sort header toggles sort direction', () => {
    renderWithRouter();
    const emailHeader = screen.getByText('E-Mail');
    const th = emailHeader.closest('th');
    expect(th).toHaveAttribute('aria-sort', 'none');
    fireEvent.click(emailHeader);
    expect(th).toHaveAttribute('aria-sort', 'ascending');
  });

  it('shows loading state in DataGrid when loading', () => {
    mockIsLoading = true;
    mockData = undefined;
    renderWithRouter();
    expect(screen.getByTestId('contacts-grid')).toBeInTheDocument();
    expect(screen.getByText(/Wird geladen/)).toBeInTheDocument();
    mockIsLoading = false;
    mockData = { items: mockContacts, total: 2 };
  });
});
