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

import ReportTemplatesShow from './Show';

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/ui/button', () => ({
  Button: ({
    children,
    variant,
  }: {
    children: React.ReactNode;
    variant?: string;
  }) => <button data-variant={variant}>{children}</button>,
}));

const mockTemplate = {
  id: 1,
  name: 'Monthly Traffic Summary',
  description: 'A comprehensive monthly traffic overview',
  sections: ['traffic_overview', 'top_pages'],
  filters: {},
  is_system: false,
  created_at: '2026-01-01T00:00:00Z',
  updated_at: '2026-01-15T00:00:00Z',
};

const mockProps = {
  template: mockTemplate,
};

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

  it('renders template name as heading', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(
      screen.getByRole('heading', { name: 'Monthly Traffic Summary' }),
    ).toBeInTheDocument();
  });

  it('renders template description', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(screen.getByText('A comprehensive monthly traffic overview')).toBeInTheDocument();
  });

  it('renders section names', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(screen.getByText('traffic overview')).toBeInTheDocument();
    expect(screen.getByText('top pages')).toBeInTheDocument();
  });

  it('renders back to templates link', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(screen.getByRole('link', { name: /Back to Templates/i })).toBeInTheDocument();
  });

  it('page title includes template name', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(document.querySelector('title')).toHaveTextContent(
      'Monthly Traffic Summary - Report Template',
    );
  });

  it('does not show system template notice for user templates', () => {
    render(<ReportTemplatesShow {...mockProps} />);
    expect(
      screen.queryByText(/cannot be modified/i),
    ).not.toBeInTheDocument();
  });

  it('shows system template notice for system templates', () => {
    render(<ReportTemplatesShow {...mockProps} template={{ ...mockTemplate, is_system: true }} />);
    expect(screen.getByText(/cannot be modified/i)).toBeInTheDocument();
  });
});