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

describe('QuickActionCard', () => {
  it('renders the title, description, icon and action label', () => {
    render(
      <QuickActionCard
        title="Novo Relatório"
        description="Gere relatórios personalizados."
        icon={<svg data-testid="icon" />}
        actionLabel="Criar Relatório"
      />
    );
    expect(screen.getByText('Novo Relatório')).toBeInTheDocument();
    expect(screen.getByText('Gere relatórios personalizados.')).toBeInTheDocument();
    expect(screen.getByTestId('icon')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Criar Relatório' })).toBeInTheDocument();
  });

  it('does not render the description paragraph when omitted', () => {
    const { container } = render(
      <QuickActionCard title="Convidar" icon={<svg />} actionLabel="Convidar Agora" />
    );
    expect(screen.getByText('Convidar')).toBeInTheDocument();
    // No description text should be present
    expect(container.querySelector('p.text-xs')).not.toBeInTheDocument();
  });

  it('renders the badge only when a badge prop is provided', () => {
    const { rerender } = render(
      <QuickActionCard title="A" icon={<svg />} actionLabel="Go" badge="Novo" />
    );
    expect(screen.getByText('Novo')).toBeInTheDocument();

    rerender(<QuickActionCard title="A" icon={<svg />} actionLabel="Go" />);
    expect(screen.queryByText('Novo')).not.toBeInTheDocument();
  });

  it('calls onAction when the action button is clicked', () => {
    const onAction = vi.fn();
    render(<QuickActionCard title="A" icon={<svg />} actionLabel="Go" onAction={onAction} />);
    fireEvent.click(screen.getByRole('button', { name: 'Go' }));
    expect(onAction).toHaveBeenCalledTimes(1);
  });

  it('disables the action button and applies disabled styling when disabled is true', () => {
    const { container } = render(
      <QuickActionCard title="A" icon={<svg />} actionLabel="Go" disabled />
    );
    expect(screen.getByRole('button', { name: 'Go' })).toBeDisabled();
    expect(container.querySelector('[data-slot="card"]')).toHaveClass('opacity-60');
  });
});