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

const { fetchTradeProfilesMock } = vi.hoisted(() => ({
  fetchTradeProfilesMock: vi.fn(),
}));

vi.mock('../components/AuthContext', () => ({
  useAuth: () => ({
    user: { id: 'user-1', email: 'trader@example.test' },
    profile: { subscription_tier: 'pro' },
  }),
}));

vi.mock('../lib/profileApi', () => ({
  fetchTradeProfiles: fetchTradeProfilesMock,
  setTradeProfileActive: vi.fn(),
  deleteTradeProfile: vi.fn(),
}));

vi.mock('../lib/StrategyExplanationService', () => ({
  getStrategyExplanation: () => ({ reason: 'Ready for review', recommendation: 'Review sizing.' }),
}));

vi.mock('../backtest/useBacktestFeatureGate', () => ({
  useBacktestFeatureGate: () => ({ enabled: false, loading: false }),
}));

vi.mock('../components/StrategyWizard', () => ({
  StrategyWizard: () => <div>Strategy wizard</div>,
}));

vi.mock('../backtest/components/BacktestRunnerPanel', () => ({
  BacktestRunnerPanel: () => <div>Backtest runner</div>,
}));

const botState = {
  connected: true,
  symbols: {
    AAPL: { change24h: 1.2 },
    MSFT: { change24h: -0.4 },
  },
};

describe('MyStrategiesTab builder strategy visibility', () => {
  beforeEach(() => {
    fetchTradeProfilesMock.mockReset();
  });

  it('shows saved visual and code strategies with their builder type badges', async () => {
    fetchTradeProfilesMock.mockResolvedValue([
      {
        id: 'visual-1',
        name: 'Visual Momentum',
        symbols: 'AAPL',
        allocated_capital: 1000,
        risk_per_trade_percent: 1,
        is_active: false,
        strategy_config: { type: 'visual', rules: [] },
      },
      {
        id: 'code-1',
        name: 'Code Mean Reversion',
        symbols: 'MSFT',
        allocated_capital: 2000,
        risk_per_trade_percent: 1,
        is_active: false,
        strategy_config: { type: 'code', language: 'javascript', code: 'function strategy() {}' },
      },
    ]);

    render(<MyStrategiesTab botState={botState} />);

    expect(await screen.findByText('Visual Momentum')).toBeInTheDocument();
    expect(screen.getByText('Code Mean Reversion')).toBeInTheDocument();
    expect(screen.getByText('Visual Builder')).toBeInTheDocument();
    expect(screen.getByText('Code Strategy')).toBeInTheDocument();
  });
});
