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

import { FeatureCard } from '@/Components/marketing/FeatureCard';

vi.mock('@inertiajs/react', async () => {
  const { createElement } = await import('react');
  return {
    Link: ({
      href,
      children,
      onClick,
      className,
    }: {
      href: string;
      children: unknown;
      onClick?: () => void;
      className?: string;
    }) =>
      createElement(
        'a',
        { href, onClick, className },
        children as Parameters<typeof createElement>[2],
      ),
  };
});

vi.mock('@/lib/analytics', () => ({ trackEvent: vi.fn() }));
vi.mock('@/lib/event-catalog', () => ({ FEATURES_LEARN_MORE_CLICK: 'features_learn_more_click' }));

describe('FeatureCard', () => {
  it('renders title and description', () => {
    render(<FeatureCard icon={Zap} title="ROI Tracking" description="Track your ROI." />);

    expect(screen.getByText('ROI Tracking')).toBeInTheDocument();
    expect(screen.getByText('Track your ROI.')).toBeInTheDocument();
  });

  it('renders learn more link when learnMoreUrl is provided', () => {
    render(
      <FeatureCard
        icon={Zap}
        title="ROI Tracking"
        description="Track your ROI."
        learnMoreUrl="/blog/roi-tracking"
      />,
    );

    const link = screen.getByRole('link', { name: /learn more/i });
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('href', '/blog/roi-tracking');
  });

  it('does not render learn more link when learnMoreUrl is absent', () => {
    render(<FeatureCard icon={Zap} title="ROI Tracking" description="Track your ROI." />);

    expect(screen.queryByRole('link', { name: /learn more/i })).not.toBeInTheDocument();
  });

  it('applies ring and bg classes when featured=true', () => {
    const { container } = render(
      <FeatureCard icon={Zap} title="ROI Tracking" description="Track your ROI." featured />,
    );

    const card = container.firstElementChild;
    expect(card?.className).toMatch(/ring-2/);
    expect(card?.className).toMatch(/ring-primary/);
  });

  it('does not apply ring classes when featured is omitted (default false)', () => {
    const { container } = render(
      <FeatureCard icon={Zap} title="ROI Tracking" description="Track your ROI." />,
    );

    const card = container.firstElementChild;
    expect(card?.className).not.toMatch(/ring-2/);
    expect(card?.className).not.toMatch(/ring-primary/);
  });

  it('applies text-primary to title when featured=true', () => {
    render(<FeatureCard icon={Zap} title="ROI Tracking" description="Track your ROI." featured />);

    const title = screen.getByText('ROI Tracking');
    expect(title.className).toMatch(/text-primary/);
  });

  it('does not apply text-primary to title when featured=false', () => {
    render(
      <FeatureCard
        icon={Zap}
        title="ROI Tracking"
        description="Track your ROI."
        featured={false}
      />,
    );

    const title = screen.getByText('ROI Tracking');
    // The title still has text-xl but NOT text-primary from the featured branch
    expect(title.className).not.toMatch(/\btext-primary\b/);
  });
});