import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Card from './Card.js';
import { BFUIProvider } from '../../BFUIProvider.js';

// Wrap component with BFUIProvider for Chakra UI theme context
const renderWithProvider = (ui: React.ReactElement) => {
  return render(<BFUIProvider>{ui}</BFUIProvider>);
};

describe('Card Component', () => {
  test('renders with minimal props and children', () => {
    renderWithProvider(
      <Card id="test-card">
        <div>Test Content</div>
      </Card>
    );
    
    const cardElement = screen.getByText('Test Content');
    expect(cardElement).toBeInTheDocument();
  });
  
  test('renders with title', () => {
    renderWithProvider(
      <Card id="test-card" title="Card Title">
        Card Content
      </Card>
    );
    
    const title = screen.getByText('Card Title');
    expect(title).toBeInTheDocument();
    expect(title.tagName).toBe('H3');
  });
  
  test('renders with image', () => {
    renderWithProvider(
      <Card 
        id="test-card" 
        title="Card Title" 
        image="https://example.com/image.jpg"
      >
        Card Content
      </Card>
    );
    
    const image = screen.getByAltText('Card Title');
    expect(image).toBeInTheDocument();
    expect(image.tagName).toBe('IMG');
    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
  });
  
  test('renders with footer', () => {
    renderWithProvider(
      <Card 
        id="test-card" 
        title="Card Title"
        footer={<button>Action</button>}
      >
        Card Content
      </Card>
    );
    
    const footer = screen.getByText('Action');
    expect(footer).toBeInTheDocument();
    expect(footer.tagName).toBe('BUTTON');
  });
  
  test('handles click events when clickable', async () => {
    const handleClick = jest.fn();
    const user = userEvent.setup();
    
    renderWithProvider(
      <Card 
        id="test-card" 
        clickable
        onClick={handleClick}
      >
        Clickable Card
      </Card>
    );
    
    const card = screen.getByText('Clickable Card').closest('div');
    expect(card).toHaveAttribute('cursor', 'pointer');
    
    await user.click(card!);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
  
  test('renders with URL as anchor tag', () => {
    renderWithProvider(
      <Card 
        id="test-card" 
        url="https://example.com"
      >
        Link Card
      </Card>
    );
    
    const card = screen.getByText('Link Card').closest('a');
    expect(card).toHaveAttribute('href', 'https://example.com');
  });
  
  test('applies variant styles', () => {
    const { rerender } = renderWithProvider(
      <Card 
        id="test-card-default" 
        variant="default"
      >
        Default Card
      </Card>
    );
    
    const defaultCard = screen.getByText('Default Card').closest('div');
    expect(defaultCard).toBeInTheDocument();
    
    rerender(
      <BFUIProvider>
        <Card 
          id="test-card-elevated" 
          variant="elevated"
        >
          Elevated Card
        </Card>
      </BFUIProvider>
    );
    
    const elevatedCard = screen.getByText('Elevated Card').closest('div');
    expect(elevatedCard).toBeInTheDocument();
  });
  
  test('renders with different sizes', () => {
    const { rerender } = renderWithProvider(
      <Card 
        id="test-card-small" 
        size="small"
      >
        Small Card
      </Card>
    );
    
    const smallCard = screen.getByText('Small Card').closest('div');
    expect(smallCard).toBeInTheDocument();
    
    rerender(
      <BFUIProvider>
        <Card 
          id="test-card-large" 
          size="large"
        >
          Large Card
        </Card>
      </BFUIProvider>
    );
    
    const largeCard = screen.getByText('Large Card').closest('div');
    expect(largeCard).toBeInTheDocument();
  });
  
  test('applies additional class names', () => {
    renderWithProvider(
      <Card 
        id="test-card" 
        className="custom-class"
      >
        Custom Class Card
      </Card>
    );
    
    const card = screen.getByText('Custom Class Card').closest('div');
    expect(card).toHaveClass('custom-class');
  });
  
  test('renders with custom ID', () => {
    renderWithProvider(
      <Card id="custom-id">
        Custom ID Card
      </Card>
    );
    
    const card = screen.getByText('Custom ID Card').closest('div');
    expect(card).toHaveAttribute('id', 'custom-id');
  });
  
  test('renders children as content', () => {
    renderWithProvider(
      <Card id="test-card">
        <div data-testid="child-element">
          <span>Nested Content</span>
        </div>
      </Card>
    );
    
    const childElement = screen.getByTestId('child-element');
    expect(childElement).toBeInTheDocument();
    expect(screen.getByText('Nested Content')).toBeInTheDocument();
  });
});