import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { ThemeProvider } from 'styled-components';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { lightTheme } from '@/styles/theme';
import { CollaboratorsSection } from '@/features/tickets/components/CollaboratorsSection';

vi.mock('@/features/tickets/components/CollaboratorPicker', () => ({
  CollaboratorPicker: ({ onSelect }: { onSelect: (user: { id: string; name: string; email: string }) => void }) => (
    <button type="button" onClick={() => onSelect({ id: 'user-2', name: 'Ahmed', email: 'ahmed@test.com' })}>
      mock-add-collaborator
    </button>
  ),
}));

const baseProps = {
  collaborators: [],
  assignee: { id: 'assignee-1', name: 'Assignee', email: 'assignee@test.com' },
  requester: { id: 'requester-1', name: 'Requester', email: 'requester@test.com' },
  departmentId: 'dept-1',
  ticketId: 'ticket-1',
  canManage: true,
  onAdd: vi.fn(async () => undefined),
  onRemove: vi.fn(async () => undefined),
};

function renderSection(overrides: Partial<typeof baseProps> = {}) {
  return render(
    <I18nextProvider i18n={i18n}>
      <LocaleProvider>
        <ThemeProvider theme={lightTheme}>
          <CollaboratorsSection {...baseProps} {...overrides} />
        </ThemeProvider>
      </LocaleProvider>
    </I18nextProvider>,
  );
}

describe('CollaboratorsSection', () => {
  it('renders empty state when there are no collaborators', () => {
    renderSection();

    expect(screen.getByText('No Collaborators Yet')).toBeInTheDocument();
    expect(screen.getByText('Add teammates to help work on this ticket')).toBeInTheDocument();
  });

  it('renders collaborator pills and remove action', () => {
    renderSection({
      collaborators: [
        {
          id: 'collab-1',
          user_id: 'user-2',
          name: 'Ahmed',
          email: 'ahmed@test.com',
          avatar: null,
          role_names: ['agent_dept-1'],
          department: { id: 'dept-1', name: 'Support', code: 'SUP' },
          added_by: { id: 'manager-1', name: 'Manager', email: 'manager@test.com' },
          created_at: '2026-05-20T12:00:00Z',
        },
      ],
    });

    expect(screen.getByText('Ahmed')).toBeInTheDocument();
    fireEvent.click(screen.getByRole('button', { name: 'Remove Collaborator' }));
    expect(baseProps.onRemove).toHaveBeenCalledWith('user-2');
  });

  it('calls onAdd when picker selects a user', () => {
    renderSection();

    fireEvent.click(screen.getByText('mock-add-collaborator'));
    expect(baseProps.onAdd).toHaveBeenCalledWith('user-2');
  });
});