import { describe, it, expect, beforeEach } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ProductsSection } from './products-section';

jest.mock('framer-motion', () => ({
  motion: {
    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
  },
  useInView: () => true,
}));

jest.mock('next/link', () => {
  return ({ children, href }: any) => <a href={href}>{children}</a>;
});

describe('ProductsSection', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render products section', () => {
      render(<ProductsSection />);
      const section = document.querySelector('section#products');
      expect(section).toBeInTheDocument();
    });

    it('should render section heading', () => {
      render(<ProductsSection />);
      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
    });

    it('should render section description', () => {
      render(<ProductsSection />);
      expect(screen.getByText(/自主研发的企业级产品/)).toBeInTheDocument();
    });
  });

  describe('Product Cards', () => {
    it('should render product cards', () => {
      render(<ProductsSection />);
      const cards = document.querySelectorAll('[class*="flex-col"]');
      expect(cards.length).toBeGreaterThan(0);
    });

    it('should display products in grid layout', () => {
      const { container } = render(<ProductsSection />);
      const grid = container.querySelector('.grid-cols-1');
      expect(grid).toBeInTheDocument();
    });

    it('should render product categories', () => {
      render(<ProductsSection />);
      const badges = document.querySelectorAll('[class*="rounded-full"]');
      expect(badges.length).toBeGreaterThan(0);
    });

    it('should render product features', () => {
      render(<ProductsSection />);
      const features = document.querySelectorAll('[class*="inline-flex"]');
      expect(features.length).toBeGreaterThan(0);
    });
  });

  describe('Custom Solution Section', () => {
    it('should render custom solution section', () => {
      render(<ProductsSection />);
      expect(screen.getByText(/需要定制化解决方案/)).toBeInTheDocument();
    });

    it('should render custom solution description', () => {
      render(<ProductsSection />);
      expect(screen.getByText(/我们的专业团队/)).toBeInTheDocument();
    });

    it('should render contact button', () => {
      render(<ProductsSection />);
      expect(screen.getByRole('link', { name: /联系我们/ })).toBeInTheDocument();
    });

    it('should link to contact page', () => {
      render(<ProductsSection />);
      const link = screen.getByRole('link', { name: /联系我们/ });
      expect(link).toHaveAttribute('href', '/contact');
    });
  });

  describe('Accessibility', () => {
    it('should have region role', () => {
      render(<ProductsSection />);
      const section = screen.getByRole('region');
      expect(section).toBeInTheDocument();
    });

    it('should have aria-labelledby attribute', () => {
      render(<ProductsSection />);
      const section = document.querySelector('section#products');
      expect(section).toHaveAttribute('aria-labelledby', 'products-heading');
    });

    it('should have accessible heading', () => {
      render(<ProductsSection />);
      const heading = screen.getByRole('heading', { level: 2 });
      expect(heading).toHaveAttribute('id', 'products-heading');
    });
  });

  describe('Styling', () => {
    it('should have background color', () => {
      render(<ProductsSection />);
      const section = document.querySelector('section#products');
      expect(section).toHaveClass('bg-[#F5F7FA]');
    });

    it('should have proper padding', () => {
      render(<ProductsSection />);
      const section = document.querySelector('section#products');
      expect(section).toHaveClass('py-24');
    });

    it('should have decorative background elements', () => {
      const { container } = render(<ProductsSection />);
      const decorativeElements = container.querySelectorAll('.blur-3xl');
      expect(decorativeElements.length).toBeGreaterThan(0);
    });
  });
});
