import React from 'react';
import {render, screen} from '@testing-library/react';
import MemberEventsSection from '../MemberEventsSection';
import type {Evenement} from '@/types/stage';

jest.mock('next/link', () => {
  return ({children, href, ...props}: {children: React.ReactNode; href: string; [key: string]: unknown}) => (
    <a href={href} {...props}>{children}</a>
  );
});

const makeEvent = (id: number, label: string): Evenement => ({
  eveId: id,
  eveDate: '2026-03-15',
  eveHeure: '20h30',
  eveLibelle: label,
  eveTev: {tevLibelle: 'Fest-noz'},
  eveVil: {vilNom: 'Quimper', vilCodepostal: '29000', vilGeoX: -4.1, vilGeoY: 48.0, vilGeoZoom: 12},
  evePla: null,
  aenOrganisateurs: []
});

describe('MemberEventsSection', () => {
  it('shouldRenderSectionTitleAndSubtitle', () => {
    render(
      <MemberEventsSection
        events={[]}
        locale="fr"
        title="Événements adhérents"
        subtitle="Les prochains événements"
      />
    );

    expect(screen.getByText('Événements adhérents')).toBeInTheDocument();
    expect(screen.getByText('Les prochains événements')).toBeInTheDocument();
  });

  it('shouldRenderEventCardsFromEventsList', () => {
    const events = [
      makeEvent(1, 'Event A'),
      makeEvent(2, 'Event B'),
      makeEvent(3, 'Event C'),
    ];

    render(
      <MemberEventsSection events={events} locale="fr" title="Titre" />
    );

    expect(screen.getByText('Event A')).toBeInTheDocument();
    expect(screen.getByText('Event B')).toBeInTheDocument();
    expect(screen.getByText('Event C')).toBeInTheDocument();
  });

  it('shouldRenderEmptyStateWhenNoEvents', () => {
    const {container} = render(
      <MemberEventsSection events={[]} locale="fr" title="Titre" />
    );

    const emptyState = container.querySelector('.member-events__empty');
    expect(emptyState).toBeInTheDocument();
  });

  it('shouldRenderSeeAllLinkWhenProvided', () => {
    render(
      <MemberEventsSection
        events={[makeEvent(1, 'Event')]}
        locale="fr"
        title="Titre"
        seeAllHref="/fr/evenements"
      />
    );

    const link = screen.getByText(/voir/i);
    expect(link.closest('a')).toHaveAttribute('href', '/fr/evenements');
  });

  it('shouldRenderTheSeeAllLinkEvenWithoutEventsWhenProvided', () => {
    render(
      <MemberEventsSection events={[]} locale="fr" title="Titre" seeAllHref="/fr/evenements?orgas=42" seeAllLabel="Tous les événements de Mon asso" />
    );

    expect(screen.getByRole('link', {name: /Tous les événements de Mon asso/})).toHaveAttribute('href', '/fr/evenements?orgas=42');
    expect(screen.getByText('Aucun événement à venir')).toBeInTheDocument();
  });

  it('shouldNotRenderSeeAllLinkWhenNotProvided', () => {
    render(
      <MemberEventsSection events={[makeEvent(1, 'Event')]} locale="fr" title="Titre" />
    );

    const link = screen.queryByText(/voir/i);
    expect(link).not.toBeInTheDocument();
  });

  it('shouldLimitDisplayedEventsToMaxCount', () => {
    const events = [
      makeEvent(1, 'Event 1'),
      makeEvent(2, 'Event 2'),
      makeEvent(3, 'Event 3'),
      makeEvent(4, 'Event 4'),
      makeEvent(5, 'Event 5'),
    ];

    render(
      <MemberEventsSection events={events} locale="fr" title="Titre" maxDisplayed={2} />
    );

    expect(screen.getByText('Event 1')).toBeInTheDocument();
    expect(screen.getByText('Event 2')).toBeInTheDocument();
    expect(screen.queryByText('Event 3')).not.toBeInTheDocument();
  });
});