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

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

import DeviceDetail from './Detail';

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

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

const mockProps = {
  site: {
    id: 1,
    name: 'Test Site',
    domain: 'example.com',
  },
  device: 'MOBILE',
  pages: [
    {
      page: 'https://example.com/page1',
      clicks: 1000,
      impressions: 10000,
      ctr: 0.1,
      position: 5.5,
    },
  ],
  queries: [
    {
      query: 'test query',
      clicks: 500,
      impressions: 5000,
      ctr: 0.1,
      position: 3.2,
    },
  ],
};

describe('DeviceDetail', () => {
  beforeEach(() => {
    (usePage as ReturnType<typeof vi.fn>).mockReturnValue({ props: {} });
  });

  it('renders page with device name in title', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getByText('MOBILE Performance')).toBeInTheDocument();
  });

  it('displays pages table with data', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getByText('Top Pages')).toBeInTheDocument();
    expect(screen.getByText('https://example.com/page1')).toBeInTheDocument();
    expect(screen.getByText('1,000')).toBeInTheDocument(); // formatted clicks
  });

  it('displays queries table with data', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getByText('Top Queries')).toBeInTheDocument();
    expect(screen.getByText('test query')).toBeInTheDocument();
    expect(screen.getByText('500')).toBeInTheDocument();
  });

  it('shows back button with correct link', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getByText('Back to Device Dashboard')).toBeInTheDocument();
  });

  it('displays empty state for pages when no data', () => {
    const propsWithoutPages = { ...mockProps, pages: [] };
    render(<DeviceDetail {...propsWithoutPages} />);
    expect(screen.getByText('No page data available')).toBeInTheDocument();
  });

  it('displays empty state for queries when no data', () => {
    const propsWithoutQueries = { ...mockProps, queries: [] };
    render(<DeviceDetail {...propsWithoutQueries} />);
    expect(screen.getByText('No query data available')).toBeInTheDocument();
  });

  it('formats CTR as percentage', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getAllByText('10.00%')).toHaveLength(2); // Once in pages, once in queries
  });

  it('formats position with 2 decimals', () => {
    render(<DeviceDetail {...mockProps} />);
    expect(screen.getByText('5.50')).toBeInTheDocument();
    expect(screen.getByText('3.20')).toBeInTheDocument();
  });

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

  it('uses DashboardLayout', () => {
    // Verify layout property exists
    expect(DeviceDetail.layout).toBeDefined();
  });
});