import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { DeleteConfirmDialog } from './DeleteConfirmDialog';

describe('DeleteConfirmDialog', () => {
  const mockOnConfirm = vi.fn();
  const mockOnOpenChange = vi.fn();

  const defaultProps = {
    open: true,
    onOpenChange: mockOnOpenChange,
    onConfirm: mockOnConfirm,
    draftTitle: 'Test Draft Title',
  };

  beforeEach(() => {
    mockOnConfirm.mockClear();
    mockOnOpenChange.mockClear();
  });

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

    expect(screen.getByText('Delete this post?')).toBeInTheDocument();
    expect(screen.getByText(/Test Draft Title/)).toBeInTheDocument();
    // "This action cannot be undone" is split across lines
    expect(screen.getByText(/This action cannot be undone/)).toBeInTheDocument();
  });

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

    expect(screen.queryByText('Delete this post?')).not.toBeInTheDocument();
  });

  it('should call onConfirm when Delete button is clicked', async () => {
    const user = userEvent.setup();
    render(<DeleteConfirmDialog {...defaultProps} />);

    const deleteButton = screen.getByRole('button', { name: 'Delete' });
    await user.click(deleteButton);

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

  it('should call onOpenChange when Cancel button is clicked', async () => {
    const user = userEvent.setup();
    render(<DeleteConfirmDialog {...defaultProps} />);

    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
    await user.click(cancelButton);

    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
  });

  it('should have accessible labels', () => {
    render(<DeleteConfirmDialog {...defaultProps} />);

    // Check for descriptive text
    expect(screen.getByText(/Delete this post\?/)).toBeInTheDocument();
    expect(screen.getByText(/You are about to delete/)).toBeInTheDocument();
    expect(screen.getByText(/This action cannot be undone/)).toBeInTheDocument();
  });

  it('should have proper button styling for destructive action', () => {
    render(<DeleteConfirmDialog {...defaultProps} />);

    const deleteButton = screen.getByRole('button', { name: 'Delete' });
    expect(deleteButton).toHaveClass('bg-destructive');

    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
    expect(cancelButton).toHaveClass('border');
  });
});
