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

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    usePage: vi.fn(() => ({
      url: '/admin/recommendations/1',
      props: {
        auth: { user: { name: 'Admin', email: 'admin@test.com', is_admin: true } },
        features: {
          billing: false,
          socialAuth: false,
          emailVerification: true,
          apiTokens: true,
          userSettings: true,
          notifications: false,
          admin: true,
        },
      },
    })),
    Link: ({
      children,
      href,
      ...rest
    }: {
      children: React.ReactNode;
      href: string;
      className?: string;
    }) => (
      <a href={href} {...rest}>
        {children}
      </a>
    ),
    router: {
      patch: vi.fn(),
      delete: vi.fn(),
      post: vi.fn(),
      get: vi.fn(),
      on: vi.fn(() => vi.fn()),
    },
  };
});

vi.mock('@/Components/theme/use-theme', () => ({
  useTheme: vi.fn(() => ({ theme: 'system', setTheme: vi.fn(), resolvedTheme: 'light' })),
}));

import RecommendationsShow from './Show';

const defaultRec = {
  id: 7,
  site_id: 5,
  site_name: 'My Blog',
  site_domain: 'myblog.com',
  analysis_run_id: 3,
  page_url: 'https://myblog.com/post-1',
  action_type: 'content_rewrite',
  impact_score: '7.50',
  lifecycle_status: 'approved',
  roi_performance_multiplier: null,
  finding: {
    id: 20,
    dimension_type: 'page',
    metrics_before: { clicks: 100, impressions: 2000, ctr: 0.05, position: 12 },
    metrics_after: { clicks: 140, impressions: 2200, ctr: 0.064, position: 9 },
  },
  ai_drafts: [
    {
      id: 30,
      status: 'completed',
      model_used: 'gpt-4o',
      prompt_tokens: 500,
      completion_tokens: 350,
      created_at: '2026-01-15T11:00:00Z',
    },
  ],
  created_at: '2026-01-15T10:00:00Z',
};

describe('RecommendationsShow', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders recommendation ID in heading', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    expect(screen.getByRole('heading', { name: /Recommendation #7/i, level: 1 })).toBeInTheDocument();
  });

  it('renders action type', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    // action_type is displayed with underscores replaced by spaces
    expect(screen.getByText('content rewrite')).toBeInTheDocument();
  });

  it('renders lifecycle status badge', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    expect(screen.getByText('approved')).toBeInTheDocument();
  });

  it('renders page URL', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    expect(screen.getByText('https://myblog.com/post-1')).toBeInTheDocument();
  });

  it('renders site name', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    expect(screen.getByText('My Blog')).toBeInTheDocument();
  });

  it('renders associated AI draft', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    expect(screen.getByText('gpt-4o')).toBeInTheDocument();
  });

  it('shows empty AI drafts state when no drafts', () => {
    render(<RecommendationsShow recommendation={{ ...defaultRec, ai_drafts: [] }} />);
    expect(screen.getByText('No drafts generated')).toBeInTheDocument();
  });

  it('renders finding dimension_type', () => {
    render(<RecommendationsShow recommendation={defaultRec} />);
    // Use getAllByText since 'page' could appear in pagination; just verify at least one occurrence
    expect(screen.getAllByText('page').length).toBeGreaterThanOrEqual(1);
  });
});