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

vi.mock('@/api/tags', () => ({
  fetchTags: vi.fn(),
  bulkAssignTags: vi.fn(),
}));

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

import { BulkTagDialog } from '@/components/tags/BulkTagDialog';
import { fetchTags, bulkAssignTags } from '@/api/tags';

const mockTags = [
  { id: 't1', name: 'VIP-Kunde', color: '#EF4444', created_by: 'u1', usage_count: 5 },
  { id: 't2', name: 'Lead', color: '#3B82F6', created_by: 'u1', usage_count: 12 },
];

beforeEach(() => {
  vi.clearAllMocks();
  vi.mocked(fetchTags).mockResolvedValue(mockTags);
  vi.mocked(bulkAssignTags).mockResolvedValue(undefined);
});

describe('BulkTagDialog', () => {
  it('renders dialog when open', async () => {
    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2']} onClose={vi.fn()} onAssigned={vi.fn()} />);
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });

  it('shows selected entity count', async () => {
    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2', 'c3']} onClose={vi.fn()} onAssigned={vi.fn()} />);
    expect(screen.getByText('3 ausgewaehlte Eintraege')).toBeInTheDocument();
  });

  it('loads and displays available tags', async () => {
    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
    await waitFor(() => {
      expect(fetchTags).toHaveBeenCalled();
    });
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /VIP-Kunde/ })).toBeInTheDocument();
    });
    expect(screen.getByRole('button', { name: /Lead/ })).toBeInTheDocument();
  });

  it('toggles tag selection on click', async () => {
    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
    await waitFor(() => {
      expect(fetchTags).toHaveBeenCalled();
    });
    const tagBtn = await screen.findByRole('button', { name: /VIP-Kunde/ });
    fireEvent.click(tagBtn);
    await waitFor(() => {
      expect(screen.getByText('1 Tags auswaehlen')).toBeInTheDocument();
    });
  });

  it('calls bulkAssignTags on assign button click', async () => {
    const onAssigned = vi.fn();
    const onClose = vi.fn();
    render(<BulkTagDialog open={true} entityType="contact" entityIds={['c1', 'c2']} onClose={onClose} onAssigned={onAssigned} />);
    await waitFor(() => {
      expect(fetchTags).toHaveBeenCalled();
    });
    const tagBtn = await screen.findByRole('button', { name: /VIP-Kunde/ });
    fireEvent.click(tagBtn);
    const assignBtn = screen.getByRole('button', { name: 'Tags zuweisen' });
    fireEvent.click(assignBtn);
    await waitFor(() => {
      expect(bulkAssignTags).toHaveBeenCalledWith({
        tag_ids: ['t1'],
        entity_type: 'contact',
        entity_ids: ['c1', 'c2'],
      });
    });
  });

  it('does not render when closed', () => {
    render(<BulkTagDialog open={false} entityType="contact" entityIds={['c1']} onClose={vi.fn()} onAssigned={vi.fn()} />);
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });
});
