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

import type { PlanCardTier, PriceDisplay } from './PlanCard';
import { PlanCard } from './PlanCard';

const baseTier: PlanCardTier = {
  name: 'Starter',
  price: 29,
  features: ['1 site', '500 recommendations'],
};

const basePricing: PriceDisplay = {
  label: '$29/mo',
};

describe('PlanCard', () => {
  it('renders the plan name', () => {
    render(
      <PlanCard tierKey="starter" tier={baseTier} pricing={basePricing} billingPeriod="monthly" />,
    );
    expect(screen.getByText('Starter')).toBeInTheDocument();
  });

  it('renders price label', () => {
    render(
      <PlanCard tierKey="starter" tier={baseTier} pricing={basePricing} billingPeriod="monthly" />,
    );
    expect(screen.getByText('$29/mo')).toBeInTheDocument();
  });

  it('renders features list', () => {
    render(
      <PlanCard tierKey="starter" tier={baseTier} pricing={basePricing} billingPeriod="monthly" />,
    );
    expect(screen.getByText('1 site')).toBeInTheDocument();
    expect(screen.getByText('500 recommendations')).toBeInTheDocument();
  });

  describe('best_for callout (PRICE-MSG-006)', () => {
    it('renders best_for text when provided', () => {
      const tier: PlanCardTier = { ...baseTier, best_for: 'Testing with 1 site' };
      render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      expect(screen.getByText('Testing with 1 site')).toBeInTheDocument();
    });

    it('renders "Best for:" label alongside best_for text', () => {
      const tier: PlanCardTier = { ...baseTier, best_for: 'Solo SEO consultants' };
      render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      expect(screen.getByText('Best for:')).toBeInTheDocument();
      expect(screen.getByText('Solo SEO consultants')).toBeInTheDocument();
    });

    it('renders best_for inside a prominent callout container', () => {
      const tier: PlanCardTier = { ...baseTier, best_for: 'Growing agencies' };
      const { container } = render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      // The callout div should carry the bg-primary/5 class for visual weight
      const callout = container.querySelector('.bg-primary\\/5');
      expect(callout).toBeInTheDocument();
      expect(callout).toHaveTextContent('Growing agencies');
    });

    it('renders "Best for:" label with prominent primary styling (PRICE-MSG-006)', () => {
      const tier: PlanCardTier = { ...baseTier, best_for: 'Solo consultants' };
      const { container } = render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      // Label must carry both font-semibold and text-primary for visual weight
      const label = container.querySelector('.font-semibold.text-primary');
      expect(label).toBeInTheDocument();
      expect(label).toHaveTextContent('Best for:');
    });

    it('does not render best_for callout when best_for is absent', () => {
      render(
        <PlanCard
          tierKey="starter"
          tier={baseTier}
          pricing={basePricing}
          billingPeriod="monthly"
        />,
      );
      expect(screen.queryByText('Best for:')).not.toBeInTheDocument();
    });

    it('renders best_for before the feature list', () => {
      const tier: PlanCardTier = {
        ...baseTier,
        best_for: 'Freelancers',
        features: ['1 site'],
      };
      const { container } = render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      const callout = container.querySelector('.bg-primary\\/5');
      const featureList = container.querySelector('ul');
      expect(callout).not.toBeNull();
      expect(featureList).not.toBeNull();
      // callout must appear before the feature list in DOM order
      expect(
        callout!.compareDocumentPosition(featureList!) & Node.DOCUMENT_POSITION_FOLLOWING,
      ).toBeTruthy();
    });

    it('renders both best_for callout and description when both are present, callout preceding description', () => {
      const tier: PlanCardTier = {
        ...baseTier,
        best_for: 'Growing agencies',
        description: 'A great plan for agencies.',
      };
      const { container } = render(
        <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
      );
      const callout = container.querySelector('.bg-primary\\/5');
      const description = screen.getByText('A great plan for agencies.');

      expect(callout).toBeInTheDocument();
      expect(description).toBeInTheDocument();
      // best_for callout must appear before description paragraph in DOM order
      expect(
        callout!.compareDocumentPosition(description) & Node.DOCUMENT_POSITION_FOLLOWING,
      ).toBeTruthy();
    });
  });

  it('renders description when provided', () => {
    const tier: PlanCardTier = { ...baseTier, description: 'A great starter plan.' };
    render(
      <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
    );
    expect(screen.getByText('A great starter plan.')).toBeInTheDocument();
  });

  it('shows Current badge when isCurrent', () => {
    render(
      <PlanCard
        tierKey="starter"
        tier={baseTier}
        pricing={basePricing}
        billingPeriod="monthly"
        isCurrent
      />,
    );
    expect(screen.getByText('Current')).toBeInTheDocument();
  });

  it('shows Recommended badge when isRecommended and not isCurrent', () => {
    render(
      <PlanCard
        tierKey="starter"
        tier={baseTier}
        pricing={basePricing}
        billingPeriod="monthly"
        isRecommended
      />,
    );
    expect(screen.getByText('Recommended for You')).toBeInTheDocument();
  });

  it('shows Coming Soon badge when coming_soon', () => {
    const tier: PlanCardTier = { ...baseTier, coming_soon: true };
    render(
      <PlanCard tierKey="starter" tier={tier} pricing={basePricing} billingPeriod="monthly" />,
    );
    expect(screen.getByText('Coming Soon')).toBeInTheDocument();
  });

  it('shows annual savings badge when billing is annual and savings provided', () => {
    const pricing: PriceDisplay = { ...basePricing, savings: 58 };
    render(<PlanCard tierKey="starter" tier={baseTier} pricing={pricing} billingPeriod="annual" />);
    expect(screen.getByText('Save $58')).toBeInTheDocument();
  });

  it('renders children CTA slot', () => {
    render(
      <PlanCard tierKey="starter" tier={baseTier} pricing={basePricing} billingPeriod="monthly">
        <button>Upgrade</button>
      </PlanCard>,
    );
    expect(screen.getByRole('button', { name: 'Upgrade' })).toBeInTheDocument();
  });
});