import { useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { PositionsTab } from '../tabs/PositionsTab';
import { HistoryTab } from '../tabs/HistoryTab';

const TABS = ['Positions & Orders', 'Trade History'] as const;
type Tab = typeof TABS[number];

export function PortfolioView() {
  const { botState } = useAppContext();
  const [tab, setTab] = useState<Tab>('Positions & Orders');

  return (
    <div>
      <h2 style={{ fontSize: 22, fontWeight: 800, color: '#111827', margin: '0 0 20px' }}>Portfolio</h2>

      {/* Sub-tabs */}
      <div style={{
        display: 'flex', gap: 4, marginBottom: 20,
        borderBottom: '1px solid #E5E7EB', paddingBottom: 0,
      }}>
        {TABS.map(t => (
          <button
            key={t}
            onClick={() => setTab(t)}
            style={{
              padding: '8px 16px',
              border: 'none',
              borderBottom: tab === t ? '2px solid #2563EB' : '2px solid transparent',
              background: 'transparent',
              color: tab === t ? '#2563EB' : '#6B7280',
              fontSize: 13,
              fontWeight: tab === t ? 700 : 500,
              cursor: 'pointer',
              marginBottom: -1,
              transition: 'all 0.15s',
            }}
          >
            {t}
          </button>
        ))}
      </div>

      {tab === 'Positions & Orders' && <PositionsTab botState={botState} />}
      {tab === 'Trade History'      && <HistoryTab botState={botState} />}
    </div>
  );
}