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

import React from 'react';

import { usePage, router } from '@inertiajs/react';

import { TooltipProvider } from '@/Components/ui/tooltip';

import ContentInventory from './ContentInventory';

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    usePage: vi.fn(() => ({
      props: {
        auth: {
          user: {
            name: 'Test User',
            email: 'test@example.com',
          },
        },
        features: {
          notifications: false,
        },
      },
      url: '/sites/1/content-inventory',
    })),
    router: {
      get: vi.fn(),
      on: vi.fn(() => () => {}),
    },
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
      <a href={href}>{children}</a>
    ),
  };
});

// Mock the useTheme hook to avoid needing ThemeProvider
vi.mock('@/Components/theme/use-theme', () => ({
  useTheme: vi.fn(() => ({
    theme: 'system',
    setTheme: vi.fn(),
    resolvedTheme: 'light',
  })),
}));

// Mock the route helper
global.route = vi.fn((name: string, params?: unknown) => {
  if (name === 'content-inventory.index') {
    return `/sites/${params}/content-inventory`;
  }
  if (name === 'onboarding.index') {
    return `/sites/${params}/onboarding`;
  }
  return '/';
}) as typeof route;

const mockedUsePage = vi.mocked(usePage);
const mockedRouter = vi.mocked(router);

const mockSite = {
  id: 1,
  name: 'Test Site',
  domain: 'example.com',
};

const mockPosts = [
  {
    id: 1,
    wp_post_id: 101,
    title: 'First Test Post',
    url: 'https://example.com/first-post',
    post_type: 'post',
    post_status: 'publish',
    wp_modified_at: '2024-01-15T10:30:00Z',
    word_count: 1500,
    flesch_kincaid_grade: 8.5,
    avg_sentence_length: 15.2,
    paragraph_count: 12,
    passive_voice_percentage: 5.5,
    h1_count: 1,
    h2_count: 5,
    h3_count: 8,
    h4_count: 2,
    h5_count: 0,
    h6_count: 0,
    image_count: 3,
    internal_link_count: 10,
    external_link_count: 5,
  },
  {
    id: 2,
    wp_post_id: 102,
    title: 'Second Test Post',
    url: 'https://example.com/second-post',
    post_type: 'page',
    post_status: 'draft',
    wp_modified_at: '2024-01-20T14:45:00Z',
    word_count: 2000,
    flesch_kincaid_grade: 10.2,
    avg_sentence_length: 18.5,
    paragraph_count: 15,
    passive_voice_percentage: 8.0,
    h1_count: 1,
    h2_count: 3,
    h3_count: 5,
    h4_count: 0,
    h5_count: 0,
    h6_count: 0,
    image_count: 5,
    internal_link_count: 8,
    external_link_count: 3,
  },
];

const mockPaginatedPosts = {
  data: mockPosts,
  links: [
    { url: null, label: '&laquo; Previous', active: false },
    { url: '/sites/1/content-inventory?page=1', label: '1', active: true },
    { url: null, label: 'Next &raquo;', active: false },
  ],
  current_page: 1,
  last_page: 1,
};

const mockFilters = {
  post_type: null,
  post_status: null,
  search: null,
  sort_by: 'wp_modified_at',
  sort_direction: 'desc',
};

const mockPostTypeCounts = {
  post: 1,
  page: 1,
};

const mockPostStatusCounts = {
  publish: 1,
  draft: 1,
};

const defaultProps = {
  site: mockSite,
  posts: mockPaginatedPosts,
  filters: mockFilters,
  postTypeCounts: mockPostTypeCounts,
  postStatusCounts: mockPostStatusCounts,
  totalPosts: 2,
  has_wp: true,
};

// Wrapper to provide TooltipProvider
const renderWithTooltipProvider = (ui: React.ReactElement) => {
  return render(<TooltipProvider delayDuration={0}>{ui}</TooltipProvider>);
};

describe('ContentInventory', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    mockedUsePage.mockReturnValue({
      props: {
        auth: {
          user: {
            name: 'Test User',
            email: 'test@example.com',
          },
        },
        features: {
          notifications: false,
        },
      },
      url: '/sites/1/content-inventory',
    } as unknown as ReturnType<typeof usePage>);
  });

  // ============================================
  // Rendering tests
  // ============================================

  describe('rendering', () => {
    it('renders the content inventory page', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('Content Inventory')).toBeInTheDocument();
    });

    it('sets the page title with site name', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(document.querySelector('title')).toHaveTextContent('Test Site - Content Inventory');
    });

    it('renders SiteNav component', () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      // SiteNav should be rendered (check for container with py-6 class)
      expect(container.querySelector('.container.py-6')).toBeInTheDocument();
    });
  });

  // ============================================
  // Empty states tests
  // ============================================

  describe('empty states', () => {
    it('renders Connect WordPress empty state when no posts and no WP connection', () => {
      const emptyProps = {
        ...defaultProps,
        posts: { ...mockPaginatedPosts, data: [] },
        totalPosts: 0,
        has_wp: false,
      };

      renderWithTooltipProvider(<ContentInventory {...emptyProps} />);

      expect(
        screen.getByRole('heading', { level: 3, name: 'Connect WordPress' }),
      ).toBeInTheDocument();
      expect(
        screen.getByText('RankWiz needs WordPress access to score your content quality.'),
      ).toBeInTheDocument();
      const cta = screen.getByRole('link', { name: 'Connect WordPress' });
      expect(cta).toHaveAttribute('href', '/sites/1/onboarding');
    });

    it('renders No content yet empty state when WP is connected but inventory is empty', () => {
      const emptyProps = {
        ...defaultProps,
        posts: { ...mockPaginatedPosts, data: [] },
        totalPosts: 0,
        has_wp: true,
      };

      renderWithTooltipProvider(<ContentInventory {...emptyProps} />);

      expect(screen.getByText('No content yet')).toBeInTheDocument();
      expect(
        screen.getByText(
          'Your WordPress site is connected — content will appear after the next sync.',
        ),
      ).toBeInTheDocument();
      const cta = screen.getByRole('link', { name: 'Check sync status' });
      expect(cta).toHaveAttribute('href', '/sites/1/onboarding');
    });

    it('renders no matching filters empty state', () => {
      const emptyFilterProps = {
        ...defaultProps,
        posts: { ...mockPaginatedPosts, data: [] },
        totalPosts: 2,
      };

      renderWithTooltipProvider(<ContentInventory {...emptyFilterProps} />);

      expect(screen.getByText('No posts match filters')).toBeInTheDocument();
      expect(screen.getByText('Try adjusting your filters or search query.')).toBeInTheDocument();
    });

    it('does not render filters when no content exists', () => {
      const emptyProps = {
        ...defaultProps,
        posts: { ...mockPaginatedPosts, data: [] },
        totalPosts: 0,
      };

      renderWithTooltipProvider(<ContentInventory {...emptyProps} />);

      expect(screen.queryByPlaceholderText('Search by title or URL...')).not.toBeInTheDocument();
    });
  });

  // ============================================
  // Table rendering tests
  // ============================================

  describe('table rendering', () => {
    it('renders posts table with correct headers', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('Title')).toBeInTheDocument();
      expect(screen.getByText('Type')).toBeInTheDocument();
      expect(screen.getByText('Status')).toBeInTheDocument();
      expect(screen.getByText('Words')).toBeInTheDocument();
      expect(screen.getByText('Reading Level')).toBeInTheDocument();
      expect(screen.getByText('Modified')).toBeInTheDocument();
      expect(screen.getByText('Actions')).toBeInTheDocument();
    });

    it('renders all posts in the table', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('First Test Post')).toBeInTheDocument();
      expect(screen.getByText('Second Test Post')).toBeInTheDocument();
    });

    it('renders post URLs as external links', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const firstPostLink = screen.getByRole('link', {
        name: /https:\/\/example\.com\/first-post/i,
      });
      expect(firstPostLink).toHaveAttribute('href', 'https://example.com/first-post');
      expect(firstPostLink).toHaveAttribute('target', '_blank');
      expect(firstPostLink).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('renders post type badges', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('post')).toBeInTheDocument();
      expect(screen.getByText('page')).toBeInTheDocument();
    });

    it('renders post status badges', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('publish')).toBeInTheDocument();
      expect(screen.getByText('draft')).toBeInTheDocument();
    });

    it('renders word count with formatting', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('1,500')).toBeInTheDocument();
      expect(screen.getByText('2,000')).toBeInTheDocument();
    });

    it('renders reading level with grade format', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('Grade 8.5')).toBeInTheDocument();
      expect(screen.getByText('Grade 10.2')).toBeInTheDocument();
    });

    it('renders N/A for null values', () => {
      const postsWithNulls = {
        ...defaultProps,
        posts: {
          ...mockPaginatedPosts,
          data: [
            {
              ...mockPosts[0],
              word_count: null,
              flesch_kincaid_grade: null,
              wp_modified_at: null,
            },
          ],
        },
      };

      renderWithTooltipProvider(<ContentInventory {...postsWithNulls} />);

      const naTexts = screen.getAllByText('N/A');
      expect(naTexts.length).toBeGreaterThan(0);
    });

    it('renders View Details button for each post', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      expect(viewButtons).toHaveLength(2);
    });

    it('truncates long titles', () => {
      const longTitle =
        'This is a very long title that should be truncated after sixty characters to avoid layout issues';
      const longTitlePosts = {
        ...defaultProps,
        posts: {
          ...mockPaginatedPosts,
          data: [
            {
              ...mockPosts[0],
              title: longTitle,
            },
          ],
        },
      };

      renderWithTooltipProvider(<ContentInventory {...longTitlePosts} />);

      // Button should have title attribute with full title
      const button = screen.getByRole('button', { name: /This is a very long title/ });
      expect(button).toHaveAttribute('title', longTitle);
      // Button text should be truncated (ending with ...)
      expect(button.textContent).toContain('...');
      expect(button.textContent!.length).toBeLessThan(longTitle.length);
    });
  });

  // ============================================
  // Filter tests
  // ============================================

  describe('filters', () => {
    it('renders search input', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByPlaceholderText('Search by title or URL...')).toBeInTheDocument();
    });

    it('renders post type filter buttons', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText(`All Types (${defaultProps.totalPosts})`)).toBeInTheDocument();
      expect(screen.getByText('post (1)')).toBeInTheDocument();
      expect(screen.getByText('page (1)')).toBeInTheDocument();
    });

    it('renders post status filter buttons', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(screen.getByText('All Statuses')).toBeInTheDocument();
      expect(screen.getByText('publish (1)')).toBeInTheDocument();
      expect(screen.getByText('draft (1)')).toBeInTheDocument();
    });

    it('calls router.get when post type filter is clicked', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const postButton = screen.getByText('post (1)');
      fireEvent.click(postButton);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, post_type: 'post' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('calls router.get when post status filter is clicked', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const draftButton = screen.getByText('draft (1)');
      fireEvent.click(draftButton);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, post_status: 'draft' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('calls router.get when search form is submitted', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const searchInput = screen.getByPlaceholderText('Search by title or URL...');
      const form = searchInput.closest('form') as HTMLFormElement;

      fireEvent.change(searchInput, { target: { value: 'test search' } });
      fireEvent.submit(form);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, search: 'test search' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('sends null when search is empty', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const searchInput = screen.getByPlaceholderText('Search by title or URL...');
      const form = searchInput.closest('form') as HTMLFormElement;

      fireEvent.change(searchInput, { target: { value: '' } });
      fireEvent.submit(form);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, search: null },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('highlights active post type filter', () => {
      const filteredProps = {
        ...defaultProps,
        filters: { ...mockFilters, post_type: 'post' },
      };

      renderWithTooltipProvider(<ContentInventory {...filteredProps} />);

      const postButton = screen.getByText('post (1)');
      expect(postButton.closest('button')).toHaveClass('bg-primary');
    });

    it('highlights active post status filter', () => {
      const filteredProps = {
        ...defaultProps,
        filters: { ...mockFilters, post_status: 'publish' },
      };

      renderWithTooltipProvider(<ContentInventory {...filteredProps} />);

      const publishButton = screen.getByText('publish (1)');
      expect(publishButton.closest('button')).toHaveClass('bg-primary');
    });
  });

  // ============================================
  // Sorting tests
  // ============================================

  describe('sorting', () => {
    it('calls router.get when sorting by title', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const titleHeader = screen.getByText('Title').closest('button') as HTMLButtonElement;
      fireEvent.click(titleHeader);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, sort_by: 'title', sort_direction: 'desc' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('calls router.get when sorting by word count', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const wordsHeader = screen.getByText('Words').closest('button') as HTMLButtonElement;
      fireEvent.click(wordsHeader);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, sort_by: 'word_count', sort_direction: 'desc' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('calls router.get when sorting by reading level', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const readingLevelHeader = screen
        .getByText('Reading Level')
        .closest('button') as HTMLButtonElement;
      fireEvent.click(readingLevelHeader);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, sort_by: 'flesch_kincaid_grade', sort_direction: 'desc' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('calls router.get when sorting by modified date', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const modifiedHeader = screen.getByText('Modified').closest('button') as HTMLButtonElement;
      fireEvent.click(modifiedHeader);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...mockFilters, sort_by: 'wp_modified_at', sort_direction: 'asc' },
        { preserveState: true, preserveScroll: true },
      );
    });

    it('toggles sort direction when clicking same column', () => {
      const sortedProps = {
        ...defaultProps,
        filters: { ...mockFilters, sort_by: 'title', sort_direction: 'desc' },
      };

      renderWithTooltipProvider(<ContentInventory {...sortedProps} />);

      const titleHeader = screen.getByText('Title').closest('button') as HTMLButtonElement;
      fireEvent.click(titleHeader);

      expect(mockedRouter.get).toHaveBeenCalledWith(
        '/sites/1/content-inventory',
        { ...sortedProps.filters, sort_by: 'title', sort_direction: 'asc' },
        { preserveState: true, preserveScroll: true },
      );
    });
  });

  // ============================================
  // Pagination tests
  // ============================================

  describe('pagination', () => {
    it('renders pagination component', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      // Check for pagination by looking for navigation - page 1 should have disabled Previous
      const allButtons = screen.getAllByRole('button');
      expect(allButtons.length).toBeGreaterThan(0);
    });

    it('does not render pagination when no posts match filters', () => {
      const emptyFilterProps = {
        ...defaultProps,
        posts: { ...mockPaginatedPosts, data: [] },
      };

      renderWithTooltipProvider(<ContentInventory {...emptyFilterProps} />);

      // Pagination should not be rendered
      expect(screen.queryByText('Previous')).not.toBeInTheDocument();
    });
  });

  // ============================================
  // Post details modal tests
  // ============================================

  describe('post details modal', () => {
    it('opens modal when clicking post title', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const postTitle = screen.getByText('First Test Post');
      fireEvent.click(postTitle);

      await waitFor(() => {
        // Modal should show the full title
        const modalTitles = screen.getAllByText('First Test Post');
        expect(modalTitles.length).toBeGreaterThan(1);
      });
    });

    it('opens modal when clicking View Details button', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        expect(screen.getByText('View Page')).toBeInTheDocument();
      });
    });

    it('displays post metadata in modal', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        expect(screen.getByText('WP Post ID')).toBeInTheDocument();
        expect(screen.getByText('101')).toBeInTheDocument();
      });
    });

    it('displays QualityScoresCard in modal', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        expect(screen.getByText('Readability')).toBeInTheDocument();
        expect(screen.getByText('Content Structure')).toBeInTheDocument();
      });
    });

    it('closes modal when clicking Close button', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        const closeButton = screen.getByText('Close');
        fireEvent.click(closeButton);
      });

      await waitFor(() => {
        // Modal should be closed - check that View Page link is not visible
        expect(screen.queryByText('View Page')).not.toBeInTheDocument();
      });
    });

    it('closes modal when clicking backdrop', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        const backdrop = document.querySelector('.fixed.inset-0.z-50') as HTMLElement;
        fireEvent.click(backdrop);
      });

      await waitFor(() => {
        expect(screen.queryByText('View Page')).not.toBeInTheDocument();
      });
    });

    it('does not close modal when clicking modal content', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        const modalContent = document.querySelector('.fixed.right-0.top-0') as HTMLElement;
        fireEvent.click(modalContent);
      });

      // Modal should still be open
      expect(screen.getByText('View Page')).toBeInTheDocument();
    });

    it('displays View Page link in modal', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const viewButtons = screen.getAllByText('View Details');
      fireEvent.click(viewButtons[0]);

      await waitFor(() => {
        const viewPageLink = screen.getByText('View Page');
        expect(viewPageLink.closest('a')).toHaveAttribute('href', 'https://example.com/first-post');
        expect(viewPageLink.closest('a')).toHaveAttribute('target', '_blank');
      });
    });
  });

  // ============================================
  // Layout integration tests
  // ============================================

  describe('layout integration', () => {
    it('uses DashboardLayout', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      // ContentInventory should have a layout defined
      expect(ContentInventory.layout).toBeDefined();
    });

    it('renders within container with proper spacing', () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(container.querySelector('.container.py-6')).toBeInTheDocument();
    });
  });

  // ============================================
  // Accessibility tests
  // ============================================

  describe('accessibility', () => {
    it('sets the page title with site name', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      expect(document.querySelector('title')).toHaveTextContent('Test Site - Content Inventory');
    });

    it('renders external links with proper attributes', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const externalLinks = screen.getAllByRole('link', { name: /https:\/\/example\.com/ });
      externalLinks.forEach((link) => {
        expect(link).toHaveAttribute('target', '_blank');
        expect(link).toHaveAttribute('rel', 'noopener noreferrer');
      });
    });

    it('provides title attribute for truncated titles', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const firstPostButton = screen.getByText('First Test Post');
      expect(firstPostButton).toHaveAttribute('title', 'First Test Post');
    });
  });

  // ============================================
  // Responsive expandable row details tests
  // ============================================

  describe('responsive expandable row details', () => {
    it('renders expand button with correct responsive classes', () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      expect(expandButtons.length).toBeGreaterThan(0);

      // Button should be in a cell with lg:hidden class
      const buttonCell = expandButtons[0].closest('td');
      expect(buttonCell).toHaveClass('lg:hidden');
    });

    it('expands row details when expand button is clicked', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // Should show expanded row with details - multiple instances exist (header + expanded content)
        expect(screen.getAllByText('Words').length).toBeGreaterThan(1);
        expect(screen.getAllByText('Reading Level').length).toBeGreaterThan(1);
      });
    });

    it('shows hidden column data in expanded row', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // Verify the data is displayed - looking for specific values from mockPosts[0]
        const words = screen.getAllByText('1,500');
        const readingLevel = screen.getAllByText('Grade 8.5');

        expect(words.length).toBeGreaterThan(0);
        expect(readingLevel.length).toBeGreaterThan(0);
      });
    });

    it('shows Type and Status in expanded row on mobile', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // Type and Status appear multiple times (once in badges, once in expanded section)
        const typeLabels = screen.getAllByText('Type');
        const statusLabels = screen.getAllByText('Status');

        expect(typeLabels.length).toBeGreaterThan(0);
        expect(statusLabels.length).toBeGreaterThan(0);
      });
    });

    it('rotates chevron icon when row is expanded', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      const chevron = expandButtons[0].querySelector('svg');

      expect(chevron).not.toHaveClass('rotate-180');

      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        expect(chevron).toHaveClass('rotate-180');
      });
    });

    it('collapses row when expand button is clicked again', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });

      // Expand
      fireEvent.click(expandButtons[0]);
      await waitFor(() => {
        // When expanded, Words appears in header and expanded content
        expect(screen.getAllByText('Words').length).toBeGreaterThan(1);
      });

      // Collapse
      const collapseButton = screen.getByRole('button', { name: /collapse details/i });
      fireEvent.click(collapseButton);

      await waitFor(() => {
        // When collapsed, Words only appears in the header
        const wordsLabels = screen.getAllByText('Words');
        // Should only have the header, not the expanded section
        expect(wordsLabels.length).toBe(1);
      });
    });

    it('expanded row content is in a Card component', async () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // The expanded content should be in a Card (shadow-none and border-0 classes)
        const card = container.querySelector('.shadow-none.border-0');
        expect(card).toBeInTheDocument();
      });
    });

    it('only one row can be expanded at a time', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });

      // Expand first row
      fireEvent.click(expandButtons[0]);
      await waitFor(() => {
        // Should have expanded content for first post
        expect(screen.getAllByText('1,500').length).toBeGreaterThan(0);
      });

      // Expand second row - first should collapse
      fireEvent.click(expandButtons[1]);
      await waitFor(() => {
        // Should now have expanded content for second post
        expect(screen.getAllByText('2,000').length).toBeGreaterThan(0);
        // First post's unique data should not be in expanded state anymore
        // (but still appears in the table cell)
      });
    });

    it('expanded row does not have bottom border on main row', async () => {
      renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });

      // Expand
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // When expanded, the chevron should be rotated (indicating expanded state)
        const chevron = expandButtons[0].querySelector('svg');
        expect(chevron).toHaveClass('rotate-180');
      });
    });

    it('expanded detail row has lg:hidden class', async () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // Find the expanded detail row's cell
        const detailCells = container.querySelectorAll('td[colspan="8"]');
        const detailCell = Array.from(detailCells).find((cell) =>
          cell.classList.contains('lg:hidden'),
        );

        expect(detailCell).toBeInTheDocument();
      });
    });

    it('hidden columns have correct responsive classes in table header', () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const headers = container.querySelectorAll('thead th');

      // Type and Status should be hidden md:table-cell
      const typeHeader = Array.from(headers).find((h) => h.textContent?.includes('Type'));
      const statusHeader = Array.from(headers).find((h) => h.textContent?.includes('Status'));

      expect(typeHeader).toHaveClass('hidden', 'md:table-cell');
      expect(statusHeader).toHaveClass('hidden', 'md:table-cell');

      // Words and Reading Level should be hidden lg:table-cell
      const wordsHeader = Array.from(headers).find((h) => h.textContent?.includes('Words'));
      const readingLevelHeader = Array.from(headers).find((h) =>
        h.textContent?.includes('Reading Level'),
      );

      expect(wordsHeader).toHaveClass('hidden', 'lg:table-cell');
      expect(readingLevelHeader).toHaveClass('hidden', 'lg:table-cell');
    });

    it('hidden columns have correct responsive classes in table cells', () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const rows = container.querySelectorAll('tbody tr');
      const firstDataRow = rows[0];
      const cells = firstDataRow.querySelectorAll('td');

      // Find cells with hidden responsive classes
      const mdHiddenCells = Array.from(cells).filter(
        (cell) => cell.classList.contains('hidden') && cell.classList.contains('md:table-cell'),
      );
      const lgHiddenCells = Array.from(cells).filter(
        (cell) => cell.classList.contains('hidden') && cell.classList.contains('lg:table-cell'),
      );

      // Should have 2 md:hidden cells (Type, Status)
      expect(mdHiddenCells.length).toBe(2);

      // Should have 2 lg:hidden cells (Words, Reading Level)
      expect(lgHiddenCells.length).toBe(2);
    });

    it('expanded row content has correct layout classes', async () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // The expanded content should use grid-cols-2
        const grid = container.querySelector('.grid-cols-2');
        expect(grid).toBeInTheDocument();
      });
    });

    it('Type and Status in expanded row have md:hidden class', async () => {
      const { container } = renderWithTooltipProvider(<ContentInventory {...defaultProps} />);

      const expandButtons = screen.getAllByRole('button', { name: /expand details/i });
      fireEvent.click(expandButtons[0]);

      await waitFor(() => {
        // Find the Type and Status divs in the expanded section
        const expandedSections = container.querySelectorAll('.md\\:hidden');

        // Should have divs with md:hidden for Type and Status in expanded row
        const typeSection = Array.from(expandedSections).some((div) => {
          const text = div.textContent;
          return text?.includes('Type') && text?.includes('post');
        });

        const statusSection = Array.from(expandedSections).some((div) => {
          const text = div.textContent;
          return text?.includes('Status') && text?.includes('publish');
        });

        expect(typeSection).toBe(true);
        expect(statusSection).toBe(true);
      });
    });
  });
});