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

interface TestCaseItem {
  id: string;
  title: string;
  excerpt: string;
  content: string;
  category: string;
  slug: string;
  date: string;
  image?: string;
  challenge: string;
  solution: string;
  keyMoments: { title: string; description: string }[];
  results: { label: string; value: string }[];
  testimonial: { quote: string; author: string; role: string };
  duration: string;
}

jest.mock('next/navigation', () => ({
  useRouter: () => ({
    push: jest.fn(),
    back: jest.fn(),
    forward: jest.fn(),
  }),
}));

jest.mock('next/link', () => {
  const MockLink = ({ children, href }: { children: React.ReactNode; href: string }) => {
    return <a href={href}>{children}</a>;
  };
  MockLink.displayName = 'MockLink';
  return MockLink;
});

const mockCaseItem: TestCaseItem = {
  id: 'test-case',
  title: '测试案例标题',
  excerpt: '这是一个测试案例的描述',
  content: '这是测试案例的详细内容',
  category: '制造业',
  slug: 'test-case',
  date: '2026-03-27',
  challenge: '这是客户面临的挑战描述',
  solution: '这是我们的解决方案描述',
  keyMoments: [
    { title: '关键时刻一', description: '关键时刻一的详细描述' },
    { title: '关键时刻二', description: '关键时刻二的详细描述' },
  ],
  results: [
    { label: '运营成本', value: '降低25%' },
    { label: '设备故障响应', value: '缩短85%' },
    { label: '排产周期', value: '从1周缩至半天' },
  ],
  testimonial: {
    quote: '这是客户证言内容',
    author: '测试客户',
    role: 'CTO',
  },
  duration: '2年',
};

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

  describe('Rendering', () => {
    it('should render case detail page', () => {
      const { container } = render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(container.firstChild).toBeInTheDocument();
    });

    it('should render case title', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const title = screen.getByRole('heading', { level: 1 });
      expect(title).toBeInTheDocument();
      expect(title).toHaveTextContent('测试案例标题');
    });

    it('should render case excerpt', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const excerpts = screen.getAllByText('这是一个测试案例的描述');
      expect(excerpts.length).toBeGreaterThan(0);
    });

    it('should render case industry badge', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const categories = screen.getAllByText('制造业');
      expect(categories.length).toBeGreaterThan(0);
    });

    it('should render challenge content', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(screen.getByText('这是客户面临的挑战描述')).toBeInTheDocument();
    });

    it('should render solution content', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(screen.getByText('这是我们的解决方案描述')).toBeInTheDocument();
    });

    it('should render results data', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(screen.getByText('降低25%')).toBeInTheDocument();
      expect(screen.getByText('缩短85%')).toBeInTheDocument();
    });

    it('should render testimonial', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(screen.getByText('这是客户证言内容')).toBeInTheDocument();
      const authors = screen.getAllByText('测试客户');
      expect(authors.length).toBeGreaterThan(0);
      const roles = screen.getAllByText('CTO');
      expect(roles.length).toBeGreaterThan(0);
    });

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

    it('should render duration in sidebar', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(screen.getByText('2年')).toBeInTheDocument();
    });
  });

  describe('Sections', () => {
    it('should render customer challenges section', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const section = screen.getByText('客户遇到的成长瓶颈');
      expect(section).toBeInTheDocument();
    });

    it('should render solution section', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const section = screen.getByText('我们如何智连未来');
      expect(section).toBeInTheDocument();
    });

    it('should render growth story section with key moments', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const section = screen.getByText('共同成长的故事');
      expect(section).toBeInTheDocument();
      expect(screen.getByText('关键时刻一')).toBeInTheDocument();
      expect(screen.getByText('关键时刻二')).toBeInTheDocument();
    });

    it('should render achievements section with results', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const section = screen.getByText('今天，他们走到了哪里');
      expect(section).toBeInTheDocument();
    });

    it('should render testimonial section', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const section = screen.getByText('客户证言精选');
      expect(section).toBeInTheDocument();
    });
  });

  describe('Conditional Rendering', () => {
    it('should not render key moments section when empty', () => {
      const caseWithoutMoments = { ...mockCaseItem, keyMoments: [] };
      render(<CaseDetailClient caseItem={caseWithoutMoments} />);
      expect(screen.queryByText('共同成长的故事')).not.toBeInTheDocument();
    });

    it('should not render results section when empty', () => {
      const caseWithoutResults = { ...mockCaseItem, results: [] };
      render(<CaseDetailClient caseItem={caseWithoutResults} />);
      expect(screen.queryByText('今天，他们走到了哪里')).not.toBeInTheDocument();
    });

    it('should not render testimonial section when absent', () => {
      const caseWithoutTestimonial = { ...mockCaseItem, testimonial: undefined };
      render(<CaseDetailClient caseItem={caseWithoutTestimonial} />);
      expect(screen.queryByText('客户证言精选')).not.toBeInTheDocument();
    });
  });

  describe('Navigation', () => {
    it('should have back button', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const backButton = screen.getByRole('button', { name: /返回/i });
      expect(backButton).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should have container element', () => {
      const { container } = render(<CaseDetailClient caseItem={mockCaseItem} />);
      expect(container.firstChild).toBeInTheDocument();
    });

    it('should have proper heading hierarchy', () => {
      render(<CaseDetailClient caseItem={mockCaseItem} />);
      const h1 = screen.getByRole('heading', { level: 1 });
      expect(h1).toBeInTheDocument();

      const h2s = screen.getAllByRole('heading', { level: 2 });
      expect(h2s.length).toBeGreaterThan(0);
    });
  });
});