import type { BotState } from '../hooks/useWebSocket';
import { Activity, BrainCircuit } from 'lucide-react';

interface MarketOpportunitiesProps {
    botState: BotState;
}

export const TopVolatile = ({ botState }: MarketOpportunitiesProps) => {
    const symbols = Object.keys(botState.symbols);
    const topSymbols = symbols
        .sort((a, b) => Math.abs(botState.symbols[b].change24h || 0) - Math.abs(botState.symbols[a].change24h || 0))
        .slice(0, 5);

    return (
        <section className="opportunity-card-sidebar volatile-corner" aria-labelledby="top-volatile-title">
            <div className="opportunity-card-header">
                <span className="opportunity-card-icon"><Activity size={16} /></span>
                <div>
                    <h3 id="top-volatile-title">Top movers</h3>
                    <p>24h change by absolute move.</p>
                </div>
            </div>
            <div className="opp-list">
                {topSymbols
                    .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">Waiting for live market ticks...</div>}
            </div>
        </section>
    );
};

export const AISetups = ({ botState }: MarketOpportunitiesProps) => {
    const symbols = Object.keys(botState.symbols);
    const aiSymbols = 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);

    return (
        <section className="opportunity-card-sidebar" aria-labelledby="ai-setups-title">
            <div className="opportunity-card-header">
                <span className="opportunity-card-icon"><BrainCircuit size={16} /></span>
                <div>
                    <h3 id="ai-setups-title">AI setups</h3>
                    <p>Highest-confidence symbols from strategy rules.</p>
                </div>
            </div>
            <div className="opp-list">
                {aiSymbols
                    .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>
                    ))}
                {aiSymbols.length === 0 && (
                    <div className="opp-empty">No AI confidence signals yet.</div>
                )}
            </div>
        </section>
    );
};
