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

const tabs = [
  { id: 'tab1', label: 'Tab 1' },
  { id: 'tab2', label: 'Tab 2' },
  { id: 'tab3', label: 'Tab 3', disabled: true },
];

describe('TabGroup', () => {
  it('renders all tabs', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    expect(screen.getByText('Tab 1')).toBeInTheDocument();
    expect(screen.getByText('Tab 2')).toBeInTheDocument();
    expect(screen.getByText('Tab 3')).toBeInTheDocument();
  });

  it('highlights active tab', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-blue-600');
  });

  it('calls onChange when tab is clicked', () => {
    const handleChange = vi.fn();
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={handleChange} />);
    fireEvent.click(screen.getByText('Tab 2'));
    expect(handleChange).toHaveBeenCalledWith('tab2');
  });

  it('does not call onChange for disabled tabs', () => {
    const handleChange = vi.fn();
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={handleChange} />);
    fireEvent.click(screen.getByText('Tab 3'));
    expect(handleChange).not.toHaveBeenCalled();
  });

  it('applies disabled styling to disabled tabs', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    const disabledButton = screen.getByText('Tab 3').closest('button');
    expect(disabledButton).toHaveClass('opacity-50');
    expect(disabledButton).toHaveClass('cursor-not-allowed');
  });

  it('renders default variant by default', () => {
    const { container } = render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    expect(container.firstChild).toHaveClass('rounded-lg');
  });

  it('renders underline variant', () => {
    const { container } = render(
      <TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} variant="underline" />
    );
    expect(container.firstChild).toHaveClass('border-b');
  });

  it('renders pills variant', () => {
    const { container } = render(
      <TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} variant="pills" />
    );
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('rounded-full');
  });

  it('applies small size classes', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} size="sm" />);
    const button = screen.getByText('Tab 1').closest('button');
    expect(button).toHaveClass('py-1.5');
  });

  it('applies medium size classes by default', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    const button = screen.getByText('Tab 1').closest('button');
    expect(button).toHaveClass('py-2');
  });

  it('applies large size classes', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} size="lg" />);
    const button = screen.getByText('Tab 1').closest('button');
    expect(button).toHaveClass('py-2.5');
  });

  it('applies full width by default', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    const button = screen.getByText('Tab 1').closest('button');
    expect(button).toHaveClass('flex-1');
  });

  it('can disable full width', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} fullWidth={false} />);
    const button = screen.getByText('Tab 1').closest('button');
    expect(button).not.toHaveClass('flex-1');
  });

  it('applies custom className', () => {
    const { container } = render(
      <TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} className="custom-class" />
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('applies blue active color by default', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} />);
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-blue-600');
  });

  it('applies purple active color', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} activeColor="purple" />);
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-purple-600');
  });

  it('applies green active color', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} activeColor="green" />);
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-green-600');
  });

  it('applies brand active color', () => {
    render(<TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} activeColor="brand" />);
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-brand-600');
  });

  it('renders tabs with icons', () => {
    const tabsWithIcons = [
      { id: 'tab1', label: 'Tab 1', icon: <span data-testid="icon-1">🏠</span> },
      { id: 'tab2', label: 'Tab 2', icon: <span data-testid="icon-2">📧</span> },
    ];
    render(<TabGroup tabs={tabsWithIcons} activeTab="tab1" onChange={() => {}} />);
    expect(screen.getByTestId('icon-1')).toBeInTheDocument();
    expect(screen.getByTestId('icon-2')).toBeInTheDocument();
  });

  it('renders tabs with ReactNode labels', () => {
    const tabsWithNodes = [
      { id: 'tab1', label: <strong>Bold Tab</strong> },
    ];
    render(<TabGroup tabs={tabsWithNodes} activeTab="tab1" onChange={() => {}} />);
    expect(screen.getByText('Bold Tab')).toBeInTheDocument();
  });

  it('applies underline variant colors correctly', () => {
    render(
      <TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} variant="underline" />
    );
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('border-blue-600');
  });

  it('applies pills variant colors correctly', () => {
    render(
      <TabGroup tabs={tabs} activeTab="tab1" onChange={() => {}} variant="pills" />
    );
    const activeButton = screen.getByText('Tab 1').closest('button');
    expect(activeButton).toHaveClass('bg-blue-100');
  });
});
