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

const mockFetchTags = vi.fn();
const mockAssignTag = vi.fn();
const mockUnassignTag = vi.fn();
const mockCreateTag = vi.fn();

vi.mock('@/api/tags', () => ({
  fetchTags: (...args: any[]) => mockFetchTags(...args),
  assignTag: (...args: any[]) => mockAssignTag(...args),
  unassignTag: (...args: any[]) => mockUnassignTag(...args),
  createTag: (...args: any[]) => mockCreateTag(...args),
}));

import { TagPicker } from '@/components/tags/TagPicker';

const mockTags = [
  { id: 't1', name: 'VIP-Kunde', color: '#10B981', created_by: 'u1' },
  { id: 't2', name: 'Lead', color: '#3B82F6', created_by: 'u1' },
  { id: 't3', name: 'Archiv', color: '#6B7280', created_by: 'u1' },
];

beforeEach(() => {
  vi.clearAllMocks();
  mockFetchTags.mockResolvedValue(mockTags);
  mockAssignTag.mockResolvedValue({ id: 'a1', tag_id: 't1', entity_type: 'contact', entity_id: 'c1' });
  mockUnassignTag.mockResolvedValue(undefined);
  mockCreateTag.mockResolvedValue({ id: 't4', name: 'Neu', color: '#F59E0B', created_by: 'u1' });
});

describe('TagPicker', () => {
  it('renders the tag picker container', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    expect(screen.getByTestId('tag-picker')).toBeInTheDocument();
  });

  it('renders assigned tags section', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    expect(screen.getByText('Zugewiesene Tags')).toBeInTheDocument();
  });

  it('shows no tags assigned message when empty', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    await waitFor(() => {
      expect(screen.getByText('Keine Tags zugewiesen')).toBeInTheDocument();
    });
  });

  it('loads and displays available tags', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    await waitFor(() => {
      expect(mockFetchTags).toHaveBeenCalled();
    });
    await waitFor(() => {
      expect(screen.getByTestId('available-tags-list')).toBeInTheDocument();
    });
    expect(screen.getByText('VIP-Kunde')).toBeInTheDocument();
    expect(screen.getByText('Lead')).toBeInTheDocument();
  });

  it('assigns a tag when clicking available tag', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    await waitFor(() => {
      expect(screen.getByText('VIP-Kunde')).toBeInTheDocument();
    });
    fireEvent.click(screen.getByText('VIP-Kunde'));
    await waitFor(() => {
      expect(mockAssignTag).toHaveBeenCalledWith({ tag_id: 't1', entity_type: 'contact', entity_id: 'c1' });
    });
  });

  it('shows create tag form when clicking create button', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    await waitFor(() => {
      expect(screen.getByText('Neues Tag')).toBeInTheDocument();
    });
    fireEvent.click(screen.getByText('Neues Tag'));
    await waitFor(() => {
      expect(screen.getByTestId('create-tag-form')).toBeInTheDocument();
    });
  });

  it('renders search input for tags', async () => {
    render(<TagPicker entityType="contact" entityId="c1" />);
    expect(screen.getByLabelText('Tag suchen')).toBeInTheDocument();
  });
});
