/**
 * Unit tests for TermsOfServicePage component
 *
 * Tests the Terms of Service page including:
 * - Header rendering with title and last updated date
 * - All 16 sections are present with correct headings
 * - Section content rendering
 * - List items in sections with requirements/prohibitions/terms
 * - Contact information rendering
 * - Translation keys usage
 * - Semantic HTML structure
 * - Styling and CSS classes
 */

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

// Mock react-i18next - return translation keys for simpler testing
// This follows the pattern used in other test files
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: {
      language: 'en',
      changeLanguage: vi.fn(),
    },
  }),
}));

// Helper to render
const renderWithI18n = (component: React.ReactElement) => {
  return render(component);
};

describe('TermsOfServicePage', () => {
  describe('Header Section', () => {
    it('should render the main title', () => {
      renderWithI18n(<TermsOfServicePage />);

      // With mocked t() returning keys, check for the key pattern
      const title = screen.getByRole('heading', { level: 1, name: /termsOfService\.title/i });
      expect(title).toBeInTheDocument();
    });

    it('should display the last updated date', () => {
      renderWithI18n(<TermsOfServicePage />);

      // The translation key contains lastUpdated
      expect(screen.getByText(/lastUpdated/i)).toBeInTheDocument();
    });

    it('should apply correct header styling', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const headerSection = container.querySelector('.py-20');
      expect(headerSection).toBeInTheDocument();
      expect(headerSection).toHaveClass('lg:py-28');
      expect(headerSection).toHaveClass('bg-gradient-to-br');
    });

    it('should use semantic heading hierarchy', () => {
      renderWithI18n(<TermsOfServicePage />);

      const h1 = screen.getByRole('heading', { level: 1 });
      // With mocked t() returning keys, check for the key
      expect(h1.textContent).toContain('termsOfService.title');
    });
  });

  describe('Content Sections - All 16 Sections Present', () => {
    it('should render section 1: Acceptance of Terms', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Check for translation key pattern
      const heading = screen.getByRole('heading', { name: /acceptanceOfTerms\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/acceptanceOfTerms\.content/i)).toBeInTheDocument();
    });

    it('should render section 2: Description of Service', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /descriptionOfService\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/descriptionOfService\.content/i)).toBeInTheDocument();
    });

    it('should render section 3: User Accounts', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /userAccounts\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/userAccounts\.intro/i)).toBeInTheDocument();
    });

    it('should render section 4: Acceptable Use', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /acceptableUse\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/acceptableUse\.intro/i)).toBeInTheDocument();
    });

    it('should render section 5: Subscriptions and Payments', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /subscriptionsAndPayments\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/subscriptionsAndPayments\.intro/i)).toBeInTheDocument();
    });

    it('should render section 6: Trial Period', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /trialPeriod\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/trialPeriod\.content/i)).toBeInTheDocument();
    });

    it('should render section 7: Data and Privacy', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /dataAndPrivacy\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/dataAndPrivacy\.content/i)).toBeInTheDocument();
    });

    it('should render section 8: Service Availability', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /serviceAvailability\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/serviceAvailability\.content/i)).toBeInTheDocument();
    });

    it('should render section 9: Intellectual Property', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /intellectualProperty\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/intellectualProperty\.content/i)).toBeInTheDocument();
    });

    it('should render section 10: Termination', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /termination\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/termination\.content/i)).toBeInTheDocument();
    });

    it('should render section 11: Limitation of Liability', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /limitationOfLiability\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/limitationOfLiability\.content/i)).toBeInTheDocument();
    });

    it('should render section 12: Warranty Disclaimer', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /warrantyDisclaimer\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/warrantyDisclaimer\.content/i)).toBeInTheDocument();
    });

    it('should render section 13: Indemnification', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /indemnification\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/indemnification\.content/i)).toBeInTheDocument();
    });

    it('should render section 14: Changes to Terms', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /changesToTerms\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/changesToTerms\.content/i)).toBeInTheDocument();
    });

    it('should render section 15: Governing Law', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /governingLaw\.title/i });
      expect(heading).toBeInTheDocument();
      expect(screen.getByText(/governingLaw\.content/i)).toBeInTheDocument();
    });

    it('should render section 16: Contact Us', () => {
      renderWithI18n(<TermsOfServicePage />);

      const heading = screen.getByRole('heading', { name: /contactUs\.title/i });
      expect(heading).toBeInTheDocument();
      // Actual key is contactUs.intro
      expect(screen.getByText(/contactUs\.intro/i)).toBeInTheDocument();
    });
  });

  describe('Section Content - User Accounts Requirements', () => {
    it('should render all four user account requirements', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Check for translation keys for the four requirements
      expect(screen.getByText(/userAccounts\.requirements\.accurate/i)).toBeInTheDocument();
      expect(screen.getByText(/userAccounts\.requirements\.security/i)).toBeInTheDocument();
      expect(screen.getByText(/userAccounts\.requirements\.notify/i)).toBeInTheDocument();
      expect(screen.getByText(/userAccounts\.requirements\.responsible/i)).toBeInTheDocument();
    });

    it('should render user accounts section with a list', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      // First list should be user accounts requirements
      expect(lists.length).toBeGreaterThanOrEqual(1);
      expect(lists[0]?.querySelectorAll('li')).toHaveLength(4);
    });
  });

  describe('Section Content - Acceptable Use Prohibitions', () => {
    it('should render all five acceptable use prohibitions', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Check for translation keys for the five prohibitions
      expect(screen.getByText(/acceptableUse\.prohibitions\.laws/i)).toBeInTheDocument();
      expect(screen.getByText(/acceptableUse\.prohibitions\.ip/i)).toBeInTheDocument();
      expect(screen.getByText(/acceptableUse\.prohibitions\.malicious/i)).toBeInTheDocument();
      expect(screen.getByText(/acceptableUse\.prohibitions\.unauthorized/i)).toBeInTheDocument();
      expect(screen.getByText(/acceptableUse\.prohibitions\.fraudulent/i)).toBeInTheDocument();
    });

    it('should render acceptable use section with a list', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      // Second list should be acceptable use prohibitions
      expect(lists.length).toBeGreaterThanOrEqual(2);
      expect(lists[1]?.querySelectorAll('li')).toHaveLength(5);
    });
  });

  describe('Section Content - Subscriptions and Payments Terms', () => {
    it('should render all five subscription payment terms', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Check for translation keys for the five terms
      expect(screen.getByText(/subscriptionsAndPayments\.terms\.billing/i)).toBeInTheDocument();
      expect(screen.getByText(/subscriptionsAndPayments\.terms\.cancel/i)).toBeInTheDocument();
      expect(screen.getByText(/subscriptionsAndPayments\.terms\.refunds/i)).toBeInTheDocument();
      expect(screen.getByText(/subscriptionsAndPayments\.terms\.pricing/i)).toBeInTheDocument();
      expect(screen.getByText(/subscriptionsAndPayments\.terms\.failed/i)).toBeInTheDocument();
    });

    it('should render subscriptions and payments section with a list', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      // Third list should be subscription terms
      expect(lists.length).toBeGreaterThanOrEqual(3);
      expect(lists[2]?.querySelectorAll('li')).toHaveLength(5);
    });
  });

  describe('Contact Information Section', () => {
    it('should render contact email label and address', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Check for translation keys - actual keys are contactUs.email and contactUs.emailAddress
      expect(screen.getByText(/contactUs\.email(?!Address)/i)).toBeInTheDocument();
      expect(screen.getByText(/contactUs\.emailAddress/i)).toBeInTheDocument();
    });

    it('should render contact website label and URL', () => {
      renderWithI18n(<TermsOfServicePage />);

      // Actual keys are contactUs.website and contactUs.websiteUrl
      expect(screen.getByText(/contactUs\.website(?!Url)/i)).toBeInTheDocument();
      expect(screen.getByText(/contactUs\.websiteUrl/i)).toBeInTheDocument();
    });

    it('should display contact information with bold labels', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const strongElements = container.querySelectorAll('strong');
      // Should have at least 2 strong elements for Email: and Website:
      expect(strongElements.length).toBeGreaterThanOrEqual(2);
    });
  });

  describe('Semantic HTML Structure', () => {
    it('should use h1 for main title', () => {
      renderWithI18n(<TermsOfServicePage />);

      const h1Elements = screen.getAllByRole('heading', { level: 1 });
      expect(h1Elements).toHaveLength(1);
      // With mocked t() returning keys
      expect(h1Elements[0].textContent).toContain('termsOfService.title');
    });

    it('should use h2 for all section headings', () => {
      renderWithI18n(<TermsOfServicePage />);

      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      // Should have 16 section headings
      expect(h2Elements.length).toBeGreaterThanOrEqual(16);
    });

    it('should use proper list elements for requirements and prohibitions', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const ulElements = container.querySelectorAll('ul');
      // Should have 3 lists: user accounts, acceptable use, subscriptions
      expect(ulElements.length).toBe(3);

      ulElements.forEach(ul => {
        expect(ul).toHaveClass('list-disc');
      });
    });

    it('should use section elements for major content areas', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const sections = container.querySelectorAll('section');
      // Should have at least header and content sections
      expect(sections.length).toBeGreaterThanOrEqual(2);
    });

    it('should use paragraph elements for content text', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const paragraphs = container.querySelectorAll('p');
      // Should have many paragraphs for all the content
      expect(paragraphs.length).toBeGreaterThan(15);
    });
  });

  describe('Styling and CSS Classes', () => {
    it('should apply gradient background to header section', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const headerSection = container.querySelector('section');
      expect(headerSection).toHaveClass('bg-gradient-to-br');
      expect(headerSection).toHaveClass('from-white');
      expect(headerSection).toHaveClass('via-brand-50/30');
    });

    it('should apply dark mode classes to header section', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const headerSection = container.querySelector('section');
      expect(headerSection).toHaveClass('dark:from-gray-900');
      expect(headerSection).toHaveClass('dark:via-gray-800');
      expect(headerSection).toHaveClass('dark:to-gray-900');
    });

    it('should apply content section background colors', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const sections = container.querySelectorAll('section');
      const contentSection = sections[1]; // Second section is content

      expect(contentSection).toHaveClass('bg-white');
      expect(contentSection).toHaveClass('dark:bg-gray-900');
    });

    it('should apply prose classes to content container', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const proseContainer = container.querySelector('.prose');
      expect(proseContainer).toBeInTheDocument();
      expect(proseContainer).toHaveClass('prose-lg');
      expect(proseContainer).toHaveClass('dark:prose-invert');
      expect(proseContainer).toHaveClass('max-w-none');
    });

    it('should apply heading styling classes', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const h2Elements = container.querySelectorAll('h2');
      h2Elements.forEach(heading => {
        expect(heading).toHaveClass('text-2xl');
        expect(heading).toHaveClass('font-bold');
        expect(heading).toHaveClass('text-gray-900');
        expect(heading).toHaveClass('dark:text-white');
      });
    });

    it('should apply paragraph text color classes', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const paragraphs = container.querySelectorAll('.text-gray-600');
      expect(paragraphs.length).toBeGreaterThan(0);

      paragraphs.forEach(p => {
        expect(p).toHaveClass('dark:text-gray-400');
      });
    });

    it('should apply list styling classes', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      lists.forEach(ul => {
        expect(ul).toHaveClass('list-disc');
        expect(ul).toHaveClass('pl-6');
        expect(ul).toHaveClass('text-gray-600');
        expect(ul).toHaveClass('dark:text-gray-400');
      });
    });

    it('should apply spacing classes to sections', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const h2Elements = container.querySelectorAll('h2');
      h2Elements.forEach(heading => {
        expect(heading).toHaveClass('mt-8');
        expect(heading).toHaveClass('mb-4');
      });
    });
  });

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

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

    it('should include dark mode classes for subtitle/date', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lastUpdated = container.querySelector('.text-xl');
      expect(lastUpdated).toHaveClass('dark:text-gray-400');
    });

    it('should include dark mode classes for section headings', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const headings = container.querySelectorAll('h2');
      headings.forEach(heading => {
        expect(heading).toHaveClass('dark:text-white');
      });
    });

    it('should include dark mode classes for content text', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const contentParagraphs = container.querySelectorAll('.text-gray-600');
      contentParagraphs.forEach(p => {
        expect(p).toHaveClass('dark:text-gray-400');
      });
    });

    it('should include dark mode classes for lists', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      lists.forEach(ul => {
        expect(ul).toHaveClass('dark:text-gray-400');
      });
    });
  });

  describe('Responsive Design', () => {
    it('should apply responsive padding to header section', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

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

    it('should apply responsive title sizing', () => {
      renderWithI18n(<TermsOfServicePage />);

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

    it('should apply responsive max-width constraints', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const maxWidthContainers = container.querySelectorAll('.max-w-4xl');
      expect(maxWidthContainers.length).toBeGreaterThanOrEqual(2);
    });

    it('should apply responsive padding to containers', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const paddedContainers = container.querySelectorAll('.px-4');
      expect(paddedContainers.length).toBeGreaterThan(0);

      paddedContainers.forEach(div => {
        expect(div).toHaveClass('sm:px-6');
        expect(div).toHaveClass('lg:px-8');
      });
    });
  });

  describe('Content Completeness', () => {
    it('should render all sections in correct order', () => {
      renderWithI18n(<TermsOfServicePage />);

      const headings = screen.getAllByRole('heading', { level: 2 });

      // Verify the order by checking for section key patterns
      expect(headings[0].textContent).toMatch(/acceptanceOfTerms/i);
      expect(headings[1].textContent).toMatch(/descriptionOfService/i);
      expect(headings[2].textContent).toMatch(/userAccounts/i);
      expect(headings[3].textContent).toMatch(/acceptableUse/i);
      expect(headings[4].textContent).toMatch(/subscriptionsAndPayments/i);
    });

    it('should have substantial content in each section', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      // Check that there are multiple paragraphs
      const paragraphs = container.querySelectorAll('p');
      // With translation keys, paragraphs won't be as long but there should be many
      expect(paragraphs.length).toBeGreaterThan(10);
    });

    it('should render page without errors', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

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

  describe('Accessibility', () => {
    it('should have proper heading hierarchy', () => {
      renderWithI18n(<TermsOfServicePage />);

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

      // Should have multiple h2 elements for sections
      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      expect(h2Elements.length).toBeGreaterThanOrEqual(16);
    });

    it('should maintain readable text contrast in light mode', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const title = container.querySelector('h1');
      expect(title).toHaveClass('text-gray-900');

      const paragraphs = container.querySelectorAll('p.text-gray-600');
      expect(paragraphs.length).toBeGreaterThan(0);
    });

    it('should use semantic list markup', () => {
      const { container } = renderWithI18n(<TermsOfServicePage />);

      const lists = container.querySelectorAll('ul');
      lists.forEach(ul => {
        const listItems = ul.querySelectorAll('li');
        expect(listItems.length).toBeGreaterThan(0);
      });
    });

    it('should not have any empty headings', () => {
      renderWithI18n(<TermsOfServicePage />);

      const allHeadings = screen.getAllByRole('heading');
      allHeadings.forEach(heading => {
        expect(heading.textContent).toBeTruthy();
        expect(heading.textContent?.trim().length).toBeGreaterThan(0);
      });
    });
  });

  describe('Translation Integration', () => {
    it('should use translation keys for all content', () => {
      // This is verified by the fact that content renders correctly through i18n
      renderWithI18n(<TermsOfServicePage />);

      // Main title should use translation key
      expect(screen.getByRole('heading', { name: /termsOfService\.title/i })).toBeInTheDocument();

      // All 16 sections should be present (implies translations are working)
      const h2Elements = screen.getAllByRole('heading', { level: 2 });
      expect(h2Elements.length).toBeGreaterThanOrEqual(16);
    });

    it('should render without i18n errors', () => {
      // Should not throw when rendering with i18n
      expect(() => renderWithI18n(<TermsOfServicePage />)).not.toThrow();
    });
  });
});
