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

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

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    router: {
      post: vi.fn(),
      get: vi.fn(),
      visit: vi.fn(),
      reload: vi.fn(),
      on: vi.fn(() => vi.fn()),
    },
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
      <a href={href}>{children}</a>
    ),
    usePage: vi.fn(() => ({
      url: '/admin/webhook-deliveries',
      props: {
        auth: { user: { id: 1, name: 'Admin', email: 'admin@test.com', is_admin: true }, impersonating: false },
        features: { billing: false, socialAuth: false, emailVerification: false, apiTokens: false, userSettings: false, notifications: false, onboarding: false, apiDocs: false, twoFactor: false, webhooks: true, admin: true },
        flash: {}, errors: {}, notifications_unread_count: 0, sites: [], limits: null, active_jobs: [], ai_max_batch_size: 10, ai_defaults: {}, polling_interval_ms: 5000, admin_failed_job_count: 0,
      },
    })),
  };
});

import Index from './Index';

const makeDelivery = (overrides = {}) => ({
  id: 1,
  webhook_endpoint_id: 10,
  endpoint_url: 'https://example.com/hook',
  event_type: 'user.created',
  status: 'success',
  response_code: 200,
  attempts: 1,
  delivered_at: '2026-06-30T00:00:00Z',
  created_at: '2026-06-29T00:00:00Z',
  ...overrides,
});

const makeProps = (overrides = {}) => ({
  deliveries: {
    data: [makeDelivery()],
    current_page: 1,
    last_page: 1,
    per_page: 25,
    from: 1,
    to: 1,
    total: 1,
    links: [],
  },
  filters: {},
  event_types: ['user.created'],
  stats: { total: 1, delivered: 1, failed: 0 },
  ...overrides,
});

describe('Admin/WebhookDeliveries/Index', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders a success-status delivery with the success badge styling, not the neutral fallback', () => {
    render(<Index {...makeProps()} />);
    const badge = screen.getByText('success');
    // WEBHOOK-STATUS-VOCAB: statusVariant() must match the real value the
    // job writes ('success'), not the never-written 'delivered' value —
    // otherwise every delivered row falls through to the neutral 'secondary' badge.
    expect(badge.className).toContain('bg-success');
  });

  it('renders the failed stat correctly alongside the delivered stat', () => {
    render(<Index {...makeProps({ stats: { total: 2, delivered: 1, failed: 1 } })} />);
    expect(screen.getByText(/2 total/i)).toBeInTheDocument();
    expect(screen.getByText(/1 delivered/i)).toBeInTheDocument();
    expect(screen.getByText(/1 failed/i)).toBeInTheDocument();
  });

  it('renders the status filter trigger', () => {
    render(<Index {...makeProps()} />);
    expect(screen.getByLabelText(/filter by status/i)).toBeInTheDocument();
  });
});