/**
 * Unit tests for Footer component
 *
 * Tests cover:
 * - Component rendering with all sections
 * - Footer navigation links (Product, Company, Legal)
 * - Social media links
 * - Copyright text with dynamic year
 * - Brand logo and name
 * - Link accessibility
 * - Internationalization (i18n)
 */

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 Footer from '../Footer';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations: Record<string, string> = {
        'marketing.nav.features': 'Features',
        'marketing.nav.pricing': 'Pricing',
        'marketing.nav.getStarted': 'Get Started',
        'marketing.nav.about': 'About',
        'marketing.nav.contact': 'Contact',
        'marketing.footer.legal.privacy': 'Privacy Policy',
        'marketing.footer.legal.terms': 'Terms of Service',
        'marketing.footer.product.title': 'Product',
        'marketing.footer.company.title': 'Company',
        'marketing.footer.legal.title': 'Legal',
        'marketing.footer.brandName': 'Smooth Schedule',
        'marketing.description': 'The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.',
        'marketing.footer.copyright': 'Smooth Schedule Inc. All rights reserved.',
      };
      return translations[key] || key;
    },
  }),
}));

// Mock SmoothScheduleLogo component
vi.mock('../../SmoothScheduleLogo', () => ({
  default: ({ className }: { className?: string }) => (
    <svg data-testid="smooth-schedule-logo" className={className}>
      <path d="test" />
    </svg>
  ),
}));

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

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

  describe('Rendering', () => {
    it('should render the footer element', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      expect(footer).toBeInTheDocument();
    });

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

      expect(screen.getByText('Product')).toBeInTheDocument();
      expect(screen.getByText('Company')).toBeInTheDocument();
      expect(screen.getByText('Legal')).toBeInTheDocument();
    });

    it('should apply correct CSS classes for styling', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      expect(footer).toHaveClass('bg-gray-50');
      expect(footer).toHaveClass('dark:bg-gray-900');
      expect(footer).toHaveClass('border-t');
      expect(footer).toHaveClass('border-gray-200');
      expect(footer).toHaveClass('dark:border-gray-800');
    });
  });

  describe('Brand Section', () => {
    it('should render the SmoothSchedule logo', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const logo = screen.getByTestId('smooth-schedule-logo');
      expect(logo).toBeInTheDocument();
    });

    it('should render brand name with translation', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
    });

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

      expect(
        screen.getByText(
          'The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.'
        )
      ).toBeInTheDocument();
    });

    it('should link logo to homepage', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const logoLink = screen.getByRole('link', { name: /smooth schedule/i });
      expect(logoLink).toHaveAttribute('href', '/');
    });
  });

  describe('Product Links', () => {
    it('should render Product section title', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(screen.getByText('Product')).toBeInTheDocument();
    });

    it('should render Features link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const featuresLink = screen.getByRole('link', { name: 'Features' });
      expect(featuresLink).toBeInTheDocument();
      expect(featuresLink).toHaveAttribute('href', '/features');
    });

    it('should render Pricing link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const pricingLink = screen.getByRole('link', { name: 'Pricing' });
      expect(pricingLink).toBeInTheDocument();
      expect(pricingLink).toHaveAttribute('href', '/pricing');
    });

    it('should render Get Started link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const getStartedLink = screen.getByRole('link', { name: 'Get Started' });
      expect(getStartedLink).toBeInTheDocument();
      expect(getStartedLink).toHaveAttribute('href', '/signup');
    });

    it('should apply correct styling to product links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const featuresLink = screen.getByRole('link', { name: 'Features' });
      expect(featuresLink).toHaveClass('text-sm');
      expect(featuresLink).toHaveClass('text-gray-600');
      expect(featuresLink).toHaveClass('dark:text-gray-400');
      expect(featuresLink).toHaveClass('hover:text-brand-600');
      expect(featuresLink).toHaveClass('dark:hover:text-brand-400');
      expect(featuresLink).toHaveClass('transition-colors');
    });
  });

  describe('Company Links', () => {
    it('should render Company section title', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(screen.getByText('Company')).toBeInTheDocument();
    });

    it('should render About link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const aboutLink = screen.getByRole('link', { name: 'About' });
      expect(aboutLink).toBeInTheDocument();
      expect(aboutLink).toHaveAttribute('href', '/about');
    });

    it('should render Contact link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const contactLink = screen.getByRole('link', { name: 'Contact' });
      expect(contactLink).toBeInTheDocument();
      expect(contactLink).toHaveAttribute('href', '/contact');
    });

    it('should apply correct styling to company links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const aboutLink = screen.getByRole('link', { name: 'About' });
      expect(aboutLink).toHaveClass('text-sm');
      expect(aboutLink).toHaveClass('text-gray-600');
      expect(aboutLink).toHaveClass('dark:text-gray-400');
      expect(aboutLink).toHaveClass('hover:text-brand-600');
      expect(aboutLink).toHaveClass('dark:hover:text-brand-400');
      expect(aboutLink).toHaveClass('transition-colors');
    });
  });

  describe('Legal Links', () => {
    it('should render Legal section title', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(screen.getByText('Legal')).toBeInTheDocument();
    });

    it('should render Privacy Policy link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
      expect(privacyLink).toBeInTheDocument();
      expect(privacyLink).toHaveAttribute('href', '/privacy');
    });

    it('should render Terms of Service link', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const termsLink = screen.getByRole('link', { name: 'Terms of Service' });
      expect(termsLink).toBeInTheDocument();
      expect(termsLink).toHaveAttribute('href', '/terms');
    });

    it('should apply correct styling to legal links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
      expect(privacyLink).toHaveClass('text-sm');
      expect(privacyLink).toHaveClass('text-gray-600');
      expect(privacyLink).toHaveClass('dark:text-gray-400');
      expect(privacyLink).toHaveClass('hover:text-brand-600');
      expect(privacyLink).toHaveClass('dark:hover:text-brand-400');
      expect(privacyLink).toHaveClass('transition-colors');
    });
  });

  describe('Social Media Links', () => {
    it('should render all social media links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(screen.getByLabelText('Twitter')).toBeInTheDocument();
      expect(screen.getByLabelText('LinkedIn')).toBeInTheDocument();
      expect(screen.getByLabelText('GitHub')).toBeInTheDocument();
      expect(screen.getByLabelText('YouTube')).toBeInTheDocument();
    });

    it('should render Twitter link with correct href', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const twitterLink = screen.getByLabelText('Twitter');
      expect(twitterLink).toHaveAttribute('href', 'https://twitter.com/smoothschedule');
      expect(twitterLink).toHaveAttribute('target', '_blank');
      expect(twitterLink).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('should render LinkedIn link with correct href', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const linkedinLink = screen.getByLabelText('LinkedIn');
      expect(linkedinLink).toHaveAttribute('href', 'https://linkedin.com/company/smoothschedule');
      expect(linkedinLink).toHaveAttribute('target', '_blank');
      expect(linkedinLink).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('should render GitHub link with correct href', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const githubLink = screen.getByLabelText('GitHub');
      expect(githubLink).toHaveAttribute('href', 'https://github.com/smoothschedule');
      expect(githubLink).toHaveAttribute('target', '_blank');
      expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('should render YouTube link with correct href', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const youtubeLink = screen.getByLabelText('YouTube');
      expect(youtubeLink).toHaveAttribute('href', 'https://youtube.com/@smoothschedule');
      expect(youtubeLink).toHaveAttribute('target', '_blank');
      expect(youtubeLink).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('should apply correct styling to social links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const twitterLink = screen.getByLabelText('Twitter');
      expect(twitterLink).toHaveClass('p-2');
      expect(twitterLink).toHaveClass('rounded-lg');
      expect(twitterLink).toHaveClass('text-gray-500');
      expect(twitterLink).toHaveClass('hover:text-brand-600');
      expect(twitterLink).toHaveClass('dark:text-gray-400');
      expect(twitterLink).toHaveClass('dark:hover:text-brand-400');
      expect(twitterLink).toHaveClass('hover:bg-gray-100');
      expect(twitterLink).toHaveClass('dark:hover:bg-gray-800');
      expect(twitterLink).toHaveClass('transition-colors');
    });

    it('should render social media icons as SVGs', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const twitterLink = screen.getByLabelText('Twitter');
      const icon = twitterLink.querySelector('svg');
      expect(icon).toBeInTheDocument();
      expect(icon).toHaveClass('h-5', 'w-5');
    });
  });

  describe('Copyright Section', () => {
    it('should render copyright text', () => {
      render(<Footer />, { wrapper: createWrapper() });

      expect(
        screen.getByText(/Smooth Schedule Inc. All rights reserved./i)
      ).toBeInTheDocument();
    });

    it('should display current year in copyright', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const currentYear = new Date().getFullYear();
      expect(screen.getByText(new RegExp(currentYear.toString()))).toBeInTheDocument();
    });

    it('should apply correct styling to copyright text', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const copyrightElement = screen.getByText(
        /Smooth Schedule Inc. All rights reserved./i
      );
      expect(copyrightElement).toHaveClass('text-sm');
      expect(copyrightElement).toHaveClass('text-center');
      expect(copyrightElement).toHaveClass('text-gray-500');
      expect(copyrightElement).toHaveClass('dark:text-gray-400');
    });

    it('should have proper spacing from content', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const copyrightElement = screen.getByText(
        /Smooth Schedule Inc. All rights reserved./i
      );
      const parent = copyrightElement.parentElement;
      expect(parent).toHaveClass('mt-12');
      expect(parent).toHaveClass('pt-8');
      expect(parent).toHaveClass('border-t');
      expect(parent).toHaveClass('border-gray-200');
      expect(parent).toHaveClass('dark:border-gray-800');
    });
  });

  describe('Section Titles', () => {
    it('should style section titles consistently', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const productTitle = screen.getByText('Product');
      expect(productTitle).toHaveClass('text-sm');
      expect(productTitle).toHaveClass('font-semibold');
      expect(productTitle).toHaveClass('text-gray-900');
      expect(productTitle).toHaveClass('dark:text-white');
      expect(productTitle).toHaveClass('uppercase');
      expect(productTitle).toHaveClass('tracking-wider');
      expect(productTitle).toHaveClass('mb-4');
    });

    it('should render all section titles with h3 tags', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const titles = ['Product', 'Company', 'Legal'];
      titles.forEach((title) => {
        const element = screen.getByText(title);
        expect(element.tagName).toBe('H3');
      });
    });
  });

  describe('Accessibility', () => {
    it('should use semantic footer element', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      expect(footer.tagName).toBe('FOOTER');
    });

    it('should have aria-label on social links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const socialLabels = ['Twitter', 'LinkedIn', 'GitHub', 'YouTube'];
      socialLabels.forEach((label) => {
        const link = screen.getByLabelText(label);
        expect(link).toHaveAttribute('aria-label', label);
      });
    });

    it('should have proper heading hierarchy', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const headings = screen.getAllByRole('heading', { level: 3 });
      expect(headings).toHaveLength(3);
      expect(headings[0]).toHaveTextContent('Product');
      expect(headings[1]).toHaveTextContent('Company');
      expect(headings[2]).toHaveTextContent('Legal');
    });

    it('should have list structure for links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const lists = screen.getAllByRole('list');
      expect(lists.length).toBeGreaterThanOrEqual(3);
    });

    it('should have keyboard-accessible links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const links = screen.getAllByRole('link');
      links.forEach((link) => {
        expect(link).toBeInTheDocument();
        expect(link.tagName).toBe('A');
      });
    });
  });

  describe('Layout and Structure', () => {
    it('should use grid layout for sections', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      const gridContainer = footer.querySelector('.grid');
      expect(gridContainer).toBeInTheDocument();
    });

    it('should have responsive grid classes', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      const gridContainer = footer.querySelector('.grid');
      expect(gridContainer).toHaveClass('grid-cols-2');
      expect(gridContainer).toHaveClass('md:grid-cols-4');
      expect(gridContainer).toHaveClass('gap-8');
      expect(gridContainer).toHaveClass('lg:gap-12');
    });

    it('should have proper padding on container', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const footer = screen.getByRole('contentinfo');
      const container = footer.querySelector('.max-w-7xl');
      expect(container).toHaveClass('max-w-7xl');
      expect(container).toHaveClass('mx-auto');
      expect(container).toHaveClass('px-4');
      expect(container).toHaveClass('sm:px-6');
      expect(container).toHaveClass('lg:px-8');
      expect(container).toHaveClass('py-12');
      expect(container).toHaveClass('lg:py-16');
    });
  });

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

      // Product links
      expect(screen.getByText('Features')).toBeInTheDocument();
      expect(screen.getByText('Pricing')).toBeInTheDocument();
      expect(screen.getByText('Get Started')).toBeInTheDocument();

      // Company links
      expect(screen.getByText('About')).toBeInTheDocument();
      expect(screen.getByText('Contact')).toBeInTheDocument();

      // Legal links
      expect(screen.getByText('Privacy Policy')).toBeInTheDocument();
      expect(screen.getByText('Terms of Service')).toBeInTheDocument();

      // Section titles
      expect(screen.getByText('Product')).toBeInTheDocument();
      expect(screen.getByText('Company')).toBeInTheDocument();
      expect(screen.getByText('Legal')).toBeInTheDocument();

      // Brand and copyright
      expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
      expect(
        screen.getByText(/Smooth Schedule Inc\. All rights reserved\./i)
      ).toBeInTheDocument();
    });
  });

  describe('Integration', () => {
    it('should render complete footer with all sections', () => {
      render(<Footer />, { wrapper: createWrapper() });

      // Brand section
      expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
      expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();

      // Navigation sections
      expect(screen.getByText('Product')).toBeInTheDocument();
      expect(screen.getByText('Company')).toBeInTheDocument();
      expect(screen.getByText('Legal')).toBeInTheDocument();

      // Social links
      expect(screen.getByLabelText('Twitter')).toBeInTheDocument();
      expect(screen.getByLabelText('LinkedIn')).toBeInTheDocument();
      expect(screen.getByLabelText('GitHub')).toBeInTheDocument();
      expect(screen.getByLabelText('YouTube')).toBeInTheDocument();

      // Copyright
      const currentYear = new Date().getFullYear();
      expect(screen.getByText(new RegExp(currentYear.toString()))).toBeInTheDocument();
      expect(
        screen.getByText(/Smooth Schedule Inc\. All rights reserved\./i)
      ).toBeInTheDocument();
    });

    it('should have correct number of navigation links', () => {
      render(<Footer />, { wrapper: createWrapper() });

      const allLinks = screen.getAllByRole('link');
      // 1 logo link + 3 product + 2 company + 2 legal + 4 social = 12 total
      expect(allLinks).toHaveLength(12);
    });

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

      // Check that sections are in correct order
      const footer = screen.getByRole('contentinfo');
      const text = footer.textContent || '';

      // Brand should come before sections
      const brandIndex = text.indexOf('Smooth Schedule');
      const productIndex = text.indexOf('Product');
      const companyIndex = text.indexOf('Company');
      const legalIndex = text.indexOf('Legal');

      expect(brandIndex).toBeLessThan(productIndex);
      expect(productIndex).toBeLessThan(companyIndex);
      expect(companyIndex).toBeLessThan(legalIndex);
    });
  });
});
