import { useState } from 'react';
import SubTabs from '../components/shared/SubTabs';
import { useAnomalies } from '../hooks/useAnomalies';
import { useWhales } from '../hooks/useWhales';
import AnomalyCard from '../components/home/AnomalyCard';
import WhaleFeed from '../components/signals/WhaleFeed';
import EdgeScanner from '../components/signals/EdgeScanner';

type SignalTab = 'anomalies' | 'smart_money' | 'edge';

export default function SignalsPage() {
  const [tab, setTab] = useState<SignalTab>('anomalies');
  const { anomalies, loading } = useAnomalies(2.5, 48, 30);
  const { trades: whaleTrades } = useWhales({ limit: 1 });

  const subTabs = [
    { key: 'anomalies', label: 'Anomalies', badge: anomalies.length || undefined },
    { key: 'smart_money', label: 'Smart Money', badge: whaleTrades.length > 0 ? undefined : undefined },
    { key: 'edge', label: 'Edge Scanner' },
  ];

  return (
    <div className="signals-page">
      <h2 className="sig-title">Signals</h2>
      <SubTabs tabs={subTabs} active={tab} onChange={k => setTab(k as SignalTab)} />

      {tab === 'anomalies' && (
        <section>
          <p className="sig-desc">Markets with unusual volume spikes (≥2.5x average)</p>
          {loading ? (
            <div className="sig-empty">Loading...</div>
          ) : anomalies.length === 0 ? (
            <div className="sig-empty">No anomalies detected yet. Data needs 3+ days to build averages.</div>
          ) : (
            <div className="sig-list">
              {anomalies.map(a => (
                <AnomalyCard key={a.marketId} anomaly={a} />
              ))}
            </div>
          )}
        </section>
      )}

      {tab === 'smart_money' && (
        <section>
          <p className="sig-desc">Large trades (&gt;$5K) from whale wallets, updated every 5 min</p>
          <WhaleFeed limit={50} minAmount={5000} days={7} />
        </section>
      )}

      {tab === 'edge' && (
        <section>
          <EdgeScanner />
        </section>
      )}

    </div>
  );
}