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

import ReportsIndex 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>
    ),
    router: { get: vi.fn(), delete: vi.fn() },
  };
});

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/Shared/InertiaPagination', () => ({
  default: () => <div data-testid="pagination" />,
}));

vi.mock('@/Components/ui/badge', () => ({
  Badge: ({ children, variant }: { children: React.ReactNode; variant?: string }) => (
    <span data-testid="badge" data-variant={variant}>{children}</span>
  ),
}));

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

vi.mock('@/Components/ui/card', () => ({
  Card: ({ children }: { children: React.ReactNode }) => <div data-testid="card">{children}</div>,
  CardContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/Components/ui/confirm-dialog', () => ({
  ConfirmDialog: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/Components/ui/empty-state', () => ({
  EmptyState: ({ title }: { title: string }) => <div data-testid="empty-state">{title}</div>,
}));

vi.mock('@/Components/ui/input', () => ({
  Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
}));

vi.mock('@/Components/ui/sheet', () => ({
  Sheet: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SheetContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SheetHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SheetTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SheetTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/lib/analytics', () => ({
  trackProductEvent: vi.fn(),
}));

vi.mock('@/lib/format', () => ({
  formatNumber: (n: number) => String(n),
  formatDate: (d: string) => d,
}));

vi.mock('sonner', () => ({
  toast: { success: vi.fn(), error: vi.fn() },
}));

const mockReport = {
  id: 1,
  name: 'Monthly Traffic Report',
  status: 'completed',
  sections: ['traffic_overview', 'top_pages'],
  generated_at: '2026-01-15T10:00:00Z',
  created_at: '2026-01-15T09:00:00Z',
  has_pdf: false,
};

const mockProps = {
  site: { id: 1, name: 'Test Site', domain: 'https://test.com' },
  reports: [mockReport],
  filters: { status: null, search: null, sort: null },
  counts: { total: 1, pending: 0, processing: 0, completed: 1, failed: 0 },
  pagination: {
    current_page: 1,
    last_page: 1,
    per_page: 20,
    total: 1,
    links: [
      { url: null, label: '&laquo; Previous', active: false },
      { url: '/reports?page=1', label: '1', active: true },
      { url: null, label: 'Next &raquo;', active: false },
    ],
  },
};

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

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

  it('renders report cards when reports exist', () => {
    render(<ReportsIndex {...mockProps} />);
    expect(screen.getAllByTestId('card').length).toBeGreaterThanOrEqual(1);
    expect(screen.getByText('Monthly Traffic Report')).toBeInTheDocument();
  });

  it('shows empty state when no reports', () => {
    render(<ReportsIndex {...mockProps} reports={[]} />);
    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
  });

  it('renders inside DashboardLayout', () => {
    render(<ReportsIndex {...mockProps} />);
    // DashboardLayout is used inline (not via layout property)
    expect(screen.getByTestId('site-nav')).toBeInTheDocument();
  });
});