/**
 * Unit tests for PricingCard component
 *
 * Tests cover:
 * - Plan name rendering
 * - Price display (monthly, annual, custom)
 * - Features list rendering
 * - CTA button functionality
 * - Popular/highlighted badge
 * - Transaction fees
 * - Trial information
 * - Styling variations
 * - 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 PricingCard from '../PricingCard';

// Mock translation data
const mockTranslations: Record<string, any> = {
  'marketing.pricing.mostPopular': 'Most Popular',
  'marketing.pricing.perMonth': '/month',
  'marketing.pricing.getStarted': 'Get Started',
  'marketing.pricing.contactSales': 'Contact Sales',
  'marketing.pricing.tiers.free.name': 'Free',
  'marketing.pricing.tiers.free.description': 'Perfect for getting started',
  'marketing.pricing.tiers.free.features': [
    'Up to 2 resources',
    'Basic scheduling',
    'Customer management',
    'Direct Stripe integration',
    'Subdomain (business.smoothschedule.com)',
    'Community support',
  ],
  'marketing.pricing.tiers.free.transactionFee': '2.5% + $0.30 per transaction',
  'marketing.pricing.tiers.free.trial': 'Free forever - no trial needed',
  'marketing.pricing.tiers.professional.name': 'Professional',
  'marketing.pricing.tiers.professional.description': 'For growing businesses',
  'marketing.pricing.tiers.professional.features': [
    'Up to 10 resources',
    'Custom domain',
    'Stripe Connect (lower fees)',
    'White-label branding',
    'Email reminders',
    'Priority email support',
  ],
  'marketing.pricing.tiers.professional.transactionFee': '1.5% + $0.25 per transaction',
  'marketing.pricing.tiers.professional.trial': '14-day free trial',
  'marketing.pricing.tiers.business.name': 'Business',
  'marketing.pricing.tiers.business.description': 'Full power of the platform for serious operations.',
  'marketing.pricing.tiers.business.features': [
    'Unlimited Users',
    'Unlimited Appointments',
    'Unlimited Automations',
    'Custom Python Scripts',
    'Custom Domain (White-Label)',
    'Dedicated Support',
    'API Access',
  ],
  'marketing.pricing.tiers.business.transactionFee': '1.0% + $0.20 per transaction',
  'marketing.pricing.tiers.business.trial': '14-day free trial',
  'marketing.pricing.tiers.enterprise.name': 'Enterprise',
  'marketing.pricing.tiers.enterprise.description': 'For large organizations',
  'marketing.pricing.tiers.enterprise.price': 'Custom',
  'marketing.pricing.tiers.enterprise.features': [
    'All Business features',
    'Custom integrations',
    'Dedicated success manager',
    'SLA guarantees',
    'Custom contracts',
    'On-premise option',
  ],
  'marketing.pricing.tiers.enterprise.transactionFee': 'Custom transaction fees',
  'marketing.pricing.tiers.enterprise.trial': '14-day free trial',
};

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

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

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

  describe('Plan Name Rendering', () => {
    it('should render free tier name', () => {
      render(<PricingCard tier="free" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

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

    it('should render professional tier name', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

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

    it('should render business tier name', () => {
      render(<PricingCard tier="business" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

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

    it('should render enterprise tier name', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

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

    it('should render tier description', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('For growing businesses')).toBeInTheDocument();
    });
  });

  describe('Price Display', () => {
    describe('Monthly Billing', () => {
      it('should display free tier price correctly', () => {
        render(<PricingCard tier="free" billingPeriod="monthly" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$0')).toBeInTheDocument();
        expect(screen.getByText('/month')).toBeInTheDocument();
      });

      it('should display professional tier monthly price', () => {
        render(<PricingCard tier="professional" billingPeriod="monthly" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$29')).toBeInTheDocument();
        expect(screen.getByText('/month')).toBeInTheDocument();
      });

      it('should display business tier monthly price', () => {
        render(<PricingCard tier="business" billingPeriod="monthly" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$79')).toBeInTheDocument();
        expect(screen.getByText('/month')).toBeInTheDocument();
      });
    });

    describe('Annual Billing', () => {
      it('should display professional tier annual price', () => {
        render(<PricingCard tier="professional" billingPeriod="annual" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$290')).toBeInTheDocument();
        expect(screen.getByText('/year')).toBeInTheDocument();
      });

      it('should display business tier annual price', () => {
        render(<PricingCard tier="business" billingPeriod="annual" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$790')).toBeInTheDocument();
        expect(screen.getByText('/year')).toBeInTheDocument();
      });

      it('should display free tier with annual billing', () => {
        render(<PricingCard tier="free" billingPeriod="annual" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('$0')).toBeInTheDocument();
        expect(screen.getByText('/year')).toBeInTheDocument();
      });
    });

    describe('Custom Pricing', () => {
      it('should display custom price for enterprise tier', () => {
        render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('Custom')).toBeInTheDocument();
        expect(screen.queryByText('$')).not.toBeInTheDocument();
      });

      it('should display custom price for enterprise tier with annual billing', () => {
        render(<PricingCard tier="enterprise" billingPeriod="annual" />, {
          wrapper: createWrapper(),
        });

        expect(screen.getByText('Custom')).toBeInTheDocument();
        expect(screen.queryByText('/year')).not.toBeInTheDocument();
      });
    });
  });

  describe('Features List Rendering', () => {
    it('should render all features for free tier', () => {
      render(<PricingCard tier="free" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('Up to 2 resources')).toBeInTheDocument();
      expect(screen.getByText('Basic scheduling')).toBeInTheDocument();
      expect(screen.getByText('Customer management')).toBeInTheDocument();
      expect(screen.getByText('Direct Stripe integration')).toBeInTheDocument();
      expect(screen.getByText('Subdomain (business.smoothschedule.com)')).toBeInTheDocument();
      expect(screen.getByText('Community support')).toBeInTheDocument();
    });

    it('should render all features for professional tier', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('Up to 10 resources')).toBeInTheDocument();
      expect(screen.getByText('Custom domain')).toBeInTheDocument();
      expect(screen.getByText('Stripe Connect (lower fees)')).toBeInTheDocument();
      expect(screen.getByText('White-label branding')).toBeInTheDocument();
      expect(screen.getByText('Email reminders')).toBeInTheDocument();
      expect(screen.getByText('Priority email support')).toBeInTheDocument();
    });

    it('should render all features for enterprise tier', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('All Business features')).toBeInTheDocument();
      expect(screen.getByText('Custom integrations')).toBeInTheDocument();
      expect(screen.getByText('Dedicated success manager')).toBeInTheDocument();
      expect(screen.getByText('SLA guarantees')).toBeInTheDocument();
      expect(screen.getByText('Custom contracts')).toBeInTheDocument();
      expect(screen.getByText('On-premise option')).toBeInTheDocument();
    });

    it('should render check icons for each feature', () => {
      const { container } = render(
        <PricingCard tier="professional" billingPeriod="monthly" />,
        { wrapper: createWrapper() }
      );

      const checkIcons = container.querySelectorAll('svg');
      // Should have at least 6 check icons (one for each feature)
      expect(checkIcons.length).toBeGreaterThanOrEqual(6);
    });
  });

  describe('Transaction Fees', () => {
    it('should display transaction fee for free tier', () => {
      render(<PricingCard tier="free" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('2.5% + $0.30 per transaction')).toBeInTheDocument();
    });

    it('should display transaction fee for professional tier', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('1.5% + $0.25 per transaction')).toBeInTheDocument();
    });

    it('should display custom transaction fees for enterprise tier', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('Custom transaction fees')).toBeInTheDocument();
    });
  });

  describe('Trial Information', () => {
    it('should display trial information for free tier', () => {
      render(<PricingCard tier="free" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('Free forever - no trial needed')).toBeInTheDocument();
    });

    it('should display trial information for professional tier', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('14-day free trial')).toBeInTheDocument();
    });

    it('should display trial information for enterprise tier', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.getByText('14-day free trial')).toBeInTheDocument();
    });
  });

  describe('CTA Button', () => {
    it('should render Get Started button for free tier', () => {
      render(<PricingCard tier="free" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toBeInTheDocument();
      expect(button).toHaveAttribute('href', '/signup');
    });

    it('should render Get Started button for professional tier', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toBeInTheDocument();
      expect(button).toHaveAttribute('href', '/signup');
    });

    it('should render Get Started button for business tier', () => {
      render(<PricingCard tier="business" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toBeInTheDocument();
      expect(button).toHaveAttribute('href', '/signup');
    });

    it('should render Contact Sales button for enterprise tier', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

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

    it('should render Contact Sales button for highlighted enterprise tier', () => {
      render(<PricingCard tier="enterprise" billingPeriod="monthly" highlighted />, {
        wrapper: createWrapper(),
      });

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

  describe('Popular/Highlighted Badge', () => {
    it('should not display badge when not highlighted', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      expect(screen.queryByText('Most Popular')).not.toBeInTheDocument();
    });

    it('should display Most Popular badge when highlighted', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" highlighted />, {
        wrapper: createWrapper(),
      });

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

    it('should display badge for any tier when highlighted', () => {
      const { rerender } = render(
        <PricingCard tier="free" billingPeriod="monthly" highlighted />,
        { wrapper: createWrapper() }
      );

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

      rerender(<PricingCard tier="business" billingPeriod="monthly" highlighted />);
      expect(screen.getByText('Most Popular')).toBeInTheDocument();

      rerender(<PricingCard tier="enterprise" billingPeriod="monthly" highlighted />);
      expect(screen.getByText('Most Popular')).toBeInTheDocument();
    });
  });

  describe('Styling Variations', () => {
    it('should apply default styling for non-highlighted card', () => {
      const { container } = render(
        <PricingCard tier="free" billingPeriod="monthly" />,
        { wrapper: createWrapper() }
      );

      const card = container.firstChild as HTMLElement;
      expect(card).toHaveClass('bg-white');
      expect(card).toHaveClass('border-gray-200');
      expect(card).not.toHaveClass('bg-brand-600');
    });

    it('should apply highlighted styling for highlighted card', () => {
      const { container } = render(
        <PricingCard tier="professional" billingPeriod="monthly" highlighted />,
        { wrapper: createWrapper() }
      );

      const card = container.firstChild as HTMLElement;
      expect(card).toHaveClass('bg-brand-600');
      expect(card).not.toHaveClass('bg-white');
    });

    it('should apply different button styles for highlighted card', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" highlighted />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toHaveClass('bg-white');
      expect(button).toHaveClass('text-brand-600');
    });

    it('should apply different button styles for non-highlighted card', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toHaveClass('bg-brand-50');
      expect(button).toHaveClass('text-brand-600');
    });
  });

  describe('Billing Period Switching', () => {
    it('should switch from monthly to annual pricing', () => {
      const { rerender } = render(
        <PricingCard tier="professional" billingPeriod="monthly" />,
        { wrapper: createWrapper() }
      );

      expect(screen.getByText('$29')).toBeInTheDocument();
      expect(screen.getByText('/month')).toBeInTheDocument();

      rerender(<PricingCard tier="professional" billingPeriod="annual" />);

      expect(screen.getByText('$290')).toBeInTheDocument();
      expect(screen.getByText('/year')).toBeInTheDocument();
    });

    it('should maintain other props when billing period changes', () => {
      const { rerender } = render(
        <PricingCard tier="professional" billingPeriod="monthly" highlighted />,
        { wrapper: createWrapper() }
      );

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

      rerender(<PricingCard tier="professional" billingPeriod="annual" highlighted />);

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

  describe('Integration', () => {
    it('should render complete highlighted professional card', () => {
      const { container } = render(
        <PricingCard tier="professional" billingPeriod="monthly" highlighted />,
        { wrapper: createWrapper() }
      );

      // Badge
      expect(screen.getByText('Most Popular')).toBeInTheDocument();

      // Plan name and description
      expect(screen.getByText('Professional')).toBeInTheDocument();
      expect(screen.getByText('For growing businesses')).toBeInTheDocument();

      // Price
      expect(screen.getByText('$29')).toBeInTheDocument();
      expect(screen.getByText('/month')).toBeInTheDocument();

      // Trial info
      expect(screen.getByText('14-day free trial')).toBeInTheDocument();

      // Features (at least one)
      expect(screen.getByText('Up to 10 resources')).toBeInTheDocument();

      // Transaction fee
      expect(screen.getByText('1.5% + $0.25 per transaction')).toBeInTheDocument();

      // CTA
      const button = screen.getByRole('link', { name: /get started/i });
      expect(button).toBeInTheDocument();

      // Styling
      const card = container.firstChild as HTMLElement;
      expect(card).toHaveClass('bg-brand-600');
    });

    it('should render complete non-highlighted enterprise card', () => {
      render(<PricingCard tier="enterprise" billingPeriod="annual" />, {
        wrapper: createWrapper(),
      });

      // No badge
      expect(screen.queryByText('Most Popular')).not.toBeInTheDocument();

      // Plan name and description
      expect(screen.getByText('Enterprise')).toBeInTheDocument();
      expect(screen.getByText('For large organizations')).toBeInTheDocument();

      // Custom price
      expect(screen.getByText('Custom')).toBeInTheDocument();

      // Trial info
      expect(screen.getByText('14-day free trial')).toBeInTheDocument();

      // Features (at least one)
      expect(screen.getByText('All Business features')).toBeInTheDocument();

      // Transaction fee
      expect(screen.getByText('Custom transaction fees')).toBeInTheDocument();

      // CTA
      const button = screen.getByRole('link', { name: /contact sales/i });
      expect(button).toBeInTheDocument();
      expect(button).toHaveAttribute('href', '/contact');
    });

    it('should render all card variations correctly', () => {
      const tiers: Array<'free' | 'professional' | 'business' | 'enterprise'> = [
        'free',
        'professional',
        'business',
        'enterprise',
      ];

      tiers.forEach((tier) => {
        const { unmount } = render(
          <PricingCard tier={tier} billingPeriod="monthly" />,
          { wrapper: createWrapper() }
        );

        // Each tier should have a CTA button
        const button = screen.getByRole('link', {
          name: tier === 'enterprise' ? /contact sales/i : /get started/i,
        });
        expect(button).toBeInTheDocument();

        unmount();
      });
    });
  });

  describe('Accessibility', () => {
    it('should have accessible link elements', () => {
      render(<PricingCard tier="professional" billingPeriod="monthly" />, {
        wrapper: createWrapper(),
      });

      const button = screen.getByRole('link', { name: /get started/i });
      expect(button.tagName).toBe('A');
    });

    it('should maintain semantic structure', () => {
      const { container } = render(
        <PricingCard tier="professional" billingPeriod="monthly" />,
        { wrapper: createWrapper() }
      );

      // Should have heading elements
      const heading = screen.getByText('Professional');
      expect(heading.tagName).toBe('H3');
    });
  });
});
