import { describe, it, expect, jest, beforeAll } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

jest.mock('framer-motion', () => ({
  motion: {
    div: ({ children, className, ...props }: any) => (
      <div className={className} {...props}>
        {children}
      </div>
    ),
    section: ({ children, className, ...props }: any) => (
      <section className={className} {...props}>
        {children}
      </section>
    ),
    span: ({ children, className, ...props }: any) => (
      <span className={className} {...props}>
        {children}
      </span>
    ),
    h1: ({ children, className, ...props }: any) => (
      <h1 className={className} {...props}>
        {children}
      </h1>
    ),
  },
  AnimatePresence: ({ children }: any) => <>{children}</>,
}));

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

jest.mock('lucide-react', () => ({
  ArrowRight: () => <span data-testid="arrow-right" />,
  Shield: () => <span data-testid="shield-icon" />,
  Zap: () => <span data-testid="zap-icon" />,
  Award: () => <span data-testid="award-icon" />,
}));

jest.mock('next/dynamic', () => {
  const React = require('react');
  return {
    __esModule: true,
    default: (importFn: any, options: any) => {
      return React.forwardRef((props: any, ref: any) => {
        return null;
      });
    },
  };
});

jest.mock('@/components/ui/ripple-button', () => ({
  RippleButton: ({ children, className, ...props }: any) => (
    <button className={className} {...props}>
      {children}
    </button>
  ),
  SealButton: ({ children, className, ...props }: any) => (
    <button className={className} {...props}>
      {children}
    </button>
  ),
}));

jest.mock('@/lib/animations', () => ({
  GradientText: ({ children, className }: any) => (
    <span className={className}>{children}</span>
  ),
  MagneticButton: ({ children, className }: any) => (
    <button className={className}>{children}</button>
  ),
  BlurReveal: ({ children, className }: any) => (
    <div className={className}>{children}</div>
  ),
  CounterWithEffect: ({ end, suffix, className }: any) => (
    <span className={className}>{end}{suffix || ''}</span>
  ),
}));

jest.mock('@/lib/constants', () => ({
  COMPANY_INFO: {
    name: '四川睿新致远科技有限公司',
    shortName: '睿新致遠',
    description: '以智慧连接数字趋势，以伙伴身份陪您成长',
  },
  STATS: [
    { value: '10+', label: '企业客户' },
    { value: '20+', label: '成功案例' },
    { value: '30+', label: '项目交付' },
    { value: '12+', label: '年行业经验' },
  ],
}));

import { HeroSection } from './hero-section';

describe('HeroSection', () => {
  beforeAll(() => {
    jest.clearAllMocks();
  });

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

    it('should render company name', () => {
      render(<HeroSection />);
      expect(screen.getByText('睿新致遠')).toBeInTheDocument();
    });

    it('should render features', () => {
      render(<HeroSection />);
      expect(screen.getByText('安全可靠')).toBeInTheDocument();
      expect(screen.getByText('高效便捷')).toBeInTheDocument();
      expect(screen.getByText('专业服务')).toBeInTheDocument();
    });
  });

  describe('Statistics', () => {
    it('should render statistics section', () => {
      render(<HeroSection />);
      expect(screen.getByText('企业客户')).toBeInTheDocument();
      expect(screen.getByText('成功案例')).toBeInTheDocument();
      expect(screen.getByText('项目交付')).toBeInTheDocument();
      expect(screen.getByText('年行业经验')).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should have proper ARIA labels', () => {
      render(<HeroSection />);
      const section = document.querySelector('section#home');
      expect(section).toHaveAttribute('aria-labelledby', 'hero-heading');
    });

    it('should have accessible buttons', () => {
      render(<HeroSection />);
      const buttons = screen.getAllByRole('button');
      expect(buttons.length).toBeGreaterThan(0);
    });
  });
});