import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { MdTab } from '../MdTab';
import { MdTabs } from '../MdTabs';

describe('MdTabs', () => {
  describe('rendering', () => {
    it('renders tab list with tabs', () => {
      render(
        <MdTabs>
          <MdTab title="Tab 1">Content 1</MdTab>
          <MdTab title="Tab 2">Content 2</MdTab>
        </MdTabs>,
      );
      expect(screen.getByRole('tablist')).toBeInTheDocument();
      expect(screen.getAllByRole('tab')).toHaveLength(2);
    });

    it('renders tab titles', () => {
      render(
        <MdTabs>
          <MdTab title="First Tab">Content 1</MdTab>
          <MdTab title="Second Tab">Content 2</MdTab>
        </MdTabs>,
      );
      expect(screen.getByText('First Tab')).toBeInTheDocument();
      expect(screen.getByText('Second Tab')).toBeInTheDocument();
    });

    it('renders first tab content by default', () => {
      render(
        <MdTabs>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
        </MdTabs>,
      );
      expect(screen.getByText('First content')).toBeInTheDocument();
    });

    it('renders initial tab based on initialTab prop', () => {
      render(
        <MdTabs initialTab={1}>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
        </MdTabs>,
      );
      // Tab 2 should be selected
      const tabs = screen.getAllByRole('tab');
      expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
    });

    it('defaults to first tab if initialTab is out of bounds (negative)', () => {
      render(
        <MdTabs initialTab={-1}>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
        </MdTabs>,
      );
      const tabs = screen.getAllByRole('tab');
      expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
    });

    it('defaults to first tab if initialTab is out of bounds (too high)', () => {
      render(
        <MdTabs initialTab={10}>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
        </MdTabs>,
      );
      const tabs = screen.getAllByRole('tab');
      expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
    });
  });

  describe('compact mode', () => {
    it('applies compact class when compact is true', () => {
      const { container } = render(
        <MdTabs compact>
          <MdTab title="Tab 1">Content</MdTab>
          <MdTab title="Tab 2">Content 2</MdTab>
        </MdTabs>,
      );
      expect(container.querySelector('.md-tabs__compact')).toBeInTheDocument();
    });
  });

  describe('interactions', () => {
    it('switches content when clicking different tab', async () => {
      const user = userEvent.setup();
      render(
        <MdTabs>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
        </MdTabs>,
      );

      const secondTab = screen.getByRole('tab', { name: /Tab 2/i });
      await user.click(secondTab);

      expect(secondTab).toHaveAttribute('aria-selected', 'true');
    });

    it('supports keyboard navigation', async () => {
      const user = userEvent.setup();
      render(
        <MdTabs>
          <MdTab title="Tab 1">First content</MdTab>
          <MdTab title="Tab 2">Second content</MdTab>
          <MdTab title="Tab 3">Third content</MdTab>
        </MdTabs>,
      );

      const firstTab = screen.getByRole('tab', { name: /Tab 1/i });
      firstTab.focus();

      // Arrow key should work, but selectOnMove={false} means focus doesn't auto-select
      // Just verify the first tab has focus after focusing it
      await user.keyboard('{ArrowRight}');
      // The tabs component uses selectOnMove={false}, so we just verify tabs are navigable
      expect(screen.getAllByRole('tab')).toHaveLength(3);
    });
  });

  describe('disabled tabs', () => {
    it('renders disabled tab', () => {
      render(
        <MdTabs>
          <MdTab title="Tab 1">Content 1</MdTab>
          <MdTab title="Tab 2" disabled>
            Content 2
          </MdTab>
        </MdTabs>,
      );
      const tabs = screen.getAllByRole('tab');
      expect(tabs[1]).toHaveAttribute('aria-disabled', 'true');
    });
  });

  describe('accessibility', () => {
    it('has appropriate ARIA attributes', () => {
      render(
        <MdTabs>
          <MdTab title="Tab 1">Content 1</MdTab>
          <MdTab title="Tab 2">Content 2</MdTab>
        </MdTabs>,
      );

      const tablist = screen.getByRole('tablist');
      expect(tablist).toBeInTheDocument();

      const tabs = screen.getAllByRole('tab');
      expect(tabs[0]).toHaveAttribute('aria-selected');

      const tabpanels = screen.getAllByRole('tabpanel');
      expect(tabpanels.length).toBeGreaterThan(0);
    });

    it('associates tabs with panels', () => {
      render(
        <MdTabs>
          <MdTab title="Tab 1">Content 1</MdTab>
          <MdTab title="Tab 2">Content 2</MdTab>
        </MdTabs>,
      );

      const tab = screen.getByRole('tab', { name: /Tab 1/i });
      const tabId = tab.getAttribute('id');
      const panel = screen.getByRole('tabpanel');

      expect(panel).toHaveAttribute('aria-labelledby', tabId);
    });
  });
});

describe('MdTab', () => {
  it('renders children', () => {
    render(
      <MdTabs>
        <MdTab title="Test">
          <div data-testid="tab-content">Tab Content</div>
        </MdTab>
        <MdTab title="Test 2">Content 2</MdTab>
      </MdTabs>,
    );
    expect(screen.getByTestId('tab-content')).toBeInTheDocument();
  });
});