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

vi.mock('dompurify', () => ({
  default: {
    sanitize: (input: string) => input,
    addHook: () => {},
  },
}));

import DraftPreview from './DraftPreview';

const defaultProps = {
  originalContent: '<p>Original paragraph</p>',
  draftContent: '<p>Draft paragraph</p>',
  modelUsed: 'gpt-4o',
  tokens: { prompt: 500, completion: 300 },
};

describe('DraftPreview', () => {
  it('renders empty state text when originalContent is empty string', () => {
    render(<DraftPreview {...defaultProps} originalContent="" />);

    expect(screen.getByText('No original content available')).toBeInTheDocument();
    expect(screen.queryByText('Draft not yet generated')).not.toBeInTheDocument();
  });

  it('renders empty state text when draftContent is empty string', () => {
    render(<DraftPreview {...defaultProps} draftContent="" />);

    expect(screen.getByText('Draft not yet generated')).toBeInTheDocument();
    expect(screen.queryByText('No original content available')).not.toBeInTheDocument();
  });

  it('renders content normally when both have content', () => {
    render(<DraftPreview {...defaultProps} />);

    expect(screen.getByText('Original paragraph')).toBeInTheDocument();
    expect(screen.getByText('Draft paragraph')).toBeInTheDocument();
    expect(screen.queryByText('No original content available')).not.toBeInTheDocument();
    expect(screen.queryByText('Draft not yet generated')).not.toBeInTheDocument();
  });

  it('shows both empty states in side-by-side view when both are empty', () => {
    render(<DraftPreview {...defaultProps} originalContent="" draftContent="" />);

    expect(screen.getByText('No original content available')).toBeInTheDocument();
    expect(screen.getByText('Draft not yet generated')).toBeInTheDocument();
  });

  it('shows model badge and token count', () => {
    render(<DraftPreview {...defaultProps} />);

    expect(screen.getByText('gpt-4o')).toBeInTheDocument();
    expect(screen.getByText('800 tokens')).toBeInTheDocument();
  });

  it('switches to original-only view when Original button is clicked', async () => {
    const user = userEvent.setup();
    render(<DraftPreview {...defaultProps} />);

    await user.click(screen.getByRole('button', { name: 'Original' }));

    expect(screen.getByText('Original paragraph')).toBeInTheDocument();
    expect(screen.queryByText('Draft paragraph')).not.toBeInTheDocument();
  });

  it('switches to draft-only view when Draft button is clicked', async () => {
    const user = userEvent.setup();
    render(<DraftPreview {...defaultProps} />);

    await user.click(screen.getByRole('button', { name: 'Draft' }));

    expect(screen.getByText('Draft paragraph')).toBeInTheDocument();
    expect(screen.queryByText('Original paragraph')).not.toBeInTheDocument();
  });

  it('returns to side-by-side view when Side by Side button is clicked', async () => {
    const user = userEvent.setup();
    render(<DraftPreview {...defaultProps} />);

    // Switch to original only
    await user.click(screen.getByRole('button', { name: 'Original' }));
    expect(screen.queryByText('Draft paragraph')).not.toBeInTheDocument();

    // Switch back to side-by-side
    await user.click(screen.getByRole('button', { name: 'Side by Side' }));
    expect(screen.getByText('Original paragraph')).toBeInTheDocument();
    expect(screen.getByText('Draft paragraph')).toBeInTheDocument();
  });
});