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

const items: NotificationItem[] = [
  {
    id: '1',
    title: 'Novo comentário',
    message: 'Alguém comentou no seu post',
    time: '5m',
    read: false,
    type: 'info',
    user: { name: 'Ana Silva', initials: 'AS' },
  },
  {
    id: '2',
    title: 'Erro no deploy',
    message: 'Falha ao publicar a última versão',
    time: '1h',
    read: false,
    type: 'error',
  },
  {
    id: '3',
    title: 'Tarefa concluída',
    message: 'Sua tarefa foi concluída com sucesso',
    time: '2h',
    read: true,
    type: 'success',
  },
];

describe('NotificationCard', () => {
  it('renders the default title, item content and an unread badge computed from items', () => {
    renderWithProviders(<NotificationCard items={items} />);

    expect(screen.getByText('Notificações')).toBeInTheDocument();
    expect(screen.getByText('Novo comentário')).toBeInTheDocument();
    expect(screen.getByText('Alguém comentou no seu post')).toBeInTheDocument();
    expect(screen.getByText('Erro no deploy')).toBeInTheDocument();
    expect(screen.getByText('Tarefa concluída')).toBeInTheDocument();
    // 2 of the 3 items are unread
    expect(screen.getByText('2')).toBeInTheDocument();
  });

  it('renders a custom title and respects an explicit unreadCount override', () => {
    renderWithProviders(
      <NotificationCard title="Minhas notificações" items={items} unreadCount={5} />
    );

    expect(screen.getByText('Minhas notificações')).toBeInTheDocument();
    expect(screen.queryByText('Notificações')).not.toBeInTheDocument();
    expect(screen.getByText('5')).toBeInTheDocument();
  });

  it('renders the "mark all read" action only when there are unread items and invokes the callback', () => {
    const onMarkAllRead = vi.fn();
    renderWithProviders(<NotificationCard items={items} onMarkAllRead={onMarkAllRead} />);

    const button = screen.getByRole('button', { name: 'Marcar todas como lidas' });
    fireEvent.click(button);
    expect(onMarkAllRead).toHaveBeenCalledTimes(1);
  });

  it('does not render the "mark all read" action when unreadCount is explicitly zero', () => {
    const onMarkAllRead = vi.fn();
    renderWithProviders(
      <NotificationCard items={items} unreadCount={0} onMarkAllRead={onMarkAllRead} />
    );

    expect(
      screen.queryByRole('button', { name: 'Marcar todas como lidas' })
    ).not.toBeInTheDocument();
  });

  it('renders the "view all" action and invokes the callback on click', () => {
    const onViewAll = vi.fn();
    renderWithProviders(<NotificationCard items={items} onViewAll={onViewAll} />);

    const button = screen.getByRole('button', { name: 'Ver todas as notificações' });
    fireEvent.click(button);
    expect(onViewAll).toHaveBeenCalledTimes(1);
  });

  it('limits the rendered items to maxItems', () => {
    renderWithProviders(<NotificationCard items={items} maxItems={1} />);

    expect(screen.getByText('Novo comentário')).toBeInTheDocument();
    expect(screen.queryByText('Erro no deploy')).not.toBeInTheDocument();
    expect(screen.queryByText('Tarefa concluída')).not.toBeInTheDocument();
  });

  it('renders an avatar for items with a user and a plain indicator dot for items without one', () => {
    renderWithProviders(<NotificationCard items={items} />);

    // item 1 has a user -> avatar fallback initials render as text
    expect(screen.getByText('AS')).toBeInTheDocument();
  });
});