import { Suspense, lazy, useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { TopVolatile, AISetups } from '../components/MarketOpportunities';
import type { StrategyPreset } from '../lib/PresetRegistry';
import { PageHeader } from '../components/ui/page-header';

const MarketplaceTab = lazy(() => import('../tabs/MarketplaceTab').then((mod) => ({ default: mod.MarketplaceTab })));

export function MarketsView() {
  const { botState, showMarketplaceTab } = useAppContext();
  const [, setClonedPreset] = useState<StrategyPreset | null>(null);

  const handleClone = (preset: StrategyPreset) => setClonedPreset(preset);

  return (
    <div>
      <PageHeader
        title="Markets"
        description="Scan live opportunities and reusable setups from the current market without leaving the workspace."
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 24 }}>
        <TopVolatile botState={botState} />
        <AISetups botState={botState} />
      </div>
      {showMarketplaceTab && (
        <Suspense fallback={null}>
          <MarketplaceTab onClone={handleClone} botState={botState} />
        </Suspense>
      )}
    </div>
  );
}
