import { renderWithProviders, screen } from '../../../test/render';
import { describe, it, expect } from 'vitest';
import { ProjectCard, type ProjectMember } from './ProjectCard';
import React from 'react';

const members: ProjectMember[] = [
  { name: 'Ana', initials: 'A' },
  { name: 'Bruno', initials: 'B' },
  { name: 'Carla', initials: 'C' },
];

describe('ProjectCard', () => {
  it('renders title, description and progress info', () => {
    renderWithProviders(
      <ProjectCard
        title="Redesign do site"
        description="Atualização visual completa"
        status="active"
        progress={42}
      />
    );

    expect(screen.getByText('Redesign do site')).toBeInTheDocument();
    expect(screen.getByText('Atualização visual completa')).toBeInTheDocument();
    expect(screen.getByText('Progresso')).toBeInTheDocument();
    expect(screen.getByText('42%')).toBeInTheDocument();
  });

  it('renders a translated status badge label for each status value', () => {
    const { rerender } = renderWithProviders(
      <ProjectCard title="Projeto" status="active" progress={10} />
    );
    expect(screen.getByText('Em andamento')).toBeInTheDocument();

    rerender(<ProjectCard title="Projeto" status="review" progress={10} />);
    expect(screen.getByText('Em revisão')).toBeInTheDocument();

    rerender(<ProjectCard title="Projeto" status="done" progress={100} />);
    expect(screen.getByText('Concluído')).toBeInTheDocument();

    rerender(<ProjectCard title="Projeto" status="paused" progress={50} />);
    expect(screen.getByText('Pausado')).toBeInTheDocument();

    rerender(<ProjectCard title="Projeto" status="at-risk" progress={20} />);
    expect(screen.getByText('Em risco')).toBeInTheDocument();
  });

  it('renders member avatars up to maxMembers and shows an overflow counter', () => {
    renderWithProviders(
      <ProjectCard
        title="Projeto"
        status="active"
        progress={30}
        members={members}
        maxMembers={2}
      />
    );

    expect(screen.getByText('A')).toBeInTheDocument();
    expect(screen.getByText('B')).toBeInTheDocument();
    expect(screen.queryByText('C')).not.toBeInTheDocument();
    expect(screen.getByText('+1')).toBeInTheDocument();
  });

  it('does not show an overflow counter when members fit within maxMembers', () => {
    renderWithProviders(
      <ProjectCard title="Projeto" status="active" progress={30} members={members} />
    );

    expect(screen.getByText('A')).toBeInTheDocument();
    expect(screen.getByText('B')).toBeInTheDocument();
    expect(screen.getByText('C')).toBeInTheDocument();
    expect(screen.queryByText(/^\+/)).not.toBeInTheDocument();
  });

  it('renders the due date and the action node when provided', () => {
    renderWithProviders(
      <ProjectCard
        title="Projeto"
        status="active"
        progress={30}
        dueDate="20 de agosto"
        action={<button>Editar</button>}
      />
    );

    expect(screen.getByText('20 de agosto')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Editar' })).toBeInTheDocument();
  });
});