import { useSearchParams } from 'react-router-dom';
import { PageHeader } from '../components/ui/PageHeader';
import { Tabs } from '../components/ui/Tabs';
import { SetupsPanel } from '../components/signals/SetupsPanel';
import { TrackRecordPanel } from '../components/signals/TrackRecordPanel';

const tabs = ['Setups', 'Track Record'] as const;
type Tab = (typeof tabs)[number];

export default function SignalsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab: Tab = searchParams.get('tab') === 'track' ? 'Track Record' : 'Setups';

  const setTab = (tab: Tab) => {
    setSearchParams(tab === 'Track Record' ? { tab: 'track' } : {}, { replace: true });
  };

  return (
    <div className="space-y-6 animate-slide-up">
      <PageHeader
        title="Signals"
        subtitle="Detected trade setups and how past signals actually performed"
      />

      <Tabs tabs={tabs} active={activeTab} onChange={setTab} />

      <div className="animate-fade-in" key={activeTab}>
        {activeTab === 'Setups' ? <SetupsPanel /> : <TrackRecordPanel />}
      </div>
    </div>
  );
}