import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import ApiSettings from '../ApiSettings';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, defaultValue?: string) => defaultValue || key,
  }),
}));

// Mock react-router-dom hooks
const mockOutletContext = vi.fn();

vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useOutletContext: () => mockOutletContext(),
  };
});

// Mock usePlanFeatures hook
vi.mock('../../../hooks/usePlanFeatures', () => ({
  usePlanFeatures: () => ({
    canUse: (feature: string) => feature === 'api_access',
  }),
}));

// Mock ApiTokensSection component
vi.mock('../../../components/ApiTokensSection', () => ({
  default: () => <div data-testid="api-tokens-section">API Tokens Section</div>,
}));

// Mock LockedSection component
vi.mock('../../../components/UpgradePrompt', () => ({
  LockedSection: ({ children, isLocked }: { children: React.ReactNode; isLocked: boolean }) => (
    <div data-testid="locked-section" data-locked={isLocked}>
      {children}
    </div>
  ),
}));

describe('ApiSettings', () => {
  const ownerContext = {
    user: { id: '1', role: 'owner', email: 'owner@test.com' },
    business: { id: '1', name: 'Test Business' },
  };

  const staffContext = {
    user: { id: '2', role: 'staff', email: 'staff@test.com' },
    business: { id: '1', name: 'Test Business' },
  };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders the title for owner', () => {
    mockOutletContext.mockReturnValue(ownerContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.getByText('API & Webhooks')).toBeInTheDocument();
  });

  it('renders description for owner', () => {
    mockOutletContext.mockReturnValue(ownerContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.getByText('Manage API access tokens and configure webhooks for integrations.')).toBeInTheDocument();
  });

  it('renders ApiTokensSection for owner', () => {
    mockOutletContext.mockReturnValue(ownerContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.getByTestId('api-tokens-section')).toBeInTheDocument();
  });

  it('shows owner only message for non-owner', () => {
    mockOutletContext.mockReturnValue(staffContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.getByText('Only the business owner can access these settings.')).toBeInTheDocument();
  });

  it('does not show ApiTokensSection for non-owner', () => {
    mockOutletContext.mockReturnValue(staffContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.queryByTestId('api-tokens-section')).not.toBeInTheDocument();
  });

  it('wraps content in LockedSection', () => {
    mockOutletContext.mockReturnValue(ownerContext);
    render(
      <MemoryRouter>
        <ApiSettings />
      </MemoryRouter>
    );
    expect(screen.getByTestId('locked-section')).toBeInTheDocument();
  });
});
