/**
 * Comprehensive unit tests for HomePage component
 *
 * Tests the marketing HomePage including:
 * - Hero section rendering
 * - Feature sections display
 * - CTA buttons presence
 * - Navigation links work
 * - Marketing components integration
 * - Translations
 * - Accessibility
 */

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

// Mock child components to isolate HomePage testing
vi.mock('../../../components/marketing/Hero', () => ({
  default: () => <div data-testid="hero-section">Hero Component</div>,
}));

vi.mock('../../../components/marketing/FeatureCard', () => ({
  default: ({ title, description, icon: Icon }: any) => (
    <div data-testid="feature-card">
      <Icon data-testid="feature-icon" />
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  ),
}));

vi.mock('../../../components/marketing/AutomationShowcase', () => ({
  default: () => <div data-testid="automation-showcase">Automation Showcase Component</div>,
}));

vi.mock('../../../components/marketing/BenefitsSection', () => ({
  default: () => <div data-testid="benefits-section">Benefits Section Component</div>,
}));

vi.mock('../../../components/marketing/TestimonialCard', () => ({
  default: ({ quote, author, role, company, rating }: any) => (
    <div data-testid="testimonial-card">
      <p>{quote}</p>
      <div>{author}</div>
      <div>{role}</div>
      <div>{company}</div>
      <div>{rating} stars</div>
    </div>
  ),
}));

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

// Mock useTranslation hook
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations: Record<string, string> = {
        // Features section
        'marketing.home.featuresSection.title': 'Powerful Features',
        'marketing.home.featuresSection.subtitle': 'Everything you need to manage your business',

        // Features
        'marketing.home.features.intelligentScheduling.title': 'Intelligent Scheduling',
        'marketing.home.features.intelligentScheduling.description': 'Smart scheduling that works for you',
        'marketing.home.features.automationEngine.title': 'Automation Engine',
        'marketing.home.features.automationEngine.description': 'Automate repetitive tasks',
        'marketing.home.features.multiTenant.title': 'Multi-Tenant',
        'marketing.home.features.multiTenant.description': 'Manage multiple businesses',
        'marketing.home.features.integratedPayments.title': 'Integrated Payments',
        'marketing.home.features.integratedPayments.description': 'Accept payments easily',
        'marketing.home.features.customerManagement.title': 'Customer Management',
        'marketing.home.features.customerManagement.description': 'Manage your customers',
        'marketing.home.features.advancedAnalytics.title': 'Advanced Analytics',
        'marketing.home.features.advancedAnalytics.description': 'Track your performance',
        'marketing.home.features.digitalContracts.title': 'Digital Contracts',
        'marketing.home.features.digitalContracts.description': 'Sign contracts digitally',

        // Testimonials section
        'marketing.home.testimonialsSection.title': 'What Our Customers Say',
        'marketing.home.testimonialsSection.subtitle': 'Join thousands of happy customers',

        // Testimonials
        'marketing.home.testimonials.winBack.quote': 'SmoothSchedule helped us win back customers',
        'marketing.home.testimonials.winBack.author': 'John Doe',
        'marketing.home.testimonials.winBack.role': 'CEO',
        'marketing.home.testimonials.winBack.company': 'Acme Corp',
        'marketing.home.testimonials.resources.quote': 'Resource management is a breeze',
        'marketing.home.testimonials.resources.author': 'Jane Smith',
        'marketing.home.testimonials.resources.role': 'Operations Manager',
        'marketing.home.testimonials.resources.company': 'Tech Solutions',
        'marketing.home.testimonials.whiteLabel.quote': 'White label features are amazing',
        'marketing.home.testimonials.whiteLabel.author': 'Bob Johnson',
        'marketing.home.testimonials.whiteLabel.role': 'Founder',
        'marketing.home.testimonials.whiteLabel.company': 'StartupXYZ',
      };
      return translations[key] || key;
    },
  }),
}));

const renderHomePage = () => {
  return render(
    <BrowserRouter>
      <HomePage />
    </BrowserRouter>
  );
};

describe('HomePage', () => {
  describe('Hero Section', () => {
    it('should render the hero section', () => {
      renderHomePage();

      const heroSection = screen.getByTestId('hero-section');
      expect(heroSection).toBeInTheDocument();
      expect(heroSection).toHaveTextContent('Hero Component');
    });

    it('should render hero section as the first major section', () => {
      const { container } = renderHomePage();

      const heroSection = screen.getByTestId('hero-section');
      const allSections = container.querySelectorAll('[data-testid]');

      // Hero should be one of the first sections
      expect(allSections[0]).toBe(heroSection);
    });
  });

  describe('Features Section', () => {
    it('should render features section heading', () => {
      renderHomePage();

      const heading = screen.getByText('Powerful Features');
      expect(heading).toBeInTheDocument();
      expect(heading.tagName).toBe('H2');
    });

    it('should render features section subtitle', () => {
      renderHomePage();

      const subtitle = screen.getByText('Everything you need to manage your business');
      expect(subtitle).toBeInTheDocument();
    });

    it('should display all 7 feature cards', () => {
      renderHomePage();

      const featureCards = screen.getAllByTestId('feature-card');
      expect(featureCards).toHaveLength(7);
    });

    it('should render intelligent scheduling feature', () => {
      renderHomePage();

      expect(screen.getByText('Intelligent Scheduling')).toBeInTheDocument();
      expect(screen.getByText('Smart scheduling that works for you')).toBeInTheDocument();
    });

    it('should render automation engine feature', () => {
      renderHomePage();

      expect(screen.getByText('Automation Engine')).toBeInTheDocument();
      expect(screen.getByText('Automate repetitive tasks')).toBeInTheDocument();
    });

    it('should render multi-tenant feature', () => {
      renderHomePage();

      expect(screen.getByText('Multi-Tenant')).toBeInTheDocument();
      expect(screen.getByText('Manage multiple businesses')).toBeInTheDocument();
    });

    it('should render integrated payments feature', () => {
      renderHomePage();

      expect(screen.getByText('Integrated Payments')).toBeInTheDocument();
      expect(screen.getByText('Accept payments easily')).toBeInTheDocument();
    });

    it('should render customer management feature', () => {
      renderHomePage();

      expect(screen.getByText('Customer Management')).toBeInTheDocument();
      expect(screen.getByText('Manage your customers')).toBeInTheDocument();
    });

    it('should render advanced analytics feature', () => {
      renderHomePage();

      expect(screen.getByText('Advanced Analytics')).toBeInTheDocument();
      expect(screen.getByText('Track your performance')).toBeInTheDocument();
    });

    it('should render digital contracts feature', () => {
      renderHomePage();

      expect(screen.getByText('Digital Contracts')).toBeInTheDocument();
      expect(screen.getByText('Sign contracts digitally')).toBeInTheDocument();
    });

    it('should render all feature icons', () => {
      renderHomePage();

      const featureIcons = screen.getAllByTestId('feature-icon');
      expect(featureIcons).toHaveLength(7);
    });

    it('should apply correct styling to features section', () => {
      const { container } = renderHomePage();

      // Find the features section by looking for the section with feature cards
      const sections = container.querySelectorAll('section');
      const featuresSection = Array.from(sections).find(section =>
        section.querySelector('[data-testid="feature-card"]')
      );

      expect(featuresSection).toBeInTheDocument();
      expect(featuresSection).toHaveClass('bg-white', 'dark:bg-gray-900');
    });
  });

  describe('Automation Showcase Section', () => {
    it('should render the automation showcase section', () => {
      renderHomePage();

      const automationShowcase = screen.getByTestId('automation-showcase');
      expect(automationShowcase).toBeInTheDocument();
      expect(automationShowcase).toHaveTextContent('Automation Showcase Component');
    });
  });

  describe('Benefits Section', () => {
    it('should render the benefits section', () => {
      renderHomePage();

      const benefitsSection = screen.getByTestId('benefits-section');
      expect(benefitsSection).toBeInTheDocument();
      expect(benefitsSection).toHaveTextContent('Benefits Section Component');
    });
  });

  describe('Testimonials Section', () => {
    it('should render testimonials section heading', () => {
      renderHomePage();

      const heading = screen.getByText('What Our Customers Say');
      expect(heading).toBeInTheDocument();
      expect(heading.tagName).toBe('H2');
    });

    it('should render testimonials section subtitle', () => {
      renderHomePage();

      const subtitle = screen.getByText('Join thousands of happy customers');
      expect(subtitle).toBeInTheDocument();
    });

    it('should display all 3 testimonial cards', () => {
      renderHomePage();

      const testimonialCards = screen.getAllByTestId('testimonial-card');
      expect(testimonialCards).toHaveLength(3);
    });

    it('should render win-back testimonial', () => {
      renderHomePage();

      expect(screen.getByText('SmoothSchedule helped us win back customers')).toBeInTheDocument();
      expect(screen.getByText('John Doe')).toBeInTheDocument();
      expect(screen.getByText('CEO')).toBeInTheDocument();
      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
    });

    it('should render resources testimonial', () => {
      renderHomePage();

      expect(screen.getByText('Resource management is a breeze')).toBeInTheDocument();
      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
      expect(screen.getByText('Operations Manager')).toBeInTheDocument();
      expect(screen.getByText('Tech Solutions')).toBeInTheDocument();
    });

    it('should render white-label testimonial', () => {
      renderHomePage();

      expect(screen.getByText('White label features are amazing')).toBeInTheDocument();
      expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
      expect(screen.getByText('Founder')).toBeInTheDocument();
      expect(screen.getByText('StartupXYZ')).toBeInTheDocument();
    });

    it('should render all testimonials with 5-star ratings', () => {
      renderHomePage();

      const ratingElements = screen.getAllByText('5 stars');
      expect(ratingElements).toHaveLength(3);
    });

    it('should apply correct styling to testimonials section', () => {
      const { container } = renderHomePage();

      // Find the testimonials section by looking for the section with testimonial cards
      const sections = container.querySelectorAll('section');
      const testimonialsSection = Array.from(sections).find(section =>
        section.querySelector('[data-testid="testimonial-card"]')
      );

      expect(testimonialsSection).toBeInTheDocument();
      expect(testimonialsSection).toHaveClass('bg-gray-50', 'dark:bg-gray-800/50');
    });
  });

  describe('CTA Section', () => {
    it('should render the CTA section', () => {
      renderHomePage();

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

    it('should render CTA section as the last section', () => {
      renderHomePage();

      const ctaSection = screen.getByTestId('cta-section');
      const allSections = screen.getAllByTestId(/section/);

      // CTA should be the last section
      expect(allSections[allSections.length - 1]).toBe(ctaSection);
    });
  });

  describe('Page Structure', () => {
    it('should render all main sections in correct order', () => {
      renderHomePage();

      const hero = screen.getByTestId('hero-section');
      const automationShowcase = screen.getByTestId('automation-showcase');
      const benefits = screen.getByTestId('benefits-section');
      const cta = screen.getByTestId('cta-section');

      // All sections should be present
      expect(hero).toBeInTheDocument();
      expect(automationShowcase).toBeInTheDocument();
      expect(benefits).toBeInTheDocument();
      expect(cta).toBeInTheDocument();
    });

    it('should have proper semantic structure', () => {
      const { container } = renderHomePage();

      // Should have multiple section elements
      const sections = container.querySelectorAll('section');
      expect(sections.length).toBeGreaterThan(0);

      // Should have proper heading hierarchy
      const h2Headings = container.querySelectorAll('h2');
      expect(h2Headings.length).toBeGreaterThan(0);
    });

    it('should render within a container div', () => {
      const { container } = renderHomePage();

      const rootDiv = container.firstChild;
      expect(rootDiv).toBeInstanceOf(HTMLDivElement);
    });
  });

  describe('Responsive Design', () => {
    it('should apply responsive padding classes to features section', () => {
      const { container } = renderHomePage();

      const sections = container.querySelectorAll('section');
      const featuresSection = Array.from(sections).find(section =>
        section.querySelector('[data-testid="feature-card"]')
      );

      expect(featuresSection).toHaveClass('py-20', 'lg:py-28');
    });

    it('should apply responsive grid layout to features', () => {
      const { container } = renderHomePage();

      // Find the grid container
      const gridContainer = container.querySelector('.grid.md\\:grid-cols-2.lg\\:grid-cols-3');
      expect(gridContainer).toBeInTheDocument();
    });

    it('should apply responsive grid layout to testimonials', () => {
      const { container } = renderHomePage();

      // Find all grid containers
      const gridContainers = container.querySelectorAll('.grid.md\\:grid-cols-2.lg\\:grid-cols-3');

      // There should be at least 2 grid containers (features and testimonials)
      expect(gridContainers.length).toBeGreaterThanOrEqual(2);
    });

    it('should have max-width container for content', () => {
      const { container } = renderHomePage();

      const maxWidthContainers = container.querySelectorAll('.max-w-7xl');
      expect(maxWidthContainers.length).toBeGreaterThan(0);
    });

    it('should apply responsive padding to containers', () => {
      const { container } = renderHomePage();

      const paddedContainers = container.querySelectorAll('.px-4.sm\\:px-6.lg\\:px-8');
      expect(paddedContainers.length).toBeGreaterThan(0);
    });
  });

  describe('Dark Mode Support', () => {
    it('should include dark mode classes for sections', () => {
      const { container } = renderHomePage();

      // Features section should have dark mode background
      const sections = container.querySelectorAll('section');
      const hasFeatureSection = Array.from(sections).some(section =>
        section.classList.contains('dark:bg-gray-900')
      );
      expect(hasFeatureSection).toBe(true);
    });

    it('should include dark mode classes for testimonials section', () => {
      const { container } = renderHomePage();

      const sections = container.querySelectorAll('section');
      const hasTestimonialSection = Array.from(sections).some(section =>
        section.classList.contains('dark:bg-gray-800/50')
      );
      expect(hasTestimonialSection).toBe(true);
    });

    it('should include dark mode classes for headings', () => {
      renderHomePage();

      const heading = screen.getByText('Powerful Features');
      expect(heading).toHaveClass('dark:text-white');
    });

    it('should include dark mode classes for descriptions', () => {
      renderHomePage();

      const subtitle = screen.getByText('Everything you need to manage your business');
      expect(subtitle).toHaveClass('dark:text-gray-400');
    });
  });

  describe('Accessibility', () => {
    it('should use semantic heading elements', () => {
      renderHomePage();

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

    it('should have proper heading hierarchy for features section', () => {
      renderHomePage();

      const featuresHeading = screen.getByText('Powerful Features');
      expect(featuresHeading).toHaveClass('text-3xl', 'sm:text-4xl', 'font-bold');
    });

    it('should have proper heading hierarchy for testimonials section', () => {
      renderHomePage();

      const testimonialsHeading = screen.getByText('What Our Customers Say');
      expect(testimonialsHeading).toHaveClass('text-3xl', 'sm:text-4xl', 'font-bold');
    });

    it('should maintain readable text contrast', () => {
      renderHomePage();

      const heading = screen.getByText('Powerful Features');
      expect(heading).toHaveClass('text-gray-900', 'dark:text-white');

      const subtitle = screen.getByText('Everything you need to manage your business');
      expect(subtitle).toHaveClass('text-gray-600', 'dark:text-gray-400');
    });

    it('should use semantic section elements', () => {
      const { container } = renderHomePage();

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

  describe('Translation Integration', () => {
    it('should use translations for features section title', () => {
      renderHomePage();

      expect(screen.getByText('Powerful Features')).toBeInTheDocument();
    });

    it('should use translations for features section subtitle', () => {
      renderHomePage();

      expect(screen.getByText('Everything you need to manage your business')).toBeInTheDocument();
    });

    it('should use translations for all feature titles', () => {
      renderHomePage();

      expect(screen.getByText('Intelligent Scheduling')).toBeInTheDocument();
      expect(screen.getByText('Automation Engine')).toBeInTheDocument();
      expect(screen.getByText('Multi-Tenant')).toBeInTheDocument();
      expect(screen.getByText('Integrated Payments')).toBeInTheDocument();
      expect(screen.getByText('Customer Management')).toBeInTheDocument();
      expect(screen.getByText('Advanced Analytics')).toBeInTheDocument();
      expect(screen.getByText('Digital Contracts')).toBeInTheDocument();
    });

    it('should use translations for testimonials section', () => {
      renderHomePage();

      expect(screen.getByText('What Our Customers Say')).toBeInTheDocument();
      expect(screen.getByText('Join thousands of happy customers')).toBeInTheDocument();
    });
  });

  describe('Component Integration', () => {
    it('should integrate Hero component', () => {
      renderHomePage();

      expect(screen.getByTestId('hero-section')).toBeInTheDocument();
    });

    it('should integrate FeatureCard components', () => {
      renderHomePage();

      const featureCards = screen.getAllByTestId('feature-card');
      expect(featureCards).toHaveLength(7);
    });

    it('should integrate AutomationShowcase component', () => {
      renderHomePage();

      expect(screen.getByTestId('automation-showcase')).toBeInTheDocument();
    });

    it('should integrate BenefitsSection component', () => {
      renderHomePage();

      expect(screen.getByTestId('benefits-section')).toBeInTheDocument();
    });

    it('should integrate TestimonialCard components', () => {
      renderHomePage();

      const testimonialCards = screen.getAllByTestId('testimonial-card');
      expect(testimonialCards).toHaveLength(3);
    });

    it('should integrate CTASection component', () => {
      renderHomePage();

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

  describe('Content Sections', () => {
    it('should have distinct background colors for sections', () => {
      const { container } = renderHomePage();

      const sections = container.querySelectorAll('section');

      // Features section - white background
      const featuresSection = Array.from(sections).find(section =>
        section.classList.contains('bg-white')
      );
      expect(featuresSection).toBeInTheDocument();

      // Testimonials section - gray background
      const testimonialsSection = Array.from(sections).find(section =>
        section.classList.contains('bg-gray-50')
      );
      expect(testimonialsSection).toBeInTheDocument();
    });

    it('should center content with max-width containers', () => {
      const { container } = renderHomePage();

      const maxWidthContainers = container.querySelectorAll('.max-w-7xl.mx-auto');
      expect(maxWidthContainers.length).toBeGreaterThan(0);
    });

    it('should apply consistent spacing between sections', () => {
      const { container } = renderHomePage();

      const sections = container.querySelectorAll('section');
      const hasPaddedSections = Array.from(sections).some(section =>
        section.classList.contains('py-20') || section.classList.contains('lg:py-28')
      );
      expect(hasPaddedSections).toBe(true);
    });
  });

  describe('Feature Card Configuration', () => {
    it('should pass correct props to feature cards', () => {
      renderHomePage();

      // Check that feature cards receive title and description
      const featureCards = screen.getAllByTestId('feature-card');

      featureCards.forEach(card => {
        // Each card should have an h3 (title) and p (description)
        const title = within(card).getByRole('heading', { level: 3 });
        const description = within(card).queryByRole('paragraph') || card.querySelector('p');

        expect(title).toBeInTheDocument();
        expect(description).toBeInTheDocument();
      });
    });
  });

  describe('Testimonial Configuration', () => {
    it('should render testimonials with all required fields', () => {
      renderHomePage();

      const testimonialCards = screen.getAllByTestId('testimonial-card');

      testimonialCards.forEach(card => {
        // Each testimonial should have quote, author, role, company, and rating
        expect(card.textContent).toMatch(/.+/); // Has content
      });
    });

    it('should render testimonials with proper author information', () => {
      renderHomePage();

      // Check all authors are displayed
      expect(screen.getByText('John Doe')).toBeInTheDocument();
      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
      expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
    });

    it('should render testimonials with proper company information', () => {
      renderHomePage();

      // Check all companies are displayed
      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
      expect(screen.getByText('Tech Solutions')).toBeInTheDocument();
      expect(screen.getByText('StartupXYZ')).toBeInTheDocument();
    });
  });
});
