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

describe('ServiceCardGrid', () => {
  it('renders each item title and description in the default card variant', () => {
    render(
      <ServiceCardGrid
        items={[
          { title: 'AI Strategy', description: 'Define a roadmap for responsible adoption.' },
          { title: 'Implementation', description: 'Ship production-grade agents.' },
        ]}
      />
    );

    expect(screen.getByText('AI Strategy')).toBeInTheDocument();
    expect(screen.getByText('Define a roadmap for responsible adoption.')).toBeInTheDocument();
    expect(screen.getByText('Implementation')).toBeInTheDocument();
  });

  it('renders the category label and checklist items with check icons', () => {
    const { container } = render(
      <ServiceCardGrid
        items={[
          {
            title: 'Governance',
            category: 'Compliance',
            description: 'Keep every model decision auditable.',
            checklist: ['SOC 2 mapping', 'Model risk register'],
          },
        ]}
      />
    );

    expect(screen.getByText('Compliance')).toBeInTheDocument();
    expect(screen.getByText('SOC 2 mapping')).toBeInTheDocument();
    expect(screen.getByText('Model risk register')).toBeInTheDocument();
    expect(container.querySelectorAll('svg').length).toBeGreaterThan(0);
  });

  it('renders a bullet list when bullets are provided instead of a checklist', () => {
    render(
      <ServiceCardGrid
        items={[
          {
            title: 'Data Platform',
            description: 'Unify data across clouds.',
            bullets: ['BigQuery-native', 'Zero-copy federation'],
          },
        ]}
      />
    );

    expect(screen.getAllByRole('listitem')).toHaveLength(2);
    expect(screen.getByText('BigQuery-native')).toBeInTheDocument();
  });

  it('renders a CTA as a link when href is provided', () => {
    render(
      <ServiceCardGrid
        items={[
          {
            title: 'Managed Services',
            description: '24/7 operational support.',
            cta: { label: 'Learn more', href: '/managed-services' },
          },
        ]}
      />
    );

    expect(screen.getByRole('link', { name: 'Learn more' })).toHaveAttribute(
      'href',
      '/managed-services'
    );
  });

  it('ignores checklist, bullets, and CTA chrome in the plain variant', () => {
    render(
      <ServiceCardGrid
        variant="plain"
        items={[
          {
            title: 'Advisory',
            description: 'Strategic guidance for executive teams.',
            checklist: ['Should not render'],
            bullets: ['Should not render either'],
            cta: { label: 'Should not render', href: '/x' },
          },
        ]}
      />
    );

    expect(screen.getByText('Advisory')).toBeInTheDocument();
    expect(screen.queryByText('Should not render')).not.toBeInTheDocument();
    expect(screen.queryByText('Should not render either')).not.toBeInTheDocument();
    expect(screen.queryByRole('link', { name: 'Should not render' })).not.toBeInTheDocument();
  });

  it('applies the correct desktop column class based on the columns prop', () => {
    const { container, rerender } = render(
      <ServiceCardGrid columns={2} items={[{ title: 'A', description: 'a' }]} />
    );
    expect(container.firstChild).toHaveClass('md:grid-cols-2');

    rerender(<ServiceCardGrid columns={4} items={[{ title: 'A', description: 'a' }]} />);
    expect(container.firstChild).toHaveClass('md:grid-cols-4');

    rerender(<ServiceCardGrid items={[{ title: 'A', description: 'a' }]} />);
    expect(container.firstChild).toHaveClass('md:grid-cols-3');
  });
});