/**
 * Unit tests for AboutPage component
 *
 * Tests cover:
 * - Component rendering with all sections
 * - Header section with title and subtitle
 * - Story section with timeline
 * - Mission section content
 * - Values section with all value cards
 * - CTA section integration
 * - Internationalization (i18n)
 * - Accessibility attributes
 * - Responsive design elements
 * - Dark mode support
 */

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import AboutPage from '../AboutPage';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      // Return mock translations based on key
      const translations: Record<string, string> = {
        // Header section
        'marketing.about.title': 'About Smooth Schedule',
        'marketing.about.subtitle': "We're on a mission to simplify scheduling for businesses everywhere.",

        // Story section
        'marketing.about.story.title': 'Our Story',
        'marketing.about.story.content': 'We started creating bespoke custom scheduling and payment solutions in 2017. Through that work, we became convinced that we had a better way of doing things than other scheduling services out there.',
        'marketing.about.story.content2': "Along the way, we discovered features and options that customers love, capabilities that nobody else offers. That's when we decided to change our model so we could help more businesses. SmoothSchedule was born from years of hands-on experience building what businesses actually need.",
        'marketing.about.story.founded': 'Building scheduling solutions',
        'marketing.about.story.timeline.experience': '8+ years building scheduling solutions',
        'marketing.about.story.timeline.battleTested': 'Battle-tested with real businesses',
        'marketing.about.story.timeline.feedback': 'Features born from customer feedback',
        'marketing.about.story.timeline.available': 'Now available to everyone',

        // Mission section
        'marketing.about.mission.title': 'Our Mission',
        'marketing.about.mission.content': 'To empower service businesses with the tools they need to grow, while giving their customers a seamless booking experience.',

        // Values section
        'marketing.about.values.title': 'Our Values',
        'marketing.about.values.simplicity.title': 'Simplicity',
        'marketing.about.values.simplicity.description': 'We believe powerful software can still be simple to use.',
        'marketing.about.values.reliability.title': 'Reliability',
        'marketing.about.values.reliability.description': 'Your business depends on us, so we never compromise on uptime.',
        'marketing.about.values.transparency.title': 'Transparency',
        'marketing.about.values.transparency.description': 'No hidden fees, no surprises. What you see is what you get.',
        'marketing.about.values.support.title': 'Support',
        'marketing.about.values.support.description': "We're here to help you succeed, every step of the way.",
      };
      return translations[key] || key;
    },
  }),
}));

// Mock CTASection component
vi.mock('../../../components/marketing/CTASection', () => ({
  default: ({ variant }: { variant?: string }) => (
    <div data-testid="cta-section" data-variant={variant}>
      CTA Section
    </div>
  ),
}));

// Test wrapper with Router
const createWrapper = () => {
  return ({ children }: { children: React.ReactNode }) => (
    <BrowserRouter>{children}</BrowserRouter>
  );
};

describe('AboutPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  describe('Component Rendering', () => {
    it('should render the about page', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const title = screen.getByText(/About Smooth Schedule/i);
      expect(title).toBeInTheDocument();
    });

    it('should render without crashing', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });
      expect(container).toBeTruthy();
    });

    it('should render all major sections', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Header
      expect(screen.getByText(/About Smooth Schedule/i)).toBeInTheDocument();

      // Story
      expect(screen.getByText(/Our Story/i)).toBeInTheDocument();

      // Mission
      expect(screen.getByText(/Our Mission/i)).toBeInTheDocument();

      // Values
      expect(screen.getByText(/Our Values/i)).toBeInTheDocument();

      // CTA
      expect(screen.getByTestId('cta-section')).toBeInTheDocument();
    });
  });

  describe('Header Section', () => {
    it('should render page title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const title = screen.getByText(/About Smooth Schedule/i);
      expect(title).toBeInTheDocument();
    });

    it('should render page subtitle', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const subtitle = screen.getByText(/We're on a mission to simplify scheduling/i);
      expect(subtitle).toBeInTheDocument();
    });

    it('should render title as h1 element', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveTextContent(/About Smooth Schedule/i);
    });

    it('should apply proper styling to title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveClass('text-4xl');
      expect(heading).toHaveClass('sm:text-5xl');
      expect(heading).toHaveClass('font-bold');
    });

    it('should apply proper styling to subtitle', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const subtitle = screen.getByText(/We're on a mission to simplify scheduling/i);
      expect(subtitle).toHaveClass('text-xl');
      expect(subtitle.tagName).toBe('P');
    });

    it('should have gradient background', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const gradientSection = container.querySelector('.bg-gradient-to-br');
      expect(gradientSection).toBeInTheDocument();
    });

    it('should center align header text', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const headerContainer = container.querySelector('.text-center');
      expect(headerContainer).toBeInTheDocument();
    });
  });

  describe('Story Section', () => {
    it('should render story title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 2, name: /Our Story/i });
      expect(heading).toBeInTheDocument();
    });

    it('should render first story paragraph', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const paragraph = screen.getByText(/We started creating bespoke custom scheduling/i);
      expect(paragraph).toBeInTheDocument();
    });

    it('should render second story paragraph', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const paragraph = screen.getByText(/Along the way, we discovered features/i);
      expect(paragraph).toBeInTheDocument();
    });

    it('should render founding year 2017', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Multiple elements contain 2017, so just check that at least one exists
      const years = screen.getAllByText(/2017/i);
      expect(years.length).toBeGreaterThan(0);
    });

    it('should render founding description', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Multiple elements contain this text, so check that at least one exists
      const descriptions = screen.getAllByText(/Building scheduling solutions/i);
      expect(descriptions.length).toBeGreaterThan(0);
    });

    it('should render all timeline items', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/8\+ years building scheduling solutions/i)).toBeInTheDocument();
      expect(screen.getByText(/Battle-tested with real businesses/i)).toBeInTheDocument();
      expect(screen.getByText(/Features born from customer feedback/i)).toBeInTheDocument();
      expect(screen.getByText(/Now available to everyone/i)).toBeInTheDocument();
    });

    it('should have grid layout for story content', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const gridElement = container.querySelector('.grid.md\\:grid-cols-2');
      expect(gridElement).toBeInTheDocument();
    });

    it('should style founding year prominently', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      // Find the prominently styled year element with specific classes
      const yearElement = container.querySelector('.text-6xl.font-bold');
      expect(yearElement).toBeInTheDocument();
      expect(yearElement?.textContent).toMatch(/2017/i);
    });

    it('should have brand gradient background for timeline card', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const gradientCard = container.querySelector('.bg-gradient-to-br.from-brand-500');
      expect(gradientCard).toBeInTheDocument();
    });
  });

  describe('Mission Section', () => {
    it('should render mission title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 2, name: /Our Mission/i });
      expect(heading).toBeInTheDocument();
    });

    it('should render mission content', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const content = screen.getByText(/To empower service businesses with the tools they need to grow/i);
      expect(content).toBeInTheDocument();
    });

    it('should apply proper styling to mission title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 2, name: /Our Mission/i });
      expect(heading).toHaveClass('text-3xl');
      expect(heading).toHaveClass('font-bold');
    });

    it('should apply proper styling to mission content', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const content = screen.getByText(/To empower service businesses/i);
      expect(content).toHaveClass('text-xl');
      expect(content.tagName).toBe('P');
    });

    it('should center align mission section', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      // Find text-center container in mission section
      const missionHeading = screen.getByRole('heading', { level: 2, name: /Our Mission/i });
      const missionContainer = missionHeading.closest('.text-center');
      expect(missionContainer).toBeInTheDocument();
    });

    it('should have gray background', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const missionSection = container.querySelector('.bg-gray-50');
      expect(missionSection).toBeInTheDocument();
    });
  });

  describe('Values Section', () => {
    it('should render values title', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 2, name: /Our Values/i });
      expect(heading).toBeInTheDocument();
    });

    it('should render all four value cards', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/Simplicity/i)).toBeInTheDocument();
      expect(screen.getByText(/Reliability/i)).toBeInTheDocument();
      expect(screen.getByText(/Transparency/i)).toBeInTheDocument();
      expect(screen.getByText(/Support/i)).toBeInTheDocument();
    });

    it('should render Simplicity value description', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const description = screen.getByText(/We believe powerful software can still be simple to use/i);
      expect(description).toBeInTheDocument();
    });

    it('should render Reliability value description', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const description = screen.getByText(/Your business depends on us, so we never compromise on uptime/i);
      expect(description).toBeInTheDocument();
    });

    it('should render Transparency value description', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const description = screen.getByText(/No hidden fees, no surprises/i);
      expect(description).toBeInTheDocument();
    });

    it('should render Support value description', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const description = screen.getByText(/We're here to help you succeed/i);
      expect(description).toBeInTheDocument();
    });

    it('should have grid layout for value cards', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const gridElement = container.querySelector('.grid.md\\:grid-cols-2.lg\\:grid-cols-4');
      expect(gridElement).toBeInTheDocument();
    });

    it('should render value icons', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      // Each value card should have an icon
      const icons = container.querySelectorAll('svg');
      // Should have at least 4 icons (one for each value)
      expect(icons.length).toBeGreaterThanOrEqual(4);
    });

    it('should apply color-coded icon backgrounds', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      // Check for different colored backgrounds
      expect(container.querySelector('.bg-brand-100')).toBeInTheDocument();
      expect(container.querySelector('.bg-green-100')).toBeInTheDocument();
      expect(container.querySelector('.bg-purple-100')).toBeInTheDocument();
      expect(container.querySelector('.bg-orange-100')).toBeInTheDocument();
    });

    it('should center align value cards', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const valueCards = container.querySelectorAll('.text-center');
      expect(valueCards.length).toBeGreaterThan(0);
    });

    it('should render value titles as h3 elements', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const simplicityHeading = screen.getByRole('heading', { level: 3, name: /Simplicity/i });
      expect(simplicityHeading).toBeInTheDocument();
    });
  });

  describe('CTA Section', () => {
    it('should render CTA section', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const ctaSection = screen.getByTestId('cta-section');
      expect(ctaSection).toBeInTheDocument();
    });

    it('should render CTA section with minimal variant', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const ctaSection = screen.getByTestId('cta-section');
      expect(ctaSection).toHaveAttribute('data-variant', 'minimal');
    });
  });

  describe('Internationalization', () => {
    it('should use translations for header', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/About Smooth Schedule/i)).toBeInTheDocument();
      expect(screen.getByText(/We're on a mission to simplify scheduling/i)).toBeInTheDocument();
    });

    it('should use translations for story section', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/Our Story/i)).toBeInTheDocument();
      expect(screen.getByText(/We started creating bespoke custom scheduling/i)).toBeInTheDocument();
    });

    it('should use translations for mission section', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/Our Mission/i)).toBeInTheDocument();
      expect(screen.getByText(/To empower service businesses/i)).toBeInTheDocument();
    });

    it('should use translations for values section', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/Our Values/i)).toBeInTheDocument();
      expect(screen.getByText(/Simplicity/i)).toBeInTheDocument();
      expect(screen.getByText(/Reliability/i)).toBeInTheDocument();
      expect(screen.getByText(/Transparency/i)).toBeInTheDocument();
      expect(screen.getByText(/Support/i)).toBeInTheDocument();
    });

    it('should use translations for timeline items', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      expect(screen.getByText(/8\+ years building scheduling solutions/i)).toBeInTheDocument();
      expect(screen.getByText(/Battle-tested with real businesses/i)).toBeInTheDocument();
      expect(screen.getByText(/Features born from customer feedback/i)).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should have accessible heading hierarchy', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const h1 = screen.getByRole('heading', { level: 1 });
      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      const h3Elements = screen.getAllByRole('heading', { level: 3 });

      expect(h1).toBeInTheDocument();
      expect(h2Elements.length).toBeGreaterThan(0);
      expect(h3Elements.length).toBeGreaterThan(0);
    });

    it('should have proper heading structure (h1 -> h2 -> h3)', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Should have exactly one h1
      const h1 = screen.getByRole('heading', { level: 1 });
      expect(h1).toBeInTheDocument();

      // Should have multiple h2 sections
      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      expect(h2Elements.length).toBe(3); // Story, Mission, Values

      // Should have h3 for value titles
      const h3Elements = screen.getAllByRole('heading', { level: 3 });
      expect(h3Elements.length).toBe(4); // Four values
    });

    it('should use semantic HTML elements', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const sections = container.querySelectorAll('section');
      expect(sections.length).toBeGreaterThan(0);
    });

    it('should have accessible text contrast', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Light mode text should use gray-900
      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveClass('text-gray-900');
    });
  });

  describe('Responsive Design', () => {
    it('should have responsive heading sizes', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const h1 = screen.getByRole('heading', { level: 1 });
      expect(h1).toHaveClass('text-4xl');
      expect(h1).toHaveClass('sm:text-5xl');
    });

    it('should have responsive grid for story section', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const storyGrid = container.querySelector('.md\\:grid-cols-2');
      expect(storyGrid).toBeInTheDocument();
    });

    it('should have responsive grid for values section', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const valuesGrid = container.querySelector('.md\\:grid-cols-2.lg\\:grid-cols-4');
      expect(valuesGrid).toBeInTheDocument();
    });

    it('should have responsive padding', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const sections = container.querySelectorAll('.py-20');
      expect(sections.length).toBeGreaterThan(0);
    });

    it('should have responsive container width', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const maxWidthContainers = container.querySelectorAll('[class*="max-w-"]');
      expect(maxWidthContainers.length).toBeGreaterThan(0);
    });
  });

  describe('Dark Mode Support', () => {
    it('should have dark mode classes for headings', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveClass('dark:text-white');
    });

    it('should have dark mode classes for text elements', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const subtitle = screen.getByText(/We're on a mission to simplify scheduling/i);
      expect(subtitle).toHaveClass('dark:text-gray-400');
    });

    it('should have dark mode background classes', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const darkBg = container.querySelector('.dark\\:bg-gray-900');
      expect(darkBg).toBeInTheDocument();
    });

    it('should have dark mode gradient classes', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const darkGradient = container.querySelector('.dark\\:from-gray-900');
      expect(darkGradient).toBeInTheDocument();
    });

    it('should have dark mode icon background classes', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const darkIconBg = container.querySelector('.dark\\:bg-brand-900\\/30');
      expect(darkIconBg).toBeInTheDocument();
    });
  });

  describe('Layout and Spacing', () => {
    it('should have proper section padding', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const sections = container.querySelectorAll('.py-20');
      expect(sections.length).toBeGreaterThan(0);
    });

    it('should have responsive section padding', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const responsivePadding = container.querySelector('.lg\\:py-28');
      expect(responsivePadding).toBeInTheDocument();
    });

    it('should constrain content width', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      expect(container.querySelector('.max-w-4xl')).toBeInTheDocument();
      expect(container.querySelector('.max-w-7xl')).toBeInTheDocument();
    });

    it('should have proper margins between elements', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveClass('mb-6');
    });

    it('should have gap between grid items', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const gridsWithGap = container.querySelectorAll('[class*="gap-"]');
      expect(gridsWithGap.length).toBeGreaterThan(0);
    });
  });

  describe('Visual Elements', () => {
    it('should render timeline bullets', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const bullets = container.querySelectorAll('.rounded-full');
      // Should have bullet points for timeline items
      expect(bullets.length).toBeGreaterThanOrEqual(4);
    });

    it('should apply rounded corners to cards', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const roundedElements = container.querySelectorAll('.rounded-2xl');
      expect(roundedElements.length).toBeGreaterThan(0);
    });

    it('should have icon containers with proper styling', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const iconContainer = container.querySelector('.inline-flex.p-4.rounded-2xl');
      expect(iconContainer).toBeInTheDocument();
    });
  });

  describe('Integration Tests', () => {
    it('should render complete page structure', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // Header
      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();

      // Story (2017 appears in multiple places - the year display and story content)
      const yearElements = screen.getAllByText(/2017/i);
      expect(yearElements.length).toBeGreaterThan(0);
      expect(screen.getByText(/8\+ years building scheduling solutions/i)).toBeInTheDocument();

      // Mission
      expect(screen.getByText(/To empower service businesses/i)).toBeInTheDocument();

      // Values
      expect(screen.getByText(/Simplicity/i)).toBeInTheDocument();
      expect(screen.getByText(/Reliability/i)).toBeInTheDocument();
      expect(screen.getByText(/Transparency/i)).toBeInTheDocument();
      expect(screen.getByText(/Support/i)).toBeInTheDocument();

      // CTA
      expect(screen.getByTestId('cta-section')).toBeInTheDocument();
    });

    it('should have all sections in correct order', () => {
      const { container } = render(<AboutPage />, { wrapper: createWrapper() });

      const sections = container.querySelectorAll('section');
      expect(sections.length).toBe(4); // Header, Story, Mission, Values (CTA is a div, not section)
    });

    it('should maintain proper visual hierarchy', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      // h1 for main title
      const h1 = screen.getByRole('heading', { level: 1 });
      expect(h1).toHaveTextContent(/About Smooth Schedule/i);

      // h2 for section titles
      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      expect(h2Elements).toHaveLength(3);

      // h3 for value titles
      const h3Elements = screen.getAllByRole('heading', { level: 3 });
      expect(h3Elements).toHaveLength(4);
    });

    it('should render all timeline items', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const timelineItems = [
        /8\+ years building scheduling solutions/i,
        /Battle-tested with real businesses/i,
        /Features born from customer feedback/i,
        /Now available to everyone/i,
      ];

      timelineItems.forEach(item => {
        expect(screen.getByText(item)).toBeInTheDocument();
      });
    });

    it('should render all value cards with descriptions', () => {
      render(<AboutPage />, { wrapper: createWrapper() });

      const values = [
        { title: /Simplicity/i, description: /powerful software can still be simple/i },
        { title: /Reliability/i, description: /never compromise on uptime/i },
        { title: /Transparency/i, description: /No hidden fees/i },
        { title: /Support/i, description: /help you succeed/i },
      ];

      values.forEach(value => {
        expect(screen.getByText(value.title)).toBeInTheDocument();
        expect(screen.getByText(value.description)).toBeInTheDocument();
      });
    });
  });
});
