/**
 * Unit tests for FAQAccordion component
 *
 * Tests the FAQ accordion functionality including:
 * - Rendering questions and answers
 * - Expanding and collapsing items
 * - Single-item accordion behavior (only one open at a time)
 * - Accessibility attributes
 */

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

// Test data
const mockFAQItems = [
  {
    question: 'What is SmoothSchedule?',
    answer: 'SmoothSchedule is a comprehensive scheduling platform for businesses.',
  },
  {
    question: 'How much does it cost?',
    answer: 'We offer flexible pricing plans starting at $29/month.',
  },
  {
    question: 'Can I try it for free?',
    answer: 'Yes! We offer a 14-day free trial with no credit card required.',
  },
];

describe('FAQAccordion', () => {
  describe('Rendering', () => {
    it('should render all questions', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      expect(screen.getByText('What is SmoothSchedule?')).toBeInTheDocument();
      expect(screen.getByText('How much does it cost?')).toBeInTheDocument();
      expect(screen.getByText('Can I try it for free?')).toBeInTheDocument();
    });

    it('should render first item as expanded by default', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      // First answer should be visible
      expect(
        screen.getByText('SmoothSchedule is a comprehensive scheduling platform for businesses.')
      ).toBeInTheDocument();

      // Other answers should not be visible
      expect(
        screen.queryByText('We offer flexible pricing plans starting at $29/month.')
      ).toBeInTheDocument();
      expect(
        screen.queryByText('Yes! We offer a 14-day free trial with no credit card required.')
      ).toBeInTheDocument();
    });

    it('should render with empty items array', () => {
      const { container } = render(<FAQAccordion items={[]} />);

      // Should render the container but no items
      expect(container.querySelector('.space-y-4')).toBeInTheDocument();
      expect(container.querySelectorAll('button')).toHaveLength(0);
    });

    it('should render with single item', () => {
      const singleItem = [mockFAQItems[0]];
      render(<FAQAccordion items={singleItem} />);

      expect(screen.getByText('What is SmoothSchedule?')).toBeInTheDocument();
      expect(
        screen.getByText('SmoothSchedule is a comprehensive scheduling platform for businesses.')
      ).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should have aria-expanded attribute on buttons', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');

      // First button should be expanded (default)
      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');

      // Other buttons should be collapsed
      expect(buttons[1]).toHaveAttribute('aria-expanded', 'false');
      expect(buttons[2]).toHaveAttribute('aria-expanded', 'false');
    });

    it('should update aria-expanded when item is toggled', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');
      const secondButton = buttons[1];

      // Initially collapsed
      expect(secondButton).toHaveAttribute('aria-expanded', 'false');

      // Click to expand
      fireEvent.click(secondButton);

      // Now expanded
      expect(secondButton).toHaveAttribute('aria-expanded', 'true');
    });

    it('should have proper button semantics', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');

      buttons.forEach((button) => {
        // Each button should have text content
        expect(button.textContent).toBeTruthy();

        // Each button should be clickable
        expect(button).toBeEnabled();
      });
    });
  });

  describe('Expand/Collapse Behavior', () => {
    it('should expand answer when question is clicked', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const secondQuestion = screen.getByText('How much does it cost?');

      // Answer should be in the document but potentially hidden
      const answer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
      const answerContainer = answer.closest('.overflow-hidden');

      // Initially collapsed (max-h-0)
      expect(answerContainer).toHaveClass('max-h-0');

      // Click to expand
      fireEvent.click(secondQuestion);

      // Now expanded (max-h-96)
      expect(answerContainer).toHaveClass('max-h-96');
    });

    it('should collapse answer when clicking expanded question', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstQuestion = screen.getByText('What is SmoothSchedule?');
      const answer = screen.getByText(
        'SmoothSchedule is a comprehensive scheduling platform for businesses.'
      );
      const answerContainer = answer.closest('.overflow-hidden');

      // Initially expanded (first item is open by default)
      expect(answerContainer).toHaveClass('max-h-96');

      // Click to collapse
      fireEvent.click(firstQuestion);

      // Now collapsed
      expect(answerContainer).toHaveClass('max-h-0');
    });

    it('should collapse answer when clicking it again (toggle)', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const secondQuestion = screen.getByText('How much does it cost?');
      const answer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
      const answerContainer = answer.closest('.overflow-hidden');

      // Initially collapsed
      expect(answerContainer).toHaveClass('max-h-0');

      // Click to expand
      fireEvent.click(secondQuestion);
      expect(answerContainer).toHaveClass('max-h-96');

      // Click again to collapse
      fireEvent.click(secondQuestion);
      expect(answerContainer).toHaveClass('max-h-0');
    });
  });

  describe('Single Item Accordion Behavior', () => {
    it('should only allow one item to be expanded at a time', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstQuestion = screen.getByText('What is SmoothSchedule?');
      const secondQuestion = screen.getByText('How much does it cost?');
      const thirdQuestion = screen.getByText('Can I try it for free?');

      const firstAnswer = screen.getByText(
        'SmoothSchedule is a comprehensive scheduling platform for businesses.'
      );
      const secondAnswer = screen.getByText(
        'We offer flexible pricing plans starting at $29/month.'
      );
      const thirdAnswer = screen.getByText(
        'Yes! We offer a 14-day free trial with no credit card required.'
      );

      // Initially, first item is expanded
      expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
      expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
      expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');

      // Click second question
      fireEvent.click(secondQuestion);

      // Now only second item is expanded
      expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
      expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
      expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');

      // Click third question
      fireEvent.click(thirdQuestion);

      // Now only third item is expanded
      expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
      expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
      expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');

      // Click first question
      fireEvent.click(firstQuestion);

      // Back to first item expanded
      expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
      expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
      expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
    });

    it('should close the currently open item when opening another', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');

      // First button is expanded by default
      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
      expect(buttons[1]).toHaveAttribute('aria-expanded', 'false');

      // Click second button
      fireEvent.click(buttons[1]);

      // First button should now be collapsed, second expanded
      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
    });

    it('should allow collapsing all items by clicking the open one', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstQuestion = screen.getByText('What is SmoothSchedule?');
      const buttons = screen.getAllByRole('button');

      // Initially first item is expanded
      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');

      // Click to collapse
      fireEvent.click(firstQuestion);

      // All items should be collapsed
      buttons.forEach((button) => {
        expect(button).toHaveAttribute('aria-expanded', 'false');
      });
    });
  });

  describe('Chevron Icon Rotation', () => {
    it('should rotate chevron icon when item is expanded', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');
      const firstButton = buttons[0];
      const secondButton = buttons[1];

      // First item is expanded, so chevron should be rotated
      const firstChevron = firstButton.querySelector('svg');
      expect(firstChevron).toHaveClass('rotate-180');

      // Second item is collapsed, so chevron should not be rotated
      const secondChevron = secondButton.querySelector('svg');
      expect(secondChevron).not.toHaveClass('rotate-180');

      // Click second button
      fireEvent.click(secondButton);

      // Now second chevron should be rotated, first should not
      expect(firstChevron).not.toHaveClass('rotate-180');
      expect(secondChevron).toHaveClass('rotate-180');
    });

    it('should toggle chevron rotation when item is clicked multiple times', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstButton = screen.getAllByRole('button')[0];
      const chevron = firstButton.querySelector('svg');

      // Initially rotated (first item is expanded)
      expect(chevron).toHaveClass('rotate-180');

      // Click to collapse
      fireEvent.click(firstButton);
      expect(chevron).not.toHaveClass('rotate-180');

      // Click to expand
      fireEvent.click(firstButton);
      expect(chevron).toHaveClass('rotate-180');

      // Click to collapse again
      fireEvent.click(firstButton);
      expect(chevron).not.toHaveClass('rotate-180');
    });
  });

  describe('Edge Cases', () => {
    it('should handle items with long text content', () => {
      const longTextItems = [
        {
          question: 'This is a very long question that might wrap to multiple lines in the UI?',
          answer:
            'This is a very long answer with lots of text. ' +
            'It contains multiple sentences and provides detailed information. ' +
            'The accordion should handle this gracefully without breaking the layout. ' +
            'Users should be able to read all of this content when the item is expanded.',
        },
      ];

      render(<FAQAccordion items={longTextItems} />);

      expect(
        screen.getByText('This is a very long question that might wrap to multiple lines in the UI?')
      ).toBeInTheDocument();

      const answer = screen.getByText(/This is a very long answer with lots of text/);
      expect(answer).toBeInTheDocument();
    });

    it('should handle items with special characters', () => {
      const specialCharItems = [
        {
          question: 'What about <special> & "characters"?',
          answer: 'We support all UTF-8 characters: é, ñ, 中文, 日本語!',
        },
      ];

      render(<FAQAccordion items={specialCharItems} />);

      expect(screen.getByText('What about <special> & "characters"?')).toBeInTheDocument();
      expect(screen.getByText('We support all UTF-8 characters: é, ñ, 中文, 日本語!')).toBeInTheDocument();
    });

    it('should handle rapid clicking without breaking', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const buttons = screen.getAllByRole('button');

      // Rapidly click different buttons
      fireEvent.click(buttons[0]);
      fireEvent.click(buttons[1]);
      fireEvent.click(buttons[2]);
      fireEvent.click(buttons[0]);
      fireEvent.click(buttons[1]);

      // Should still be functional - second button should be expanded
      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
      expect(buttons[2]).toHaveAttribute('aria-expanded', 'false');
    });

    it('should handle clicking on the same item multiple times', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstButton = screen.getAllByRole('button')[0];

      // Initially expanded
      expect(firstButton).toHaveAttribute('aria-expanded', 'true');

      // Click multiple times
      fireEvent.click(firstButton);
      expect(firstButton).toHaveAttribute('aria-expanded', 'false');

      fireEvent.click(firstButton);
      expect(firstButton).toHaveAttribute('aria-expanded', 'true');

      fireEvent.click(firstButton);
      expect(firstButton).toHaveAttribute('aria-expanded', 'false');
    });
  });

  describe('Visual States', () => {
    it('should apply correct CSS classes for expanded state', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const firstAnswer = screen.getByText(
        'SmoothSchedule is a comprehensive scheduling platform for businesses.'
      );
      const answerContainer = firstAnswer.closest('.overflow-hidden');

      // Expanded state should have max-h-96
      expect(answerContainer).toHaveClass('max-h-96');
      expect(answerContainer).toHaveClass('transition-all');
      expect(answerContainer).toHaveClass('duration-200');
    });

    it('should apply correct CSS classes for collapsed state', () => {
      render(<FAQAccordion items={mockFAQItems} />);

      const secondAnswer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
      const answerContainer = secondAnswer.closest('.overflow-hidden');

      // Collapsed state should have max-h-0
      expect(answerContainer).toHaveClass('max-h-0');
      expect(answerContainer).toHaveClass('overflow-hidden');
    });

    it('should have proper container structure', () => {
      const { container } = render(<FAQAccordion items={mockFAQItems} />);

      // Root container should have space-y-4
      const rootDiv = container.querySelector('.space-y-4');
      expect(rootDiv).toBeInTheDocument();

      // Each item should have proper styling
      const itemContainers = container.querySelectorAll('.bg-white');
      expect(itemContainers).toHaveLength(mockFAQItems.length);

      itemContainers.forEach((item) => {
        expect(item).toHaveClass('rounded-xl');
        expect(item).toHaveClass('border');
        expect(item).toHaveClass('overflow-hidden');
      });
    });
  });
});
