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',
      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('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 RecommendationsIndex from './Index';

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

const makeRec = (overrides = {}) => ({
  id: 1,
  site_id: 5,
  site_name: 'My Blog',
  site_domain: 'myblog.com',
  page_url: 'https://myblog.com/post-1',
  action_type: 'content_rewrite',
  impact_score: '7.50',
  lifecycle_status: 'pending',
  created_at: '2026-01-15T10:00:00Z',
  ...overrides,
});

const defaultStats = { total: 1, pending: 1, applied: 0, avg_impact_score: 7.5 };

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

  it('renders the Recommendations heading', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([makeRec()])}
        filters={{}}
        stats={defaultStats}
      />,
    );
    expect(screen.getByRole('heading', { name: /Recommendations/i, level: 1 })).toBeInTheDocument();
  });

  it('renders site name in row', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([makeRec()])}
        filters={{}}
        stats={defaultStats}
      />,
    );
    expect(screen.getByText('My Blog')).toBeInTheDocument();
  });

  it('renders action type badge', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([makeRec()])}
        filters={{}}
        stats={defaultStats}
      />,
    );
    // action_type is displayed with underscores replaced by spaces
    expect(screen.getByText('content rewrite')).toBeInTheDocument();
  });

  it('shows empty state when no recommendations', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([])}
        filters={{}}
        stats={{ total: 0, pending: 0, applied: 0, avg_impact_score: 0 }}
      />,
    );
    expect(screen.getByText('No recommendations found')).toBeInTheDocument();
  });

  it('renders total stat', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([makeRec()])}
        filters={{}}
        stats={defaultStats}
      />,
    );
    expect(screen.getByText('Total')).toBeInTheDocument();
  });

  it('renders applied stat', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([makeRec({ lifecycle_status: 'applied' })])}
        filters={{}}
        stats={{ total: 1, pending: 0, applied: 1, avg_impact_score: 7.5 }}
      />,
    );
    expect(screen.getByText('Applied')).toBeInTheDocument();
  });

  it('renders search input', () => {
    render(
      <RecommendationsIndex
        recommendations={makePagination([])}
        filters={{}}
        stats={{ total: 0, pending: 0, applied: 0, avg_impact_score: 0 }}
      />,
    );
    expect(screen.getByPlaceholderText(/Search by page URL/i)).toBeInTheDocument();
  });
});