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

import TrafficAlertsShow 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>
    ),
    router: { patch: 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/ui/badge', () => ({
  Badge: ({ children, variant }: { children: React.ReactNode; variant?: string }) => (
    <span data-testid="badge" data-variant={variant}>{children}</span>
  ),
}));

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>,
  CardHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/Components/ui/breadcrumb', () => ({
  Breadcrumb: ({ children }: { children: React.ReactNode }) => <nav>{children}</nav>,
  BreadcrumbItem: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
  BreadcrumbLink: ({ children, href }: { children: React.ReactNode; href?: string }) => (
    <a href={href}>{children}</a>
  ),
  BreadcrumbList: ({ children }: { children: React.ReactNode }) => <ol>{children}</ol>,
  BreadcrumbPage: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
  BreadcrumbSeparator: () => <span>/</span>,
}));

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

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

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

const mockAlert = {
  id: 1,
  site_id: 1,
  analysis_run_id: 1,
  severity: 'critical' as const,
  anomaly_type: 'sudden_drop' as const,
  status: 'unacknowledged' as const,
  page_url: 'https://test.com/page',
  metrics: {
    clicks_before: 100,
    clicks_after: 50,
    delta_percent: -50,
    impressions_before: 1000,
    impressions_after: 500,
    ctr_before: 0.1,
    ctr_after: 0.1,
    position_before: 3,
    position_after: 5,
  },
  acknowledged_at: null,
  dismissed_at: null,
  created_at: '2026-01-15T10:00:00Z',
};

const mockProps = {
  site: { id: 1, name: 'Test Site', domain: 'https://test.com' },
  alert: mockAlert,
};

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

  it('renders page heading with site name', () => {
    render(<TrafficAlertsShow {...mockProps} />);
    expect(screen.getByRole('heading', { name: /Traffic Alert/i })).toBeInTheDocument();
  });

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

  it('displays page URL', () => {
    render(<TrafficAlertsShow {...mockProps} />);
    expect(screen.getByText('https://test.com/page')).toBeInTheDocument();
  });

  it('displays Sudden Drop label for sudden_drop anomaly type', () => {
    render(<TrafficAlertsShow {...mockProps} />);
    expect(screen.getAllByText('Sudden Drop').length).toBeGreaterThanOrEqual(1);
  });

  it('displays Critical severity label', () => {
    render(<TrafficAlertsShow {...mockProps} />);
    expect(screen.getAllByText('Critical').length).toBeGreaterThanOrEqual(1);
  });

  it('shows acknowledge button when alert is unacknowledged', () => {
    render(<TrafficAlertsShow {...mockProps} />);
    expect(screen.getByRole('button', { name: /acknowledge/i })).toBeInTheDocument();
  });

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