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

// Mock the settings store
const mockSetApiKey = vi.fn();
const mockSetBaseUrl = vi.fn();
const mockSetModelName = vi.fn();
const mockClearSettings = vi.fn();

vi.mock('@/store/use-settings', () => ({
  useSettingsStore: () => ({
    apiKey: '',
    baseUrl: 'https://api.openai.com/v1',
    modelName: 'gpt-4-turbo-preview',
    isConfigured: false,
    actions: {
      setApiKey: mockSetApiKey,
      setBaseUrl: mockSetBaseUrl,
      setModelName: mockSetModelName,
      clearSettings: mockClearSettings,
    },
  }),
  useApiKey: () => '',
  useBaseUrl: () => 'https://api.openai.com/v1',
  useModelName: () => 'gpt-4-turbo-preview',
  useIsConfigured: () => false,
  useSettingsActions: () => ({
    setApiKey: mockSetApiKey,
    setBaseUrl: mockSetBaseUrl,
    setModelName: mockSetModelName,
    clearSettings: mockClearSettings,
  }),
}));

// Mock ProviderForm component
vi.mock('@/components/features/settings/provider-form', () => ({
  ProviderForm: () => <div data-testid="provider-form">Provider Form</div>,
}));

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

  it('renders the settings page with heading', () => {
    render(<SettingsPage />);
    expect(screen.getByText('Settings')).toBeInTheDocument();
    expect(screen.getByText(/manage your ai provider/i)).toBeInTheDocument();
  });

  it('renders the ProviderForm component', () => {
    render(<SettingsPage />);
    expect(screen.getByTestId('provider-form')).toBeInTheDocument();
  });

  it('has proper page title and description', () => {
    render(<SettingsPage />);
    expect(screen.getByRole('heading', { name: 'Settings' })).toBeInTheDocument();
    expect(screen.getByText(/AI Provider/)).toBeInTheDocument();
  });
});
