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

import ContentHistoryIndex from './Index';

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
      <a href={href}>{children}</a>
    ),
  };
});

vi.mock('@/Layouts/DashboardLayout', () => ({
  default: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="dashboard-layout">{children}</div>
  ),
}));

vi.mock('@/Components/Navigation/SiteNav', () => ({
  default: () => <div data-testid="site-nav" />,
}));

vi.mock('@/Components/ContentHistory/SnapshotList', () => ({
  default: ({ snapshots }: { snapshots: unknown[] }) => (
    <div data-testid="snapshot-list" data-count={snapshots.length} />
  ),
}));

vi.mock('@/Components/ContentHistory/RollbackConfirmModal', () => ({
  default: () => <div data-testid="rollback-modal" />,
}));

vi.mock('@/Components/ui/button', () => ({
  Button: ({
    children,
    asChild,
  }: {
    children: React.ReactNode;
    asChild?: boolean;
  }) => (asChild ? <>{children}</> : <button>{children}</button>),
}));

const mockProps = {
  site: { id: 1, name: 'Test Site', domain: 'https://test.com' },
  wpPost: {
    id: 1,
    wp_post_id: 42,
    url: 'https://test.com/article',
    title: 'My Article',
    content: 'Content here',
    meta_description: null,
    seo_meta_title: null,
    post_status: 'publish',
    wp_modified_at: '2026-01-01T00:00:00Z',
  },
  snapshots: [
    {
      id: 1,
      title: 'My Article',
      content: 'Content here',
      meta_description: null,
      seo_meta_title: null,
      seo_robots: null,
      categories: null,
      tags: null,
      wp_post_status: 'publish',
      wp_modified_at: '2026-01-01T00:00:00Z',
      created_at: '2026-01-01T12:00:00Z',
    },
  ],
  currentMetrics: null,
};

describe('ContentHistory/Index', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.stubGlobal('route', vi.fn((...args: string[]) => `/mock-route/${args[0]}`));
  });

  it('renders page title with site and post name', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    expect(document.querySelector('title')).toHaveTextContent('Test Site - Content History - My Article');
  });

  it('renders the Content History heading', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    expect(screen.getByRole('heading', { name: 'Content History' })).toBeInTheDocument();
  });

  it('renders the wp post title and URL', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    expect(screen.getByText('My Article')).toBeInTheDocument();
    expect(screen.getByText('https://test.com/article')).toBeInTheDocument();
  });

  it('renders the snapshot list with correct snapshot count', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    const snapshotList = screen.getByTestId('snapshot-list');
    expect(snapshotList).toBeInTheDocument();
    expect(snapshotList).toHaveAttribute('data-count', '1');
  });

  it('renders SiteNav', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    expect(screen.getByTestId('site-nav')).toBeInTheDocument();
  });

  it('renders back to content inventory link', () => {
    render(<ContentHistoryIndex {...mockProps} />);
    const link = screen.getByRole('link', { name: /Back to Content Inventory/i });
    expect(link).toBeInTheDocument();
  });

  it('assigns DashboardLayout as layout', () => {
    expect(ContentHistoryIndex.layout).toBeDefined();
  });

  it('handles empty snapshots', () => {
    render(<ContentHistoryIndex {...mockProps} snapshots={[]} />);
    const snapshotList = screen.getByTestId('snapshot-list');
    expect(snapshotList).toHaveAttribute('data-count', '0');
  });
});