import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { DeleteModal } from '../../components/base/DeleteModal';

describe('DeleteModal', () => {
  const defaultProps = {
    isOpen: true,
    onClose: jest.fn(),
    onConfirm: jest.fn().mockResolvedValue(undefined),
    title: 'Supprimer la campagne',
    description: 'Êtes-vous sûr de vouloir supprimer cette campagne ?',
    itemName: 'Campagne Test',
    itemDetails: <div>Détails de la campagne à supprimer</div>,
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('should render modal when open', () => {
    render(<DeleteModal {...defaultProps} />);

    expect(screen.getByText('Supprimer la campagne')).toBeInTheDocument();
    expect(screen.getByText('Êtes-vous sûr de vouloir supprimer cette campagne ?')).toBeInTheDocument();
    expect(screen.getByText('Campagne Test à supprimer :')).toBeInTheDocument();
  });

  it('should not render modal when closed', () => {
    render(<DeleteModal {...defaultProps} isOpen={false} />);

    expect(screen.queryByText('Supprimer la campagne')).not.toBeInTheDocument();
  });

  it('should call onConfirm when delete button is clicked', async () => {
    const onConfirm = jest.fn().mockResolvedValue(undefined);
    render(<DeleteModal {...defaultProps} onConfirm={onConfirm} />);

    const deleteButton = screen.getByRole('button', { name: /supprimer définitivement/i });
    fireEvent.click(deleteButton);

    await waitFor(() => {
      expect(onConfirm).toHaveBeenCalledTimes(1);
    });
  });

  it('should call onClose when cancel button is clicked', () => {
    const onClose = jest.fn();
    render(<DeleteModal {...defaultProps} onClose={onClose} />);

    const cancelButton = screen.getByRole('button', { name: /annuler/i });
    fireEvent.click(cancelButton);

    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('should show loading state during deletion', async () => {
    const onConfirm = jest.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
    render(<DeleteModal {...defaultProps} onConfirm={onConfirm} />);

    const deleteButton = screen.getByRole('button', { name: /supprimer définitivement/i });
    fireEvent.click(deleteButton);

    await waitFor(() => {
      expect(screen.getByText('Suppression...')).toBeInTheDocument();
    });
  });

  it('should render with custom confirm text', () => {
    render(
      <DeleteModal 
        {...defaultProps} 
        confirmText="Oui, supprimer définitivement"
      />
    );

    expect(screen.getByRole('button', { name: /oui, supprimer définitivement/i })).toBeInTheDocument();
  });

  it('should show warning message', () => {
    render(<DeleteModal {...defaultProps} />);

    expect(screen.getByText(/⚠️ Cette action est irréversible./)).toBeInTheDocument();
  });

  it('should show custom warning message', () => {
    render(
      <DeleteModal 
        {...defaultProps} 
        warningMessage="Attention, cette suppression est définitive !"
      />
    );

    expect(screen.getByText(/⚠️ Attention, cette suppression est définitive !/)).toBeInTheDocument();
  });

  it('should display item details', () => {
    render(<DeleteModal {...defaultProps} />);

    expect(screen.getByText('Détails de la campagne à supprimer')).toBeInTheDocument();
  });
});