/**
 * Unit tests for PricingTable component
 *
 * Tests cover:
 * - Component rendering
 * - All pricing tiers display
 * - Feature lists (included and not included)
 * - Column headers and tier information
 * - Popular badge display
 * - CTA buttons and links
 * - Accessibility attributes
 * - Internationalization (i18n)
 * - Responsive grid layout
 */

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

// Mock translation data matching the actual en.json structure
const mockTranslations: Record<string, string> = {
  'marketing.pricing.tiers.starter.name': 'Starter',
  'marketing.pricing.tiers.starter.description': 'Perfect for solo practitioners and small studios.',
  'marketing.pricing.tiers.starter.cta': 'Start Free',
  'marketing.pricing.tiers.starter.features.0': '1 User',
  'marketing.pricing.tiers.starter.features.1': 'Unlimited Appointments',
  'marketing.pricing.tiers.starter.features.2': '1 Active Automation',
  'marketing.pricing.tiers.starter.features.3': 'Basic Reporting',
  'marketing.pricing.tiers.starter.features.4': 'Email Support',
  'marketing.pricing.tiers.starter.notIncluded.0': 'Custom Domain',
  'marketing.pricing.tiers.starter.notIncluded.1': 'Python Scripting',
  'marketing.pricing.tiers.starter.notIncluded.2': 'White-Labeling',
  'marketing.pricing.tiers.starter.notIncluded.3': 'Priority Support',
  'marketing.pricing.tiers.pro.name': 'Pro',
  'marketing.pricing.tiers.pro.description': 'For growing businesses that need automation.',
  'marketing.pricing.tiers.pro.cta': 'Start Trial',
  'marketing.pricing.tiers.pro.features.0': '5 Users',
  'marketing.pricing.tiers.pro.features.1': 'Unlimited Appointments',
  'marketing.pricing.tiers.pro.features.2': '5 Active Automations',
  'marketing.pricing.tiers.pro.features.3': 'Advanced Reporting',
  'marketing.pricing.tiers.pro.features.4': 'Priority Email Support',
  'marketing.pricing.tiers.pro.features.5': 'SMS Reminders',
  'marketing.pricing.tiers.pro.notIncluded.0': 'Custom Domain',
  'marketing.pricing.tiers.pro.notIncluded.1': 'Python Scripting',
  'marketing.pricing.tiers.pro.notIncluded.2': 'White-Labeling',
  'marketing.pricing.tiers.business.name': 'Business',
  'marketing.pricing.tiers.business.description': 'Full power of the platform for serious operations.',
  'marketing.pricing.tiers.business.cta': 'Contact Sales',
  'marketing.pricing.tiers.business.features.0': 'Unlimited Users',
  'marketing.pricing.tiers.business.features.1': 'Unlimited Appointments',
  'marketing.pricing.tiers.business.features.2': 'Unlimited Automations',
  'marketing.pricing.tiers.business.features.3': 'Custom Python Scripts',
  'marketing.pricing.tiers.business.features.4': 'Custom Domain (White-Label)',
  'marketing.pricing.tiers.business.features.5': 'Dedicated Support',
  'marketing.pricing.tiers.business.features.6': 'API Access',
  'marketing.pricing.perMonth': '/month',
  'marketing.pricing.mostPopular': 'Most Popular',
  'marketing.pricing.contactSales': 'Contact Sales',
};

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => mockTranslations[key] || key,
  }),
}));

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

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

  describe('Rendering', () => {
    it('should render the pricing table', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

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

    it('should render with grid layout classes', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const grid = container.querySelector('.grid.md\\:grid-cols-3');
      expect(grid).toBeInTheDocument();
    });

    it('should render with responsive spacing classes', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

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

  describe('Pricing Tiers', () => {
    it('should render all three pricing tiers', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('Starter')).toBeInTheDocument();
      expect(screen.getByText('Pro')).toBeInTheDocument();
      expect(screen.getByText('Business')).toBeInTheDocument();
    });

    it('should render tier names as headings', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const starterHeading = screen.getByRole('heading', { name: 'Starter' });
      const proHeading = screen.getByRole('heading', { name: 'Pro' });
      const businessHeading = screen.getByRole('heading', { name: 'Business' });

      expect(starterHeading).toBeInTheDocument();
      expect(proHeading).toBeInTheDocument();
      expect(businessHeading).toBeInTheDocument();
    });

    it('should render correct tier descriptions', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('Perfect for solo practitioners and small studios.')).toBeInTheDocument();
      expect(screen.getByText('For growing businesses that need automation.')).toBeInTheDocument();
      expect(screen.getByText('Full power of the platform for serious operations.')).toBeInTheDocument();
    });

    it('should render correct prices', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('$0')).toBeInTheDocument();
      expect(screen.getByText('$29')).toBeInTheDocument();
      expect(screen.getByText('$99')).toBeInTheDocument();
    });

    it('should render price periods', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const periods = screen.getAllByText('/month');
      expect(periods).toHaveLength(3);
    });
  });

  describe('Popular Badge', () => {
    it('should show "Most Popular" badge on Pro tier', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const badge = screen.getByText('Most Popular');
      expect(badge).toBeInTheDocument();
    });

    it('should only show one popular badge', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const badges = screen.getAllByText('Most Popular');
      expect(badges).toHaveLength(1);
    });

    it('should style the popular tier differently', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const popularCard = container.querySelector('.border-brand-500.scale-105');
      expect(popularCard).toBeInTheDocument();
    });
  });

  describe('Feature Lists - Included Features', () => {
    it('should render Starter tier features', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('1 User')).toBeInTheDocument();
      // "Unlimited Appointments" appears in all tiers, so use getAllByText
      expect(screen.getAllByText('Unlimited Appointments')[0]).toBeInTheDocument();
      expect(screen.getByText('1 Active Automation')).toBeInTheDocument();
      expect(screen.getByText('Basic Reporting')).toBeInTheDocument();
      expect(screen.getByText('Email Support')).toBeInTheDocument();
    });

    it('should render Pro tier features', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('5 Users')).toBeInTheDocument();
      expect(screen.getByText('5 Active Automations')).toBeInTheDocument();
      expect(screen.getByText('Advanced Reporting')).toBeInTheDocument();
      expect(screen.getByText('Priority Email Support')).toBeInTheDocument();
      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
    });

    it('should render Business tier features', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('Unlimited Users')).toBeInTheDocument();
      expect(screen.getByText('Unlimited Automations')).toBeInTheDocument();
      expect(screen.getByText('Custom Python Scripts')).toBeInTheDocument();
      expect(screen.getByText('Custom Domain (White-Label)')).toBeInTheDocument();
      expect(screen.getByText('Dedicated Support')).toBeInTheDocument();
      expect(screen.getByText('API Access')).toBeInTheDocument();
    });

    it('should render features with check icons', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      // Check icons are rendered as SVGs with lucide-react
      const checkIcons = container.querySelectorAll('svg');
      expect(checkIcons.length).toBeGreaterThan(0);
    });
  });

  describe('Feature Lists - Not Included Features', () => {
    it('should render Starter tier excluded features', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      // These features appear in multiple tiers, so use getAllByText
      expect(screen.getAllByText('Custom Domain').length).toBeGreaterThanOrEqual(1);
      expect(screen.getAllByText('Python Scripting').length).toBeGreaterThanOrEqual(1);
      expect(screen.getAllByText('White-Labeling').length).toBeGreaterThanOrEqual(1);
      expect(screen.getByText('Priority Support')).toBeInTheDocument();
    });

    it('should render Pro tier excluded features', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      // Pro tier has these excluded
      const customDomains = screen.getAllByText('Custom Domain');
      expect(customDomains.length).toBeGreaterThanOrEqual(1);

      const pythonScripting = screen.getAllByText('Python Scripting');
      expect(pythonScripting.length).toBeGreaterThanOrEqual(1);

      const whiteLabeling = screen.getAllByText('White-Labeling');
      expect(whiteLabeling.length).toBeGreaterThanOrEqual(1);
    });

    it('should not render excluded features for Business tier', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      // Business tier has empty notIncluded array
      // All features should be included (no X icons in that column)
      // We can't easily test the absence without more context
      // But we verify the business tier is rendered
      expect(screen.getByText('Business')).toBeInTheDocument();

      // Count the number of X icons - should be less than total excluded features
      const allListItems = container.querySelectorAll('li');
      expect(allListItems.length).toBeGreaterThan(0);
    });

    it('should style excluded features differently', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const excludedItems = container.querySelectorAll('li.opacity-50');
      expect(excludedItems.length).toBeGreaterThan(0);
    });
  });

  describe('CTA Buttons', () => {
    it('should render CTA button for each tier', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
      const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });
      const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });

      expect(startFreeBtn).toBeInTheDocument();
      expect(startTrialBtn).toBeInTheDocument();
      expect(contactSalesBtn).toBeInTheDocument();
    });

    it('should have correct links for each tier', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
      const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });
      const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });

      expect(startFreeBtn).toHaveAttribute('href', '/signup');
      expect(startTrialBtn).toHaveAttribute('href', '/signup?plan=pro');
      expect(contactSalesBtn).toHaveAttribute('href', '/contact');
    });

    it('should style popular tier CTA button differently', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });

      expect(startTrialBtn).toHaveClass('bg-brand-600');
      expect(startTrialBtn).toHaveClass('text-white');
      expect(startTrialBtn).toHaveClass('hover:bg-brand-700');
    });

    it('should style non-popular tier CTA buttons consistently', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
      const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });

      [startFreeBtn, contactSalesBtn].forEach(btn => {
        expect(btn).toHaveClass('bg-gray-100');
        expect(btn).toHaveClass('dark:bg-gray-700');
      });
    });
  });

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

      const headings = screen.getAllByRole('heading');
      expect(headings).toHaveLength(3); // One for each tier
    });

    it('should use semantic list elements for features', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const lists = container.querySelectorAll('ul');
      expect(lists.length).toBeGreaterThan(0);
    });

    it('should have accessible link elements for CTAs', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      const links = screen.getAllByRole('link');
      expect(links).toHaveLength(3); // One CTA per tier
    });

    it('should maintain proper color contrast', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const tierCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800');
      expect(tierCards.length).toBeGreaterThan(0);
    });
  });

  describe('Styling and Layout', () => {
    it('should apply card styling to tier containers', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

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

    it('should apply padding to tier cards', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const cards = container.querySelectorAll('.p-8');
      expect(cards).toHaveLength(3);
    });

    it('should use flex layout for card content', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const flexContainers = container.querySelectorAll('.flex.flex-col');
      expect(flexContainers.length).toBeGreaterThan(0);
    });

    it('should apply spacing between features', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const featureLists = container.querySelectorAll('.space-y-4');
      expect(featureLists.length).toBeGreaterThan(0);
    });

    it('should apply shadow effects appropriately', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const shadowXl = container.querySelector('.shadow-xl');
      expect(shadowXl).toBeInTheDocument(); // Popular tier

      const shadowSm = container.querySelectorAll('.shadow-sm');
      expect(shadowSm.length).toBeGreaterThan(0); // Other tiers
    });
  });

  describe('Internationalization', () => {
    it('should use translations for tier names', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      expect(screen.getByText('Starter')).toBeInTheDocument();
      expect(screen.getByText('Pro')).toBeInTheDocument();
      expect(screen.getByText('Business')).toBeInTheDocument();
    });

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

      expect(screen.getByText(/Perfect for solo practitioners/)).toBeInTheDocument();
      expect(screen.getByText(/For growing businesses/)).toBeInTheDocument();
      expect(screen.getByText(/Full power of the platform/)).toBeInTheDocument();
    });

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

      // Sample some features to verify translations are used
      // Use getAllByText for features that appear in multiple tiers
      expect(screen.getAllByText('Unlimited Appointments').length).toBeGreaterThanOrEqual(1);
      expect(screen.getByText('Custom Python Scripts')).toBeInTheDocument();
      expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
    });

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

      expect(screen.getByRole('link', { name: 'Start Free' })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: 'Start Trial' })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: 'Contact Sales' })).toBeInTheDocument();
    });

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

      const periods = screen.getAllByText('/month');
      expect(periods).toHaveLength(3);
    });

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

      expect(screen.getByText('Most Popular')).toBeInTheDocument();
    });
  });

  describe('Integration', () => {
    it('should render complete pricing table with all elements', () => {
      render(<PricingTable />, { wrapper: createWrapper() });

      // Verify all major elements are present
      expect(screen.getByText('Starter')).toBeInTheDocument();
      expect(screen.getByText('Pro')).toBeInTheDocument();
      expect(screen.getByText('Business')).toBeInTheDocument();
      expect(screen.getByText('Most Popular')).toBeInTheDocument();
      expect(screen.getByText('$0')).toBeInTheDocument();
      expect(screen.getByText('$29')).toBeInTheDocument();
      expect(screen.getByText('$99')).toBeInTheDocument();
      expect(screen.getAllByRole('link')).toHaveLength(3);
    });

    it('should maintain proper structure with icons and text', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const cards = container.querySelectorAll('.flex.flex-col');
      expect(cards.length).toBeGreaterThan(0);

      const icons = container.querySelectorAll('svg');
      expect(icons.length).toBeGreaterThan(0);

      const lists = container.querySelectorAll('ul');
      expect(lists.length).toBeGreaterThan(0);
    });

    it('should work with React Router BrowserRouter', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const links = container.querySelectorAll('a');
      expect(links).toHaveLength(3);

      links.forEach(link => {
        expect(link).toBeInstanceOf(HTMLAnchorElement);
      });
    });
  });

  describe('Responsive Design', () => {
    it('should use responsive grid classes', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const grid = container.querySelector('.md\\:grid-cols-3');
      expect(grid).toBeInTheDocument();
    });

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

      const responsivePadding = container.querySelector('.px-4.sm\\:px-6.lg\\:px-8');
      expect(responsivePadding).toBeInTheDocument();
    });

    it('should use gap for spacing between cards', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const gridWithGap = container.querySelector('.gap-8');
      expect(gridWithGap).toBeInTheDocument();
    });
  });

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

      const darkModeCards = container.querySelectorAll('.dark\\:bg-gray-800');
      expect(darkModeCards.length).toBeGreaterThan(0);
    });

    it('should include dark mode classes for text', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const darkModeText = container.querySelectorAll('.dark\\:text-white');
      expect(darkModeText.length).toBeGreaterThan(0);
    });

    it('should include dark mode classes for borders', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const darkModeBorders = container.querySelectorAll('.dark\\:border-gray-700');
      expect(darkModeBorders.length).toBeGreaterThan(0);
    });

    it('should include dark mode classes for buttons', () => {
      const { container } = render(<PricingTable />, { wrapper: createWrapper() });

      const darkModeButtons = container.querySelectorAll('.dark\\:bg-gray-700');
      expect(darkModeButtons.length).toBeGreaterThan(0);
    });
  });
});
