import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { SkeletonCard } from '../SkeletonCard';

describe('SkeletonCard', () => {
  it('renders without crashing', () => {
    const { container } = render(<SkeletonCard />);
    expect(container.firstChild).toBeInTheDocument();
  });

  it('renders placeholder image', () => {
    render(<SkeletonCard />);
    const imageContainer = screen.getByTestId('skeleton-image-container');
    expect(imageContainer).toBeInTheDocument();
  });

  it('renders skeleton headline', () => {
    render(<SkeletonCard />);
    const skeletonHeadline = screen.getByTestId('skeleton-headline');
    expect(skeletonHeadline).toBeInTheDocument();
  });

  it('renders four skeleton data points in the list', () => {
    render(<SkeletonCard />);
    const dataPoints = [
      screen.getByTestId('skeleton-data-point-1'),
      screen.getByTestId('skeleton-data-point-2'),
      screen.getByTestId('skeleton-data-point-3'),
      screen.getByTestId('skeleton-data-point-4')
    ];
    expect(dataPoints.length).toBe(4);
  });

  it('renders skeleton lines for data points', () => {
    render(<SkeletonCard />);
    const skeletonLines = [
      screen.getByTestId('skeleton-line-1'),
      screen.getByTestId('skeleton-line-2'),
      screen.getByTestId('skeleton-line-3'),
      screen.getByTestId('skeleton-line-4'),
      screen.getByTestId('skeleton-price-label')
    ];
    expect(skeletonLines.length).toBe(5);
  });

  it('renders skeleton price', () => {
    render(<SkeletonCard />);
    const skeletonPrice = screen.getByTestId('skeleton-price');
    expect(skeletonPrice).toBeInTheDocument();
  });

  it('renders skeleton button', () => {
    render(<SkeletonCard />);
    const skeletonButton = screen.getByTestId('skeleton-button');
    expect(skeletonButton).toBeInTheDocument();
  });

  it('has correct card structure', () => {
    render(<SkeletonCard />);
    const cardContainer = screen.getByTestId('skeleton-card-container');
    const cardContent = screen.getByTestId('skeleton-card-content');
    const topContainer = screen.getByTestId('skeleton-top-container');
    const bottomContainer = screen.getByTestId('skeleton-bottom-container');

    expect(cardContainer).toBeInTheDocument();
    expect(cardContent).toBeInTheDocument();
    expect(topContainer).toBeInTheDocument();
    expect(bottomContainer).toBeInTheDocument();
  });

  it('renders price section with container', () => {
    render(<SkeletonCard />);
    const priceSection = screen.getByTestId('skeleton-price-section');
    const priceContainer = screen.getByTestId('skeleton-price-container');

    expect(priceSection).toBeInTheDocument();
    expect(priceContainer).toBeInTheDocument();
  });

  it('renders data points list', () => {
    render(<SkeletonCard />);
    const dataPointsList = screen.getByTestId('skeleton-data-points-list');
    expect(dataPointsList).toBeInTheDocument();
  });

  it('skeleton lines are rendered for each data point', () => {
    render(<SkeletonCard />);
    const skeletonLines = [
      screen.getByTestId('skeleton-line-1'),
      screen.getByTestId('skeleton-line-2'),
      screen.getByTestId('skeleton-line-3'),
      screen.getByTestId('skeleton-line-4'),
      screen.getByTestId('skeleton-price-label')
    ];
    expect(skeletonLines.length).toBe(5);
  });

  it('renders with correct skeleton styling', () => {
    render(<SkeletonCard />);

    expect(screen.getByTestId('skeleton-headline')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-price')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-button')).toBeInTheDocument();
    // Check that skeleton lines are present
    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
  });

  it('renders consistent structure', () => {
    render(<SkeletonCard />);

    expect(screen.getByTestId('skeleton-card-container')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-image-container')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-card-content')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-top-container')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-bottom-container')).toBeInTheDocument();
  });

  it('can render multiple skeleton cards', () => {
    render(
      <>
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
      </>
    );

    const cards = screen.getAllByTestId('skeleton-card-container');
    expect(cards.length).toBe(3);
  });

  it('renders skeleton elements in correct order', () => {
    render(<SkeletonCard />);

    const cardContent = screen.getByTestId('skeleton-card-content');
    const topContainer = screen.getByTestId('skeleton-top-container');
    const bottomContainer = screen.getByTestId('skeleton-bottom-container');

    // Verify both containers exist as children of card content
    expect(cardContent.contains(topContainer)).toBe(true);
    expect(cardContent.contains(bottomContainer)).toBe(true);
  });

  it('skeleton button has correct structure', () => {
    render(<SkeletonCard />);
    const skeletonButton = screen.getByTestId('skeleton-button');

    expect(skeletonButton.tagName.toLowerCase()).toBe('div');
  });

  it('skeleton lines have correct width props', () => {
    render(<SkeletonCard />);

    // Check that the skeleton lines are rendered
    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-line-2')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-line-3')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-line-4')).toBeInTheDocument();
  });

  it('renders without any interactive elements', () => {
    const { container } = render(<SkeletonCard />);
    const buttons = container.querySelectorAll('button');
    const links = container.querySelectorAll('a');

    expect(buttons.length).toBe(0);
    expect(links.length).toBe(0);
  });
});