import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';

describe('Tabs', () => {
  const TestTabs = () => (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content 1</TabsContent>
      <TabsContent value="tab2">Content 2</TabsContent>
      <TabsContent value="tab3">Content 3</TabsContent>
    </Tabs>
  );

  it('renders with default tab selected', () => {
    render(<TestTabs />);

    expect(screen.getByText('Tab 1')).toBeInTheDocument();
    expect(screen.getByText('Tab 2')).toBeInTheDocument();
    expect(screen.getByText('Tab 3')).toBeInTheDocument();
    expect(screen.getByText('Content 1')).toBeInTheDocument();
    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
  });

  it('switches tab content when clicking triggers', () => {
    render(<TestTabs />);

    // Click Tab 2
    fireEvent.click(screen.getByText('Tab 2'));
    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
    expect(screen.getByText('Content 2')).toBeInTheDocument();
    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();

    // Click Tab 3
    fireEvent.click(screen.getByText('Tab 3'));
    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
    expect(screen.getByText('Content 3')).toBeInTheDocument();

    // Click back to Tab 1
    fireEvent.click(screen.getByText('Tab 1'));
    expect(screen.getByText('Content 1')).toBeInTheDocument();
    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
  });

  it('applies correct aria attributes', () => {
    render(<TestTabs />);

    const tab1 = screen.getByText('Tab 1');
    const tab2 = screen.getByText('Tab 2');

    expect(tab1).toHaveAttribute('role', 'tab');
    expect(tab1).toHaveAttribute('aria-selected', 'true');
    expect(tab2).toHaveAttribute('role', 'tab');
    expect(tab2).toHaveAttribute('aria-selected', 'false');

    fireEvent.click(tab2);
    expect(tab1).toHaveAttribute('aria-selected', 'false');
    expect(tab2).toHaveAttribute('aria-selected', 'true');
  });

  it('renders content with tabpanel role', () => {
    render(<TestTabs />);

    const content = screen.getByRole('tabpanel');
    expect(content).toHaveTextContent('Content 1');
  });

  it('applies custom className to components', () => {
    render(
      <Tabs defaultValue="test" className="custom-tabs">
        <TabsList className="custom-list">
          <TabsTrigger value="test" className="custom-trigger">
            Test
          </TabsTrigger>
        </TabsList>
        <TabsContent value="test" className="custom-content">
          Test Content
        </TabsContent>
      </Tabs>
    );

    expect(document.querySelector('.custom-tabs')).toBeInTheDocument();
    expect(document.querySelector('.custom-list')).toBeInTheDocument();
    expect(document.querySelector('.custom-trigger')).toBeInTheDocument();
    expect(document.querySelector('.custom-content')).toBeInTheDocument();
  });
});