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/ai-drafts/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' })),
}));

vi.mock('@/lib/sanitize', () => ({
  sanitizeHtml: (html: string) => html,
}));

import AiDraftsShow from './Show';

const defaultDraft = {
  id: 42,
  site_id: 5,
  site_name: 'My Blog',
  site_domain: 'myblog.com',
  ai_job_id: 3,
  recommendation_id: 10,
  recommendation_action_type: 'content_rewrite',
  recommendation_page_url: 'https://myblog.com/post-1',
  recommendation_lifecycle_status: 'approved',
  model_used: 'gpt-4o',
  prompt_tokens: 600,
  completion_tokens: 400,
  status: 'completed',
  publish_status: 'unpublished',
  content: '<p>Rewritten content for the post.</p>',
  created_at: '2026-01-15T10:00:00Z',
};

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

  it('renders draft ID in heading', () => {
    render(<AiDraftsShow draft={defaultDraft} />);
    expect(screen.getByRole('heading', { name: /AI Draft #42/i, level: 1 })).toBeInTheDocument();
  });

  it('renders site name', () => {
    render(<AiDraftsShow draft={defaultDraft} />);
    expect(screen.getByText('My Blog')).toBeInTheDocument();
  });

  it('renders model_used', () => {
    render(<AiDraftsShow draft={defaultDraft} />);
    expect(screen.getByText('gpt-4o')).toBeInTheDocument();
  });

  it('renders status badge', () => {
    render(<AiDraftsShow draft={defaultDraft} />);
    expect(screen.getByText('completed')).toBeInTheDocument();
  });

  it('renders total tokens (prompt + completion)', () => {
    render(<AiDraftsShow draft={defaultDraft} />);
    // 600 + 400 = 1,000
    expect(screen.getByText('1,000')).toBeInTheDocument();
  });

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

  it('handles null content gracefully', () => {
    render(<AiDraftsShow draft={{ ...defaultDraft, content: null }} />);
    expect(screen.getByRole('heading', { name: /AI Draft #42/i, level: 1 })).toBeInTheDocument();
  });

  it('handles null model gracefully', () => {
    render(<AiDraftsShow draft={{ ...defaultDraft, model_used: null }} />);
    expect(screen.getByRole('heading', { name: /AI Draft #42/i, level: 1 })).toBeInTheDocument();
  });
});