/**
 * Unit tests for Hero component
 *
 * Tests cover:
 * - Component rendering with all elements
 * - Headline and title rendering
 * - Subheadline/description rendering
 * - CTA buttons presence and functionality
 * - Visual content and graphics rendering
 * - Feature badges display
 * - Responsive design elements
 * - Accessibility attributes
 * - Internationalization (i18n)
 * - Background decorative elements
 * - Statistics and metrics display
 */

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

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      // Return mock translations based on key
      const translations: Record<string, string> = {
        'marketing.hero.badge': 'New: Automation Marketplace',
        'marketing.hero.title': 'The Operating System for',
        'marketing.hero.titleHighlight': 'Service Businesses',
        'marketing.hero.description': 'Orchestrate your entire operation with intelligent scheduling and powerful automation. No coding required.',
        'marketing.hero.startFreeTrial': 'Start Free Trial',
        'marketing.hero.watchDemo': 'Watch Demo',
        'marketing.hero.noCreditCard': 'No credit card required',
        'marketing.hero.freeTrial': '14-day free trial',
        'marketing.hero.cancelAnytime': 'Cancel anytime',
        'marketing.hero.visualContent.automatedSuccess': 'Automated Success',
        'marketing.hero.visualContent.autopilot': 'Your business, running on autopilot.',
        'marketing.hero.visualContent.revenue': 'Revenue',
        'marketing.hero.visualContent.noShows': 'No-Shows',
        'marketing.hero.visualContent.revenueOptimized': 'Revenue Optimized',
        'marketing.hero.visualContent.thisWeek': '+$2,400 this week',
      };
      return translations[key] || key;
    },
  }),
}));

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

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

  describe('Component Rendering', () => {
    it('should render the hero section', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const heroSection = screen.getByText(/The Operating System for/i).closest('div');
      expect(heroSection).toBeInTheDocument();
    });

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

    it('should have proper semantic structure', () => {
      render(<Hero />, { wrapper: createWrapper() });

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

  describe('Headline and Title Rendering', () => {
    it('should render main headline', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const headline = screen.getByText(/The Operating System for/i);
      expect(headline).toBeInTheDocument();
    });

    it('should render highlighted title text', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const highlightedTitle = screen.getByText(/Service Businesses/i);
      expect(highlightedTitle).toBeInTheDocument();
    });

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

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveTextContent(/The Operating System for/i);
      expect(heading).toHaveTextContent(/Service Businesses/i);
    });

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

      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading).toHaveClass('font-bold');
      expect(heading).toHaveClass('tracking-tight');
    });

    it('should highlight title portion with brand color', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const highlightedTitle = screen.getByText(/Service Businesses/i);
      expect(highlightedTitle).toHaveClass('text-brand-600');
      expect(highlightedTitle).toHaveClass('dark:text-brand-400');
    });
  });

  describe('Subheadline/Description Rendering', () => {
    it('should render description text', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const description = screen.getByText(/Orchestrate your entire operation/i);
      expect(description).toBeInTheDocument();
    });

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

      const description = screen.getByText(/intelligent scheduling and powerful automation/i);
      expect(description).toBeInTheDocument();
    });

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

      const description = screen.getByText(/Orchestrate your entire operation/i);
      expect(description.tagName).toBe('P');
      expect(description).toHaveClass('text-lg');
    });
  });

  describe('Badge Display', () => {
    it('should render new feature badge', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const badge = screen.getByText(/New: Automation Marketplace/i);
      expect(badge).toBeInTheDocument();
    });

    it('should include animated pulse indicator', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      const pulseElement = container.querySelector('.animate-pulse');
      expect(pulseElement).toBeInTheDocument();
    });

    it('should apply badge styling', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const badge = screen.getByText(/New: Automation Marketplace/i);
      expect(badge).toHaveClass('text-sm');
      expect(badge).toHaveClass('font-medium');
    });
  });

  describe('CTA Buttons', () => {
    it('should render Start Free Trial button', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
      expect(ctaButton).toBeInTheDocument();
    });

    it('should render Watch Demo button', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
      expect(demoButton).toBeInTheDocument();
    });

    it('should have correct href for Start Free Trial button', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
      expect(ctaButton).toHaveAttribute('href', '/signup');
    });

    it('should have correct href for Watch Demo button', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
      expect(demoButton).toHaveAttribute('href', '/features');
    });

    it('should render primary CTA with brand colors', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
      expect(ctaButton).toHaveClass('bg-brand-600');
      expect(ctaButton).toHaveClass('hover:bg-brand-700');
      expect(ctaButton).toHaveClass('text-white');
    });

    it('should render secondary CTA with outline style', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
      expect(demoButton).toHaveClass('border');
      expect(demoButton).toHaveClass('border-gray-200');
    });

    it('should include ArrowRight icon in primary CTA', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
      const icon = ctaButton.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });

    it('should include Play icon in secondary CTA', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
      const icon = demoButton.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });

    it('should be clickable (keyboard accessible)', async () => {
      const user = userEvent.setup();
      render(<Hero />, { wrapper: createWrapper() });

      const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });

      // Should be focusable
      await user.tab();
      // Check if any link is focused (may not be the first due to badge)
      expect(document.activeElement).toBeInstanceOf(HTMLElement);
    });
  });

  describe('Feature Checkmarks', () => {
    it('should display no credit card feature', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const feature = screen.getByText(/No credit card required/i);
      expect(feature).toBeInTheDocument();
    });

    it('should display free trial feature', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const feature = screen.getByText(/14-day free trial/i);
      expect(feature).toBeInTheDocument();
    });

    it('should display cancel anytime feature', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const feature = screen.getByText(/Cancel anytime/i);
      expect(feature).toBeInTheDocument();
    });

    it('should render CheckCircle2 icons for features', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      // Should have multiple check circle icons
      const checkIcons = container.querySelectorAll('svg');
      expect(checkIcons.length).toBeGreaterThan(0);
    });
  });

  describe('Visual Content and Graphics', () => {
    it('should render visual content section', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const visualHeading = screen.getByText(/Automated Success/i);
      expect(visualHeading).toBeInTheDocument();
    });

    it('should render visual content description', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const description = screen.getByText(/Your business, running on autopilot/i);
      expect(description).toBeInTheDocument();
    });

    it('should render revenue metric', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const revenueMetric = screen.getByText(/\+24%/i);
      expect(revenueMetric).toBeInTheDocument();
    });

    it('should render no-shows metric', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const noShowsMetric = screen.getByText(/-40%/i);
      expect(noShowsMetric).toBeInTheDocument();
    });

    it('should render revenue label', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const label = screen.getByText(/^Revenue$/i);
      expect(label).toBeInTheDocument();
    });

    it('should render no-shows label', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const label = screen.getByText(/^No-Shows$/i);
      expect(label).toBeInTheDocument();
    });

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

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

    it('should render visual content as h3', () => {
      render(<Hero />, { wrapper: createWrapper() });

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

  describe('Floating Badge', () => {
    it('should render floating revenue badge', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const badge = screen.getByText(/Revenue Optimized/i);
      expect(badge).toBeInTheDocument();
    });

    it('should render weekly revenue amount', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const amount = screen.getByText(/\+\$2,400 this week/i);
      expect(amount).toBeInTheDocument();
    });

    it('should have bounce animation', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      // Find element with animate-bounce-slow (custom animation class)
      const badge = container.querySelector('.animate-bounce-slow');
      expect(badge).toBeInTheDocument();
    });

    it('should include CheckCircle2 icon in badge', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      // The badge has an SVG icon, check for its presence in the floating badge area
      const badge = screen.getByText(/Revenue Optimized/i).parentElement?.parentElement;
      const icon = badge?.querySelector('svg');
      expect(icon).toBeInTheDocument();
    });
  });

  describe('Responsive Design', () => {
    it('should use grid layout for content', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

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

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

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

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

      // Text should be centered on mobile, left-aligned on larger screens
      const textContainer = container.querySelector('.text-center.lg\\:text-left');
      expect(textContainer).toBeInTheDocument();
    });

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

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

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

      const buttonContainer = container.querySelector('.flex-col.sm\\:flex-row');
      expect(buttonContainer).toBeInTheDocument();
    });
  });

  describe('Background Elements', () => {
    it('should render decorative background elements', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      // Should have blur effects
      const blurElements = container.querySelectorAll('.blur-3xl');
      expect(blurElements.length).toBeGreaterThan(0);
    });

    it('should have brand-colored background element', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      const brandBg = container.querySelector('.bg-brand-500\\/10');
      expect(brandBg).toBeInTheDocument();
    });

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

      const purpleBg = container.querySelector('.bg-purple-500\\/10');
      expect(purpleBg).toBeInTheDocument();
    });
  });

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

      const h1 = screen.getByRole('heading', { level: 1 });
      const h3 = screen.getByRole('heading', { level: 3 });

      expect(h1).toBeInTheDocument();
      expect(h3).toBeInTheDocument();
    });

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

      const primaryCTA = screen.getByRole('link', { name: /Start Free Trial/i });
      const secondaryCTA = screen.getByRole('link', { name: /Watch Demo/i });

      expect(primaryCTA).toHaveAccessibleName();
      expect(secondaryCTA).toHaveAccessibleName();
    });

    it('should not use ambiguous link text', () => {
      render(<Hero />, { wrapper: createWrapper() });

      // Should not have links with text like "Click here" or "Read more"
      const links = screen.getAllByRole('link');
      links.forEach(link => {
        expect(link.textContent).not.toMatch(/^click here$/i);
        expect(link.textContent).not.toMatch(/^read more$/i);
      });
    });
  });

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

      const badge = screen.getByText(/New: Automation Marketplace/i);
      expect(badge).toBeInTheDocument();
    });

    it('should use translations for main title', () => {
      render(<Hero />, { wrapper: createWrapper() });

      expect(screen.getByText(/The Operating System for/i)).toBeInTheDocument();
      expect(screen.getByText(/Service Businesses/i)).toBeInTheDocument();
    });

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

      const description = screen.getByText(/Orchestrate your entire operation/i);
      expect(description).toBeInTheDocument();
    });

    it('should use translations for CTA buttons', () => {
      render(<Hero />, { wrapper: createWrapper() });

      expect(screen.getByRole('link', { name: /Start Free Trial/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /Watch Demo/i })).toBeInTheDocument();
    });

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

      expect(screen.getByText(/No credit card required/i)).toBeInTheDocument();
      expect(screen.getByText(/14-day free trial/i)).toBeInTheDocument();
      expect(screen.getByText(/Cancel anytime/i)).toBeInTheDocument();
    });

    it('should use translations for visual content', () => {
      render(<Hero />, { wrapper: createWrapper() });

      expect(screen.getByText(/Automated Success/i)).toBeInTheDocument();
      expect(screen.getByText(/Your business, running on autopilot/i)).toBeInTheDocument();
      expect(screen.getByText(/Revenue Optimized/i)).toBeInTheDocument();
    });
  });

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

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

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

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

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

      const description = screen.getByText(/Orchestrate your entire operation/i);
      expect(description).toHaveClass('dark:text-gray-400');
    });
  });

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

      const mainSection = container.querySelector('.pt-16');
      expect(mainSection).toBeInTheDocument();
    });

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

      const section = container.querySelector('.lg\\:pt-24');
      expect(section).toBeInTheDocument();
    });

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

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

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

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

  describe('Integration Tests', () => {
    it('should render all major sections together', () => {
      render(<Hero />, { wrapper: createWrapper() });

      // Text content
      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
      expect(screen.getByText(/Orchestrate your entire operation/i)).toBeInTheDocument();

      // CTAs
      expect(screen.getByRole('link', { name: /Start Free Trial/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /Watch Demo/i })).toBeInTheDocument();

      // Features
      expect(screen.getByText(/No credit card required/i)).toBeInTheDocument();

      // Visual content
      expect(screen.getByText(/Automated Success/i)).toBeInTheDocument();
      expect(screen.getByText(/Revenue Optimized/i)).toBeInTheDocument();
    });

    it('should maintain proper component structure', () => {
      const { container } = render(<Hero />, { wrapper: createWrapper() });

      // Grid layout
      const grid = container.querySelector('.grid');
      expect(grid).toBeInTheDocument();

      // Background elements
      const backgrounds = container.querySelectorAll('.blur-3xl');
      expect(backgrounds.length).toBeGreaterThan(0);

      // Visual content area
      const visualContent = screen.getByText(/Automated Success/i).closest('div');
      expect(visualContent).toBeInTheDocument();
    });

    it('should have complete feature set displayed', () => {
      render(<Hero />, { wrapper: createWrapper() });

      const features = [
        /No credit card required/i,
        /14-day free trial/i,
        /Cancel anytime/i,
      ];

      features.forEach(feature => {
        expect(screen.getByText(feature)).toBeInTheDocument();
      });
    });

    it('should have complete metrics displayed', () => {
      render(<Hero />, { wrapper: createWrapper() });

      expect(screen.getByText(/\+24%/i)).toBeInTheDocument();
      expect(screen.getByText(/-40%/i)).toBeInTheDocument();
      expect(screen.getByText(/\+\$2,400 this week/i)).toBeInTheDocument();
    });
  });
});
