import type { BotState } from '../hooks/useWebSocket';

interface MarketOpportunitiesProps {
    botState: BotState;
}

export const TopVolatile = ({ botState }: MarketOpportunitiesProps) => {
    const symbols = Object.keys(botState.symbols);

    return (
        <div className="opportunity-card-sidebar volatile-corner">
            <h3>🔥 Top Volatile (24h)</h3>
            <div className="opp-list">
                {symbols
                    .sort((a, b) => Math.abs(botState.symbols[b].change24h || 0) - Math.abs(botState.symbols[a].change24h || 0))
                    .slice(0, 5) // Keep it concise for corner
                    .map(symbol => (
                        <div key={symbol} className="opp-item">
                            <span className="opp-symbol">{symbol}</span>
                            <span className={`opp-value ${botState.symbols[symbol].change24h >= 0 ? 'up' : 'down'}`}>
                                {botState.symbols[symbol].change24h >= 0 ? '+' : ''}{botState.symbols[symbol].change24h?.toFixed(2)}%
                            </span>
                        </div>
                    ))}
                {symbols.length === 0 && <div className="opp-empty">Scanning...</div>}
            </div>
        </div>
    );
};

export const AISetups = ({ botState }: MarketOpportunitiesProps) => {
    const symbols = Object.keys(botState.symbols);

    return (
        <div className="opportunity-card-sidebar">
            <h3>🧠 Best AI Setups</h3>
            <div className="opp-list">
                {symbols
                    .filter(s => botState.symbols[s].rules['AIAnalysisRule']?.metadata?.confidence !== undefined)
                    .sort((a, b) => (botState.symbols[b].rules['AIAnalysisRule']?.metadata?.confidence || 0) - (botState.symbols[a].rules['AIAnalysisRule']?.metadata?.confidence || 0))
                    .slice(0, 5)
                    .map(symbol => (
                        <div key={symbol} className="opp-item">
                            <span className="opp-symbol">{symbol}</span>
                            <span className="opp-value ai">
                                {botState.symbols[symbol].rules['AIAnalysisRule']?.metadata?.confidence}% Conf
                            </span>
                        </div>
                    ))}
                {symbols.filter(s => botState.symbols[s].rules['AIAnalysisRule']?.metadata?.confidence !== undefined).length === 0 && (
                    <div className="opp-empty">No AI data yet...</div>
                )}
            </div>
        </div>
    );
};
