import { describe, it, expect, beforeEach } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ServicesSection } from './services-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-services', () => ({
  useServices: () => ({
    services: [
      {
        id: '1',
        title: '测试服务1',
        description: '这是测试服务1的描述',
        icon: 'Code',
        features: ['特性1', '特性2'],
      },
      {
        id: '2',
        title: '测试服务2',
        description: '这是测试服务2的描述',
        icon: 'Database',
        features: ['特性3', '特性4'],
      },
    ],
    loading: false,
    error: null,
  }),
}));

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

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

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

    it('should render section description', () => {
      render(<ServicesSection />);
      expect(screen.getByText(/专业技术团队/)).toBeInTheDocument();
    });
  });

  describe('Service Cards', () => {
    it('should render service cards', () => {
      render(<ServicesSection />);
      const cards = document.querySelectorAll('.p-6');
      expect(cards.length).toBeGreaterThan(0);
    });

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

    it('should render service icons', () => {
      render(<ServicesSection />);
      const icons = document.querySelectorAll('svg');
      expect(icons.length).toBeGreaterThan(0);
    });
  });

  describe('Call to Action', () => {
    it('should render view all services button', () => {
      render(<ServicesSection />);
      expect(screen.getByRole('link', { name: /查看全部服务/ })).toBeInTheDocument();
    });

    it('should link to services page', () => {
      render(<ServicesSection />);
      const link = screen.getByRole('link', { name: /查看全部服务/ });
      expect(link).toHaveAttribute('href', '/services');
    });
  });

  describe('Accessibility', () => {
    it('should have section with id', () => {
      render(<ServicesSection />);
      const section = document.querySelector('section#services');
      expect(section).toBeInTheDocument();
    });

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

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

  describe('Styling', () => {
    it('should have white background', () => {
      render(<ServicesSection />);
      const section = document.querySelector('section#services');
      expect(section).toHaveClass('bg-white');
    });

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

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