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>;
});

jest.mock('@/hooks/use-products', () => ({
  useProducts: () => ({
    products: [
      {
        id: '1',
        title: '测试产品1',
        description: '这是测试产品1的描述',
        image: '/test-image-1.jpg',
        category: '企业服务',
        features: ['特性1', '特性2'],
        benefits: ['价值1', '价值2'],
      },
      {
        id: '2',
        title: '测试产品2',
        description: '这是测试产品2的描述',
        image: '/test-image-2.jpg',
        category: '解决方案',
        features: ['特性3', '特性4'],
        benefits: ['价值3', '价值4'],
      },
    ],
    loading: false,
    error: null,
  }),
}));

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);
    });
  });
});