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

// Recharts mocks — prevent canvas-related errors in jsdom
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  BarChart: ({ children }: { children: React.ReactNode }) => <div data-testid="bar-chart">{children}</div>,
  Bar: () => null,
  XAxis: () => null,
  YAxis: () => null,
  CartesianGrid: () => null,
  Tooltip: () => null,
}));

import AiDraftsIndex from './Index';

const makePagination = <T,>(data: T[]) => ({
  data,
  current_page: 1,
  per_page: 25,
  total: data.length,
  last_page: 1,
  from: data.length > 0 ? 1 : 0,
  to: data.length,
});

const makeDraft = (overrides = {}) => ({
  id: 1,
  site_id: 5,
  site_name: 'My Blog',
  site_domain: 'myblog.com',
  recommendation_id: 10,
  recommendation_action_type: 'content_rewrite',
  model_used: 'gpt-4',
  prompt_tokens: 500,
  completion_tokens: 300,
  status: 'completed',
  publish_status: 'unpublished',
  created_at: '2026-01-15T10:00:00Z',
  ...overrides,
});

const defaultProps = {
  drafts: makePagination([makeDraft()]),
  filters: {},
  stats: {
    total: 1,
    generated_30d: 1,
    published_30d: 0,
    avg_tokens: 800,
  },
};

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

  it('renders the AI Drafts heading', () => {
    render(<AiDraftsIndex {...defaultProps} />);
    expect(screen.getByRole('heading', { name: /AI Drafts/i, level: 1 })).toBeInTheDocument();
  });

  it('renders total drafts stat', () => {
    render(<AiDraftsIndex {...defaultProps} />);
    expect(screen.getByText('Total Drafts')).toBeInTheDocument();
  });

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

  it('renders model_used in draft row', () => {
    render(<AiDraftsIndex {...defaultProps} />);
    expect(screen.getByText('gpt-4')).toBeInTheDocument();
  });

  it('shows empty state when no drafts', () => {
    render(
      <AiDraftsIndex
        {...defaultProps}
        drafts={makePagination([])}
        stats={{ total: 0, generated_30d: 0, published_30d: 0, avg_tokens: 0 }}
      />,
    );
    expect(screen.getByText('No AI drafts found')).toBeInTheDocument();
  });

  it('renders search input', () => {
    render(<AiDraftsIndex {...defaultProps} />);
    expect(screen.getByPlaceholderText(/Search by site name/i)).toBeInTheDocument();
  });

  it('renders Generated (30d) stat', () => {
    render(<AiDraftsIndex {...defaultProps} />);
    expect(screen.getByText('Generated (30d)')).toBeInTheDocument();
  });
});