import React from 'react';
import { PresetMarketplace } from '../components/PresetMarketplace';
import type { StrategyPreset } from '../lib/PresetRegistry';
import type { BotState } from '../hooks/useWebSocket';
import { TrendingUp, Brain } from 'lucide-react';

interface MarketplaceTabProps {
    onClone: (preset: StrategyPreset) => void;
    botState: BotState;
}

export const MarketplaceTab: React.FC<MarketplaceTabProps> = ({ onClone, botState }) => {
    const symbols = Object.keys(botState.symbols);

    const aiSetups = 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);

    const topVolatile = [...symbols]
        .sort((a, b) => Math.abs(botState.symbols[b].change24h || 0) - Math.abs(botState.symbols[a].change24h || 0))
        .slice(0, 6);

    return (
        <div style={{ animation: 'fadeIn 0.5s ease-out' }}>

            {/* Contextual Intelligence Row */}
            <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '20px',
                maxWidth: '1400px',
                margin: '24px auto 0 auto',
                padding: '0 20px'
            }}>
                {/* AI Best Setups Panel */}
                <div style={{
                    background: 'linear-gradient(135deg, rgba(0, 255, 136, 0.04), rgba(0,0,0,0))',
                    border: '1px solid rgba(0, 255, 136, 0.1)',
                    borderRadius: '24px',
                    padding: '24px 28px'
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
                        <div style={{ width: '32px', height: '32px', borderRadius: '10px', background: 'rgba(0,255,136,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <Brain size={16} color="#00ff88" />
                        </div>
                        <div>
                            <div style={{ fontSize: '11px', fontWeight: 900, color: '#00ff88', textTransform: 'uppercase', letterSpacing: '2px' }}>🧠 Best AI Setups</div>
                            <div style={{ fontSize: '10px', color: '#444', fontWeight: 700, marginTop: '1px' }}>High-confidence signals — find the right strategy below</div>
                        </div>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        {aiSetups.map(s => {
                            const conf = botState.symbols[s]?.rules['AIAnalysisRule']?.metadata?.confidence || 0;
                            return (
                                <div key={s} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.03)' }}>
                                    <span style={{ fontWeight: 800, fontSize: '13px', color: 'white' }}>{s}</span>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <div style={{ width: `${Math.min(conf, 60)}px`, height: '3px', background: `hsl(${conf * 1.2}, 100%, 55%)`, borderRadius: '99px' }} />
                                        <span style={{ fontSize: '12px', fontWeight: 900, color: '#00ff88', fontFamily: 'monospace' }}>{conf}%</span>
                                    </div>
                                </div>
                            );
                        })}
                        {aiSetups.length === 0 && (
                            <div style={{ textAlign: 'center', padding: '20px', color: '#333', fontSize: '12px', fontStyle: 'italic' }}>AI analysis scanning markets...</div>
                        )}
                    </div>
                </div>

                {/* Top Volatile Panel */}
                <div style={{
                    background: 'linear-gradient(135deg, rgba(255, 170, 0, 0.03), rgba(0,0,0,0))',
                    border: '1px solid rgba(255, 170, 0, 0.08)',
                    borderRadius: '24px',
                    padding: '24px 28px'
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
                        <div style={{ width: '32px', height: '32px', borderRadius: '10px', background: 'rgba(255,170,0,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <TrendingUp size={16} color="#ffaa00" />
                        </div>
                        <div>
                            <div style={{ fontSize: '11px', fontWeight: 900, color: '#ffaa00', textTransform: 'uppercase', letterSpacing: '2px' }}>🔥 Top Volatile (24h)</div>
                            <div style={{ fontSize: '10px', color: '#444', fontWeight: 700, marginTop: '1px' }}>Most active markets — match with strategies below</div>
                        </div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
                        {topVolatile.map(s => {
                            const change = botState.symbols[s]?.change24h || 0;
                            return (
                                <div key={s} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.03)' }}>
                                    <span style={{ fontWeight: 800, fontSize: '12px', color: '#bbb' }}>{s.split('/')[0]}</span>
                                    <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? '#00ff88' : '#ff3366' }}>
                                        {change >= 0 ? '+' : ''}{change.toFixed(2)}%
                                    </span>
                                </div>
                            );
                        })}
                        {topVolatile.length === 0 && (
                            <div style={{ gridColumn: '1/-1', textAlign: 'center', padding: '20px', color: '#333', fontSize: '12px', fontStyle: 'italic' }}>Scanning markets...</div>
                        )}
                    </div>
                </div>
            </div>

            {/* Strategy Marketplace Grid */}
            <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 0 40px 0' }}>
                <PresetMarketplace onSelect={onClone} />
            </div>

            <style>{`
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(12px); }
                    to { opacity: 1; transform: translateY(0); }
                }
            `}</style>
        </div>
    );
};
