import { renderWithProviders, screen, fireEvent } from '../../../test/render';
import { describe, it, expect, vi } from 'vitest';
import { ProfileCard } from './ProfileCard';
import React from 'react';

describe('ProfileCard', () => {
  it('renders name, role and department', () => {
    renderWithProviders(
      <ProfileCard name="Ana Silva" role="Engenheira" department="Produto" initials="AS" />
    );

    expect(screen.getByText('Ana Silva')).toBeInTheDocument();
    expect(screen.getByText('Engenheira')).toBeInTheDocument();
    expect(screen.getByText('Produto')).toBeInTheDocument();
  });

  it('does not render a department line when department is omitted', () => {
    renderWithProviders(<ProfileCard name="Ana Silva" role="Engenheira" initials="AS" />);

    expect(screen.queryByText('Produto')).not.toBeInTheDocument();
  });

  it('renders a translated status badge for each status value', () => {
    const { rerender } = renderWithProviders(
      <ProfileCard name="Ana Silva" role="Engenheira" initials="AS" status="online" />
    );
    expect(screen.getByText('Online')).toBeInTheDocument();

    rerender(<ProfileCard name="Ana Silva" role="Engenheira" initials="AS" status="busy" />);
    expect(screen.getByText('Ocupado')).toBeInTheDocument();
  });

  it('does not render a status badge when status is not provided', () => {
    renderWithProviders(<ProfileCard name="Ana Silva" role="Engenheira" initials="AS" />);

    expect(screen.queryByText('Online')).not.toBeInTheDocument();
    expect(screen.queryByText('Offline')).not.toBeInTheDocument();
  });

  it('renders the stats grid when stats are provided', () => {
    renderWithProviders(
      <ProfileCard
        name="Ana Silva"
        role="Engenheira"
        initials="AS"
        stats={[
          { label: 'Projetos', value: 12 },
          { label: 'Tarefas', value: '34' },
        ]}
      />
    );

    expect(screen.getByText('Projetos')).toBeInTheDocument();
    expect(screen.getByText('12')).toBeInTheDocument();
    expect(screen.getByText('Tarefas')).toBeInTheDocument();
    expect(screen.getByText('34')).toBeInTheDocument();
  });

  it('renders primary and secondary actions and invokes their callbacks on click', () => {
    const onPrimary = vi.fn();
    const onSecondary = vi.fn();
    renderWithProviders(
      <ProfileCard
        name="Ana Silva"
        role="Engenheira"
        initials="AS"
        primaryAction={{ label: 'Seguir', onClick: onPrimary }}
        secondaryAction={{ label: 'Mensagem', onClick: onSecondary }}
      />
    );

    fireEvent.click(screen.getByRole('button', { name: 'Seguir' }));
    fireEvent.click(screen.getByRole('button', { name: 'Mensagem' }));

    expect(onPrimary).toHaveBeenCalledTimes(1);
    expect(onSecondary).toHaveBeenCalledTimes(1);
  });

  it('renders the avatar fallback initials when an avatar URL is provided', () => {
    renderWithProviders(
      <ProfileCard
        name="Ana Silva"
        role="Engenheira"
        initials="AS"
        avatar="https://example.com/avatar.png"
      />
    );

    // Radix Avatar never fires a load event in jsdom, so the fallback initials
    // remain visible even when an avatar URL is provided.
    expect(screen.getByText('AS')).toBeInTheDocument();
  });
});