/**
 * Unit tests for FeatureCard component
 *
 * Tests the FeatureCard marketing component including:
 * - Basic rendering with title and description
 * - Icon rendering with different colors
 * - CSS classes and styling
 * - Hover states and animations
 * - Accessibility
 */

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Calendar, Clock, Users, CheckCircle, AlertCircle } from 'lucide-react';
import FeatureCard from '../FeatureCard';

describe('FeatureCard', () => {
  describe('Basic Rendering', () => {
    it('should render with title and description', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Easy Scheduling"
          description="Schedule appointments with ease using our intuitive calendar interface."
        />
      );

      expect(screen.getByText('Easy Scheduling')).toBeInTheDocument();
      expect(
        screen.getByText('Schedule appointments with ease using our intuitive calendar interface.')
      ).toBeInTheDocument();
    });

    it('should render with different content', () => {
      render(
        <FeatureCard
          icon={Users}
          title="Team Management"
          description="Manage your team members and their availability efficiently."
        />
      );

      expect(screen.getByText('Team Management')).toBeInTheDocument();
      expect(
        screen.getByText('Manage your team members and their availability efficiently.')
      ).toBeInTheDocument();
    });

    it('should render with long description text', () => {
      const longDescription =
        'This is a very long description that contains multiple sentences. It should wrap properly and display all the content. Our feature card component is designed to handle various lengths of text gracefully.';

      render(
        <FeatureCard
          icon={Clock}
          title="Time Tracking"
          description={longDescription}
        />
      );

      expect(screen.getByText(longDescription)).toBeInTheDocument();
    });

    it('should render with empty description', () => {
      render(
        <FeatureCard
          icon={CheckCircle}
          title="Success Tracking"
          description=""
        />
      );

      expect(screen.getByText('Success Tracking')).toBeInTheDocument();
      // Empty description should still render the paragraph element
      const descriptionElement = screen.getByText('Success Tracking').parentElement?.querySelector('p');
      expect(descriptionElement).toBeInTheDocument();
    });
  });

  describe('Icon Rendering', () => {
    it('should render the provided icon', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Calendar Feature"
          description="Calendar description"
        />
      );

      // Check for SVG element (icons are rendered as SVG)
      const svgElement = container.querySelector('svg');
      expect(svgElement).toBeInTheDocument();
      expect(svgElement).toHaveClass('h-6', 'w-6');
    });

    it('should render different icons correctly', () => {
      const { container: container1 } = render(
        <FeatureCard
          icon={Calendar}
          title="Feature 1"
          description="Description 1"
        />
      );

      const { container: container2 } = render(
        <FeatureCard
          icon={Users}
          title="Feature 2"
          description="Description 2"
        />
      );

      // Both should have SVG elements
      expect(container1.querySelector('svg')).toBeInTheDocument();
      expect(container2.querySelector('svg')).toBeInTheDocument();
    });

    it('should apply correct icon size classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Clock}
          title="Time Feature"
          description="Time description"
        />
      );

      const svgElement = container.querySelector('svg');
      expect(svgElement).toHaveClass('h-6');
      expect(svgElement).toHaveClass('w-6');
    });
  });

  describe('Icon Colors', () => {
    it('should render with default brand color when no iconColor prop provided', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Default Color"
          description="Uses brand color by default"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-brand-100');
      expect(iconWrapper).toHaveClass('dark:bg-brand-900/30');
      expect(iconWrapper).toHaveClass('text-brand-600');
      expect(iconWrapper).toHaveClass('dark:text-brand-400');
    });

    it('should render with brand color when explicitly set', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Brand Color"
          description="Explicit brand color"
          iconColor="brand"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-brand-100');
      expect(iconWrapper).toHaveClass('text-brand-600');
    });

    it('should render with green color', () => {
      const { container } = render(
        <FeatureCard
          icon={CheckCircle}
          title="Success Feature"
          description="Green icon color"
          iconColor="green"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-green-100');
      expect(iconWrapper).toHaveClass('dark:bg-green-900/30');
      expect(iconWrapper).toHaveClass('text-green-600');
      expect(iconWrapper).toHaveClass('dark:text-green-400');
    });

    it('should render with purple color', () => {
      const { container } = render(
        <FeatureCard
          icon={Users}
          title="Purple Feature"
          description="Purple icon color"
          iconColor="purple"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-purple-100');
      expect(iconWrapper).toHaveClass('text-purple-600');
    });

    it('should render with orange color', () => {
      const { container } = render(
        <FeatureCard
          icon={AlertCircle}
          title="Warning Feature"
          description="Orange icon color"
          iconColor="orange"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-orange-100');
      expect(iconWrapper).toHaveClass('text-orange-600');
    });

    it('should render with pink color', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Pink Feature"
          description="Pink icon color"
          iconColor="pink"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-pink-100');
      expect(iconWrapper).toHaveClass('text-pink-600');
    });

    it('should render with cyan color', () => {
      const { container } = render(
        <FeatureCard
          icon={Clock}
          title="Cyan Feature"
          description="Cyan icon color"
          iconColor="cyan"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-cyan-100');
      expect(iconWrapper).toHaveClass('text-cyan-600');
    });
  });

  describe('Styling and CSS Classes', () => {
    it('should apply base card styling classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Card Styling"
          description="Testing base styles"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('group');
      expect(cardElement).toHaveClass('p-6');
      expect(cardElement).toHaveClass('bg-white');
      expect(cardElement).toHaveClass('dark:bg-gray-800');
      expect(cardElement).toHaveClass('rounded-2xl');
    });

    it('should apply border classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Border Test"
          description="Testing border styles"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('border');
      expect(cardElement).toHaveClass('border-gray-200');
      expect(cardElement).toHaveClass('dark:border-gray-700');
    });

    it('should apply hover border classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Hover Border"
          description="Testing hover border styles"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('hover:border-brand-300');
      expect(cardElement).toHaveClass('dark:hover:border-brand-700');
    });

    it('should apply shadow classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Shadow Test"
          description="Testing shadow styles"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('hover:shadow-lg');
      expect(cardElement).toHaveClass('hover:shadow-brand-600/5');
    });

    it('should apply transition classes', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Transition Test"
          description="Testing transition styles"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('transition-all');
      expect(cardElement).toHaveClass('duration-300');
    });

    it('should apply icon wrapper styling', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Icon Wrapper"
          description="Testing icon wrapper styles"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('p-3');
      expect(iconWrapper).toHaveClass('rounded-xl');
      expect(iconWrapper).toHaveClass('mb-4');
    });

    it('should apply title styling', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Title Styling"
          description="Testing title styles"
        />
      );

      const titleElement = screen.getByText('Title Styling');
      expect(titleElement).toHaveClass('text-lg');
      expect(titleElement).toHaveClass('font-semibold');
      expect(titleElement).toHaveClass('text-gray-900');
      expect(titleElement).toHaveClass('dark:text-white');
      expect(titleElement).toHaveClass('mb-2');
    });

    it('should apply title hover classes', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Hover Title"
          description="Testing title hover styles"
        />
      );

      const titleElement = screen.getByText('Hover Title');
      expect(titleElement).toHaveClass('group-hover:text-brand-600');
      expect(titleElement).toHaveClass('dark:group-hover:text-brand-400');
      expect(titleElement).toHaveClass('transition-colors');
    });

    it('should apply description styling', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Description Style"
          description="Testing description styles"
        />
      );

      const descriptionElement = screen.getByText('Testing description styles');
      expect(descriptionElement).toHaveClass('text-gray-600');
      expect(descriptionElement).toHaveClass('dark:text-gray-400');
      expect(descriptionElement).toHaveClass('leading-relaxed');
    });
  });

  describe('Hover and Animation States', () => {
    it('should have group class for hover effects', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Group Hover"
          description="Testing group hover functionality"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('group');
    });

    it('should support mouse hover interactions', async () => {
      const user = userEvent.setup();
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Mouse Hover"
          description="Testing mouse hover"
        />
      );

      const cardElement = container.firstChild as HTMLElement;

      // Hovering should not cause errors
      await user.hover(cardElement);
      expect(cardElement).toBeInTheDocument();

      // Unhovering should not cause errors
      await user.unhover(cardElement);
      expect(cardElement).toBeInTheDocument();
    });

    it('should maintain structure during hover', async () => {
      const user = userEvent.setup();
      render(
        <FeatureCard
          icon={Calendar}
          title="Structure Test"
          description="Testing structure during hover"
        />
      );

      const titleElement = screen.getByText('Structure Test');
      const descriptionElement = screen.getByText('Testing structure during hover');

      // Hover over the card
      await user.hover(titleElement.closest('.group')!);

      // Elements should still be present
      expect(titleElement).toBeInTheDocument();
      expect(descriptionElement).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should use semantic HTML heading for title', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Semantic Title"
          description="Testing semantic HTML"
        />
      );

      const titleElement = screen.getByText('Semantic Title');
      expect(titleElement.tagName).toBe('H3');
    });

    it('should use paragraph element for description', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Semantic Description"
          description="Testing paragraph element"
        />
      );

      const descriptionElement = screen.getByText('Testing paragraph element');
      expect(descriptionElement.tagName).toBe('P');
    });

    it('should maintain readable text contrast', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Contrast Test"
          description="Testing text contrast"
        />
      );

      const titleElement = screen.getByText('Contrast Test');
      const descriptionElement = screen.getByText('Testing text contrast');

      // Title should have dark text (gray-900)
      expect(titleElement).toHaveClass('text-gray-900');
      // Description should have readable gray
      expect(descriptionElement).toHaveClass('text-gray-600');
    });

    it('should be keyboard accessible when used in interactive context', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Keyboard Test"
          description="Testing keyboard accessibility"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      // Card itself is not interactive, so it shouldn't have tabIndex
      expect(cardElement).not.toHaveAttribute('tabIndex');
    });

    it('should support screen readers with proper text hierarchy', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Screen Reader Test"
          description="This is a longer description that screen readers will announce."
        />
      );

      // Check that heading comes before paragraph in DOM order
      const heading = container.querySelector('h3');
      const paragraph = container.querySelector('p');

      expect(heading).toBeInTheDocument();
      expect(paragraph).toBeInTheDocument();

      // Verify DOM order (heading should appear before paragraph)
      const headingPosition = Array.from(container.querySelectorAll('*')).indexOf(heading!);
      const paragraphPosition = Array.from(container.querySelectorAll('*')).indexOf(paragraph!);
      expect(headingPosition).toBeLessThan(paragraphPosition);
    });
  });

  describe('Dark Mode Support', () => {
    it('should include dark mode classes for card background', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Dark Mode Card"
          description="Testing dark mode"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('dark:bg-gray-800');
    });

    it('should include dark mode classes for borders', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Dark Mode Border"
          description="Testing dark mode borders"
        />
      );

      const cardElement = container.firstChild as HTMLElement;
      expect(cardElement).toHaveClass('dark:border-gray-700');
      expect(cardElement).toHaveClass('dark:hover:border-brand-700');
    });

    it('should include dark mode classes for title text', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Dark Mode Title"
          description="Testing dark mode title"
        />
      );

      const titleElement = screen.getByText('Dark Mode Title');
      expect(titleElement).toHaveClass('dark:text-white');
      expect(titleElement).toHaveClass('dark:group-hover:text-brand-400');
    });

    it('should include dark mode classes for description text', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Dark Mode Description"
          description="Testing dark mode description"
        />
      );

      const descriptionElement = screen.getByText('Testing dark mode description');
      expect(descriptionElement).toHaveClass('dark:text-gray-400');
    });

    it('should include dark mode classes for icon colors', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Dark Mode Icon"
          description="Testing dark mode icon"
          iconColor="green"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('dark:bg-green-900/30');
      expect(iconWrapper).toHaveClass('dark:text-green-400');
    });
  });

  describe('Component Props Validation', () => {
    it('should handle all required props', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Required Props"
          description="All required props provided"
        />
      );

      expect(container.firstChild).toBeInTheDocument();
      expect(screen.getByText('Required Props')).toBeInTheDocument();
      expect(screen.getByText('All required props provided')).toBeInTheDocument();
    });

    it('should handle optional iconColor prop', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Optional Props"
          description="Optional iconColor provided"
          iconColor="purple"
        />
      );

      const iconWrapper = container.querySelector('.inline-flex');
      expect(iconWrapper).toHaveClass('bg-purple-100');
    });

    it('should render correctly with minimal props', () => {
      const { container } = render(
        <FeatureCard
          icon={Calendar}
          title="Min Props"
          description="Minimal props"
        />
      );

      expect(container.firstChild).toBeInTheDocument();
    });
  });

  describe('Edge Cases', () => {
    it('should handle very long title text', () => {
      const longTitle = 'This is a very long title that might wrap to multiple lines in the card';

      render(
        <FeatureCard
          icon={Calendar}
          title={longTitle}
          description="Normal description"
        />
      );

      expect(screen.getByText(longTitle)).toBeInTheDocument();
    });

    it('should handle special characters in title', () => {
      const specialTitle = 'Special <>&"\' Characters';
      render(
        <FeatureCard
          icon={Calendar}
          title={specialTitle}
          description="Testing special chars"
        />
      );

      expect(screen.getByText(specialTitle)).toBeInTheDocument();
    });

    it('should handle special characters in description', () => {
      const specialDescription = 'Description with <>&"\' special characters';
      render(
        <FeatureCard
          icon={Calendar}
          title="Special Chars"
          description={specialDescription}
        />
      );

      expect(screen.getByText(specialDescription)).toBeInTheDocument();
    });

    it('should handle unicode characters', () => {
      render(
        <FeatureCard
          icon={Calendar}
          title="Unicode Test 你好 🎉"
          description="Description with émojis and 中文"
        />
      );

      expect(screen.getByText("Unicode Test 你好 🎉")).toBeInTheDocument();
      expect(screen.getByText("Description with émojis and 中文")).toBeInTheDocument();
    });
  });
});
