/**
 * Unit tests for HowItWorks component
 *
 * Tests cover:
 * - Section title and subtitle rendering
 * - All three steps are displayed
 * - Step numbers (01, 02, 03) are present
 * - Icons from lucide-react render correctly
 * - Step titles and descriptions render
 * - Connector lines between steps (desktop only)
 * - Color theming for each step
 * - Responsive grid layout
 * - Accessibility
 * - Internationalization (i18n)
 */

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

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations: Record<string, string> = {
        'marketing.howItWorks.title': 'Get Started in Minutes',
        'marketing.howItWorks.subtitle': 'Three simple steps to transform your scheduling',
        'marketing.howItWorks.step1.title': 'Create Your Account',
        'marketing.howItWorks.step1.description': 'Sign up for free and set up your business profile in minutes.',
        'marketing.howItWorks.step2.title': 'Add Your Services',
        'marketing.howItWorks.step2.description': 'Configure your services, pricing, and available resources.',
        'marketing.howItWorks.step3.title': 'Start Booking',
        'marketing.howItWorks.step3.description': 'Share your booking link and let customers schedule instantly.',
      };
      return translations[key] || key;
    },
  }),
}));

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

  describe('Section Header', () => {
    it('should render the section title', () => {
      render(<HowItWorks />);

      const title = screen.getByRole('heading', {
        name: 'Get Started in Minutes',
        level: 2,
      });
      expect(title).toBeInTheDocument();
    });

    it('should render the section subtitle', () => {
      render(<HowItWorks />);

      const subtitle = screen.getByText('Three simple steps to transform your scheduling');
      expect(subtitle).toBeInTheDocument();
    });

    it('should apply correct styling to section title', () => {
      render(<HowItWorks />);

      const title = screen.getByRole('heading', { level: 2 });
      expect(title).toHaveClass('text-3xl');
      expect(title).toHaveClass('sm:text-4xl');
      expect(title).toHaveClass('font-bold');
      expect(title).toHaveClass('text-gray-900');
      expect(title).toHaveClass('dark:text-white');
    });

    it('should apply correct styling to subtitle', () => {
      render(<HowItWorks />);

      const subtitle = screen.getByText('Three simple steps to transform your scheduling');
      expect(subtitle).toHaveClass('text-lg');
      expect(subtitle).toHaveClass('text-gray-600');
      expect(subtitle).toHaveClass('dark:text-gray-400');
    });
  });

  describe('Steps Display', () => {
    it('should render all three steps', () => {
      render(<HowItWorks />);

      const step1 = screen.getByText('Create Your Account');
      const step2 = screen.getByText('Add Your Services');
      const step3 = screen.getByText('Start Booking');

      expect(step1).toBeInTheDocument();
      expect(step2).toBeInTheDocument();
      expect(step3).toBeInTheDocument();
    });

    it('should render step descriptions', () => {
      render(<HowItWorks />);

      const desc1 = screen.getByText('Sign up for free and set up your business profile in minutes.');
      const desc2 = screen.getByText('Configure your services, pricing, and available resources.');
      const desc3 = screen.getByText('Share your booking link and let customers schedule instantly.');

      expect(desc1).toBeInTheDocument();
      expect(desc2).toBeInTheDocument();
      expect(desc3).toBeInTheDocument();
    });

    it('should use heading level 3 for step titles', () => {
      render(<HowItWorks />);

      const stepHeadings = screen.getAllByRole('heading', { level: 3 });
      expect(stepHeadings).toHaveLength(3);
      expect(stepHeadings[0]).toHaveTextContent('Create Your Account');
      expect(stepHeadings[1]).toHaveTextContent('Add Your Services');
      expect(stepHeadings[2]).toHaveTextContent('Start Booking');
    });
  });

  describe('Step Numbers', () => {
    it('should display step number 01', () => {
      render(<HowItWorks />);

      const stepNumber = screen.getByText('01');
      expect(stepNumber).toBeInTheDocument();
    });

    it('should display step number 02', () => {
      render(<HowItWorks />);

      const stepNumber = screen.getByText('02');
      expect(stepNumber).toBeInTheDocument();
    });

    it('should display step number 03', () => {
      render(<HowItWorks />);

      const stepNumber = screen.getByText('03');
      expect(stepNumber).toBeInTheDocument();
    });

    it('should apply correct styling to step numbers', () => {
      render(<HowItWorks />);

      const stepNumber = screen.getByText('01');
      expect(stepNumber).toHaveClass('text-sm');
      expect(stepNumber).toHaveClass('font-bold');
    });
  });

  describe('Icons', () => {
    it('should render SVG icons for all steps', () => {
      const { container } = render(<HowItWorks />);

      // Each step should have an icon (lucide-react renders as SVG)
      const icons = container.querySelectorAll('svg');
      expect(icons.length).toBeGreaterThanOrEqual(3);
    });

    it('should render icons with correct size classes', () => {
      const { container } = render(<HowItWorks />);

      const icons = container.querySelectorAll('svg');
      icons.forEach((icon) => {
        expect(icon).toHaveClass('h-8');
        expect(icon).toHaveClass('w-8');
      });
    });
  });

  describe('Grid Layout', () => {
    it('should render steps in a grid container', () => {
      const { container } = render(<HowItWorks />);

      const grid = container.querySelector('.grid');
      expect(grid).toBeInTheDocument();
    });

    it('should apply responsive grid classes', () => {
      const { container } = render(<HowItWorks />);

      const grid = container.querySelector('.grid');
      expect(grid).toHaveClass('md:grid-cols-3');
      expect(grid).toHaveClass('gap-8');
      expect(grid).toHaveClass('lg:gap-12');
    });
  });

  describe('Card Styling', () => {
    it('should render each step in a card', () => {
      const { container } = render(<HowItWorks />);

      const cards = container.querySelectorAll('.bg-white');
      expect(cards.length).toBeGreaterThanOrEqual(3);
    });

    it('should apply card border and rounded corners', () => {
      const { container } = render(<HowItWorks />);

      const cards = container.querySelectorAll('.rounded-2xl');
      expect(cards.length).toBeGreaterThanOrEqual(3);
    });
  });

  describe('Color Themes', () => {
    it('should apply brand color theme to step 1', () => {
      const { container } = render(<HowItWorks />);

      // Check for brand color classes
      const brandElements = container.querySelectorAll('.text-brand-600, .bg-brand-100');
      expect(brandElements.length).toBeGreaterThan(0);
    });

    it('should apply purple color theme to step 2', () => {
      const { container } = render(<HowItWorks />);

      // Check for purple color classes
      const purpleElements = container.querySelectorAll('.text-purple-600, .bg-purple-100');
      expect(purpleElements.length).toBeGreaterThan(0);
    });

    it('should apply green color theme to step 3', () => {
      const { container } = render(<HowItWorks />);

      // Check for green color classes
      const greenElements = container.querySelectorAll('.text-green-600, .bg-green-100');
      expect(greenElements.length).toBeGreaterThan(0);
    });
  });

  describe('Connector Lines', () => {
    it('should render connector lines between steps', () => {
      const { container } = render(<HowItWorks />);

      // Connector lines have absolute positioning and gradient
      const connectors = container.querySelectorAll('.bg-gradient-to-r');
      expect(connectors.length).toBeGreaterThanOrEqual(2);
    });

    it('should hide connector lines on mobile', () => {
      const { container } = render(<HowItWorks />);

      const connectors = container.querySelectorAll('.hidden.md\\:block');
      // Should have 2 connector lines (between step 1-2 and 2-3)
      expect(connectors.length).toBeGreaterThanOrEqual(2);
    });
  });

  describe('Section Styling', () => {
    it('should apply section background color', () => {
      const { container } = render(<HowItWorks />);

      const section = container.querySelector('section');
      expect(section).toHaveClass('bg-gray-50');
      expect(section).toHaveClass('dark:bg-gray-800/50');
    });

    it('should apply section padding', () => {
      const { container } = render(<HowItWorks />);

      const section = container.querySelector('section');
      expect(section).toHaveClass('py-20');
      expect(section).toHaveClass('lg:py-28');
    });

    it('should use max-width container', () => {
      const { container } = render(<HowItWorks />);

      const maxWidthContainer = container.querySelector('.max-w-7xl');
      expect(maxWidthContainer).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should use semantic section element', () => {
      const { container } = render(<HowItWorks />);

      const section = container.querySelector('section');
      expect(section).toBeInTheDocument();
    });

    it('should have proper heading hierarchy', () => {
      render(<HowItWorks />);

      // h2 for main title
      const h2 = screen.getByRole('heading', { level: 2 });
      expect(h2).toBeInTheDocument();

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

    it('should have readable text content', () => {
      render(<HowItWorks />);

      const title = screen.getByText('Get Started in Minutes');
      const subtitle = screen.getByText('Three simple steps to transform your scheduling');

      expect(title).toBeVisible();
      expect(subtitle).toBeVisible();
    });
  });

  describe('Internationalization', () => {
    it('should use translation for section title', () => {
      render(<HowItWorks />);

      const title = screen.getByText('Get Started in Minutes');
      expect(title).toBeInTheDocument();
    });

    it('should use translation for section subtitle', () => {
      render(<HowItWorks />);

      const subtitle = screen.getByText('Three simple steps to transform your scheduling');
      expect(subtitle).toBeInTheDocument();
    });

    it('should use translations for all step titles', () => {
      render(<HowItWorks />);

      expect(screen.getByText('Create Your Account')).toBeInTheDocument();
      expect(screen.getByText('Add Your Services')).toBeInTheDocument();
      expect(screen.getByText('Start Booking')).toBeInTheDocument();
    });

    it('should use translations for all step descriptions', () => {
      render(<HowItWorks />);

      expect(screen.getByText('Sign up for free and set up your business profile in minutes.')).toBeInTheDocument();
      expect(screen.getByText('Configure your services, pricing, and available resources.')).toBeInTheDocument();
      expect(screen.getByText('Share your booking link and let customers schedule instantly.')).toBeInTheDocument();
    });
  });

  describe('Responsive Design', () => {
    it('should apply responsive text sizing to title', () => {
      render(<HowItWorks />);

      const title = screen.getByRole('heading', { level: 2 });
      expect(title).toHaveClass('text-3xl');
      expect(title).toHaveClass('sm:text-4xl');
    });

    it('should apply responsive padding to section', () => {
      const { container } = render(<HowItWorks />);

      const section = container.querySelector('section');
      expect(section).toHaveClass('py-20');
      expect(section).toHaveClass('lg:py-28');
    });

    it('should apply responsive padding to container', () => {
      const { container } = render(<HowItWorks />);

      const containerDiv = container.querySelector('.max-w-7xl');
      expect(containerDiv).toHaveClass('px-4');
      expect(containerDiv).toHaveClass('sm:px-6');
      expect(containerDiv).toHaveClass('lg:px-8');
    });
  });

  describe('Dark Mode Support', () => {
    it('should include dark mode classes for title', () => {
      render(<HowItWorks />);

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

    it('should include dark mode classes for subtitle', () => {
      render(<HowItWorks />);

      const subtitle = screen.getByText('Three simple steps to transform your scheduling');
      expect(subtitle).toHaveClass('dark:text-gray-400');
    });

    it('should include dark mode classes for section background', () => {
      const { container } = render(<HowItWorks />);

      const section = container.querySelector('section');
      expect(section).toHaveClass('dark:bg-gray-800/50');
    });

    it('should include dark mode classes for cards', () => {
      const { container } = render(<HowItWorks />);

      const cards = container.querySelectorAll('.dark\\:bg-gray-800');
      expect(cards.length).toBeGreaterThanOrEqual(3);
    });
  });

  describe('Integration', () => {
    it('should render complete component with all elements', () => {
      render(<HowItWorks />);

      // Header
      expect(screen.getByRole('heading', { level: 2, name: 'Get Started in Minutes' })).toBeInTheDocument();
      expect(screen.getByText('Three simple steps to transform your scheduling')).toBeInTheDocument();

      // All steps
      expect(screen.getByText('01')).toBeInTheDocument();
      expect(screen.getByText('02')).toBeInTheDocument();
      expect(screen.getByText('03')).toBeInTheDocument();

      // All titles
      expect(screen.getByText('Create Your Account')).toBeInTheDocument();
      expect(screen.getByText('Add Your Services')).toBeInTheDocument();
      expect(screen.getByText('Start Booking')).toBeInTheDocument();

      // All descriptions
      expect(screen.getByText('Sign up for free and set up your business profile in minutes.')).toBeInTheDocument();
      expect(screen.getByText('Configure your services, pricing, and available resources.')).toBeInTheDocument();
      expect(screen.getByText('Share your booking link and let customers schedule instantly.')).toBeInTheDocument();
    });

    it('should maintain proper structure and layout', () => {
      const { container } = render(<HowItWorks />);

      // Section element
      const section = container.querySelector('section');
      expect(section).toBeInTheDocument();

      // Container
      const maxWidthContainer = section?.querySelector('.max-w-7xl');
      expect(maxWidthContainer).toBeInTheDocument();

      // Grid
      const grid = maxWidthContainer?.querySelector('.grid');
      expect(grid).toBeInTheDocument();

      // Cards
      const cards = grid?.querySelectorAll('.bg-white');
      expect(cards?.length).toBe(3);
    });
  });
});
