import React, { useState, useEffect } from 'react';
import { useAuth } from '../components/AuthContext';
import { getStrategyExplanation } from '../lib/StrategyExplanationService';
import { getUserTier } from '../lib/TierPolicy';
import {
    Play,
    Pause,
    Trash2,
    Activity,
    TrendingUp,
    Plus,
    Shield,
    Zap,
    Scale,
    Settings,
    ChevronDown,
    ChevronUp,
    Lightbulb,
    Cpu,
    Fingerprint,
    Target,
    DollarSign,
    Lock
} from 'lucide-react';
import { StrategyWizard } from '../components/StrategyWizard';
import { BacktestRunnerPanel } from '../backtest/components/BacktestRunnerPanel';
import { useBacktestFeatureGate } from '../backtest/useBacktestFeatureGate';
import { deleteTradeProfile, fetchTradeProfiles, setTradeProfileActive } from '../lib/profileApi';
import { Button, IconButton } from '../components/ui/Primitives';

function getStrategyKindLabel(config: any) {
    if (config?.type === 'visual') return 'Visual Builder';
    if (config?.type === 'code') return 'Code Strategy';
    return 'V4.0 Core';
}

const ActiveStrategyCard: React.FC<{
    profile: any;
    botState: any;
    tier: string;
    onToggle: (p: any) => void;
    onEdit: (p: any) => void;
    onBacktest?: (p: any) => void;
    onDelete: (id: string) => void;
    isExpanded: boolean;
    onToggleExpand: (id: string) => void;
}> = ({ profile, botState, tier, onToggle, onEdit, onBacktest, onDelete, isExpanded, onToggleExpand }) => {
    const config = profile.strategy_config;
    const isAggressive = config?.execution?.minRulePassRatio < 0.9;
    const isSafe = config?.execution?.minRulePassRatio >= 1.0;
    const strategyKindLabel = getStrategyKindLabel(config);

    const explanation = getStrategyExplanation(profile, botState);

    return (
        <div style={{
            background: 'var(--card-elevated)',
            borderRadius: '28px',
            border: `1px solid ${profile.is_active ? 'var(--bl-success-muted)' : 'var(--bl-border-subtle)'}`,
            padding: '32px',
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            overflow: 'hidden',
            transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
            height: '100%',
            minHeight: '620px'
        }} className="strategy-card-hover">

            {/* 1. Direct Status Strip */}
            <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                bottom: 0,
                width: '4px',
                background: profile.is_active ? 'var(--bl-success)' : 'var(--bl-border-subtle)',
                opacity: profile.is_active ? 1 : 0.3
            }} />

            {/* 2. Header Area */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
                <div style={{ display: 'flex', gap: '14px', alignItems: 'center' }}>
                    <div style={{
                        width: '44px',
                        height: '44px',
                        borderRadius: '14px',
                        background: 'var(--bl-surface-highlight)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        border: '1px solid var(--bl-border-subtle)',
                        color: isSafe ? 'var(--bl-info-strong)' : isAggressive ? 'var(--bl-danger)' : 'var(--bl-success)'
                    }}>
                        {isSafe ? <Shield size={20} /> : isAggressive ? <Zap size={20} /> : <Scale size={20} />}
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                        <span style={{ fontSize: '10px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Active Strategy</span>
                        <span style={{ fontSize: '13px', fontWeight: 800, color: 'white', textTransform: 'uppercase' }}>
                            {profile.is_active ? 'Running' : 'Paused'}
                        </span>
                    </div>
                </div>
                <div style={{ display: 'flex', gap: '8px' }}>
                    {onBacktest && (
                        <IconButton type="button" label={`Backtest ${profile.name}`} icon={<Activity size={18} />} onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
                    )}
                    <IconButton type="button" label={`Edit ${profile.name}`} icon={<Settings size={18} />} onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
                    <IconButton type="button" label={`Delete ${profile.name}`} icon={<Trash2 size={18} />} onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bl-text-quiet)', cursor: 'pointer' }} className="icon-btn-hover" />
                </div>
            </div>

            {/* 3. Identity */}
            <div style={{ marginBottom: '24px' }}>
                <h3 style={{ fontSize: '24px', fontWeight: 950, color: 'white', letterSpacing: '-0.02em' }}>{profile.name}</h3>
                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '12px' }}>
                    <span style={{ background: 'var(--bl-success-muted)', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-success-muted)', textTransform: 'uppercase' }}>
                        {profile.symbols}
                    </span>
                    <span style={{ background: 'var(--bl-surface-highlight)', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--bl-border-subtle)', textTransform: 'uppercase' }}>
                        {strategyKindLabel}
                    </span>
                </div>
            </div>

            {/* 4. Operational DNA (Specs) */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '28px' }}>
                {[
                    { label: 'Allocation', value: `$${profile.allocated_capital.toLocaleString()}`, icon: <DollarSign size={14} />, color: 'var(--bl-success)' },
                    { label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: 'var(--bl-info-strong)' },
                    { label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: 'var(--bl-warning)' },
                    { label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: 'var(--bl-danger)' }
                ].map((spec, i) => (
                    <div key={i} style={{
                        background: 'var(--bl-surface-overlay)',
                        border: '1px solid var(--bl-border-subtle)',
                        padding: '16px',
                        borderRadius: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '6px'
                    }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-text-quiet)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
                            {spec.icon} {spec.label}
                        </div>
                        <div style={{ color: 'white', fontWeight: 900, fontSize: '16px' }}>{spec.value}</div>
                    </div>
                ))}
            </div>

            {/* 5. Health Diagnostic (Education Layer) */}
            <div style={{ marginBottom: '32px' }}>
                <Button
                    type="button"
                    onClick={() => onToggleExpand(profile.id)}
                    variant="ghost"
                    style={{
                        width: '100%',
                        padding: '16px',
                        borderRadius: '20px',
                        background: 'var(--bl-surface-highlight)',
                        border: '1px solid var(--bl-border-subtle)',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '8px',
                        cursor: 'pointer',
                        textAlign: 'left'
                    }}
                >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--bl-success)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase' }}>
                            <Fingerprint size={14} /> Diagnostic Intelligence {tier === 'free' && <Lock size={12} style={{ marginLeft: '4px', opacity: 0.5 }} />}
                        </div>
                        {isExpanded ? <ChevronUp size={14} color="var(--bl-text-quiet)" /> : <ChevronDown size={14} color="var(--bl-text-quiet)" />}
                    </div>
                    <p style={{ fontSize: '12px', color: 'var(--bl-text-secondary)', margin: 0, fontWeight: 500 }}>
                        {explanation.reason}
                    </p>
                    {isExpanded && explanation.recommendation && (
                        <div style={{
                            marginTop: '12px',
                            padding: '12px',
                            background: 'var(--bl-warning-muted)',
                            border: '1px solid var(--bl-warning-muted)',
                            borderRadius: '12px'
                        }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--bl-warning)', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
                                <Lightbulb size={12} /> Optimization
                            </div>
                            <p style={{ fontSize: '11px', color: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
                        </div>
                    )}
                </Button>
            </div>

            {/* 6. Action */}
            <div style={{ marginTop: 'auto' }}>
                <Button
                    type="button"
                    onClick={() => onToggle(profile)}
                    variant={profile.is_active ? 'outline' : 'primary'}
                    style={{
                        width: '100%',
                        height: '56px',
                        background: profile.is_active ? 'var(--bl-surface-highlight)' : 'var(--bl-success)',
                        color: profile.is_active ? 'var(--bl-text-secondary)' : 'black',
                        borderRadius: '18px',
                        border: profile.is_active ? '1px solid var(--bl-border-subtle)' : 'none',
                        fontWeight: 900,
                        fontSize: '12px',
                        textTransform: 'uppercase',
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '12px',
                        boxShadow: profile.is_active ? 'none' : '0 12px 36px -12px color-mix(in oklab, var(--bl-success) 40%, transparent)',
                        transition: 'all 0.2s',
                        letterSpacing: '1.5px'
                    }}
                    className="action-btn-hover"
                >
                    {profile.is_active ? (
                        <><Pause size={18} fill="currentColor" /> PAUSE TRADING</>
                    ) : (
                        <><Play size={18} fill="currentColor" /> START TRADING</>
                    )}
                </Button>
            </div>

            <style>{`
                .strategy-card-hover:hover {
                    border-color: var(--bl-success-muted) !important;
                    transform: translateY(-8px);
                    box-shadow: 0 40px 80px -20px color-mix(in oklab, var(--background) 80%, black) !important;
                    background: var(--bl-surface-strong) !important;
                }
                .icon-btn-hover:hover {
                    background: color-mix(in oklab, var(--card) 88%, var(--foreground)) !important;
                    color: white !important;
                }
                .action-btn-hover:hover {
                    filter: brightness(1.1);
                    transform: scale(1.02);
                }
            `}</style>
        </div>
    );
};

export const MyStrategiesTab: React.FC<{ botState: any; alerts?: any[]; previewAsCustomer?: boolean }> = ({
    botState,
    alerts = [],
    previewAsCustomer = false
}) => {
    const { user, profile: userProfile } = useAuth();
    const [profiles, setProfiles] = useState<any[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [showWizard, setShowWizard] = useState(false);
    const [editingProfile, setEditingProfile] = useState<any>(null);
    const [expandedExplanations, setExpandedExplanations] = useState<Record<string, boolean>>({});
    const [backtestProfile, setBacktestProfile] = useState<any>(null);

    const tier = getUserTier(userProfile);
    const { enabled: backtestEnabled, loading: backtestGateLoading } = useBacktestFeatureGate({ previewAsCustomer });

    const fetchProfiles = async () => {
        if (!user) return;
        setIsLoading(true);
        const data = await fetchTradeProfiles();
        setProfiles(data || []);
        setIsLoading(false);
    };

    useEffect(() => {
        fetchProfiles();
        window.addEventListener('profiles-updated', fetchProfiles);
        return () => window.removeEventListener('profiles-updated', fetchProfiles);
    }, [user]);

    const toggleBot = async (profile: any) => {
        try {
            await setTradeProfileActive(profile.id, !profile.is_active);
            fetchProfiles();
        } catch {
            // existing UI remains silent on toggle failure
        }
    };

    const deleteBot = async (id: string) => {
        if (!confirm('Are you sure you want to delete this strategy?')) return;
        try {
            await deleteTradeProfile(id);
            fetchProfiles();
        } catch {
            // existing UI remains silent on delete failure
        }
    };

    if (showWizard) {
        return (
            <div style={{ animation: 'fadeIn 0.5s ease-out' }}>
                <div style={{ marginBottom: '24px' }}>
                    <Button
                        type="button"
                        onClick={() => {
                            setShowWizard(false);
                            setEditingProfile(null);
                        }}
                        variant="ghost"
                        style={{ background: 'none', border: 'none', color: 'var(--bl-text-quiet)', fontWeight: 900, fontSize: '12px', textTransform: 'uppercase', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
                    >
                        ← Back to My Strategies
                    </Button>
                </div>
                <StrategyWizard
                    editingProfile={editingProfile}
                    profile={userProfile}
                    previewAsCustomer={previewAsCustomer}
                    onComplete={() => {
                        setShowWizard(false);
                        setEditingProfile(null);
                        fetchProfiles();
                    }}
                />
            </div>
        );
    }

    return (
        <div className="strategy-workspace">
            <div className="strategy-workspace-header">
                <div>
                    <div className="strategy-workspace-eyebrow">
                        Strategy operations
                    </div>
                    <h2>My strategies</h2>
                    <p>
                        Monitor active profiles, review recent signals, and create new automated trading workflows.
                    </p>
                </div>

                <div className="strategy-workspace-actions">
                    <div className="strategy-connection-pill" data-connected={botState?.connected ? 'true' : 'false'}>
                        {botState?.connected ? 'Systems online' : 'Systems disconnected'}
                    </div>
                    <Button
                        type="button"
                        onClick={() => setShowWizard(true)}
                        variant="primary"
                    >
                        <Plus size={16} /> New strategy
                    </Button>
                </div>
            </div>

            {/* Contextual Intelligence Row: Recent Activity + Symbol Volatility */}
            {(() => {
                const activeSymbols = [...new Set(profiles.flatMap(p => p.symbols?.split(',').map((s: string) => s.trim()) || []))];
                const recentAlerts = [...alerts].reverse().slice(0, 5);
                const symbolVolatility = activeSymbols
                    .filter(s => botState?.symbols?.[s])
                    .map(s => ({ symbol: s, change: botState.symbols[s].change24h || 0 }))
                    .sort((a, b) => Math.abs(b.change) - Math.abs(a.change));

                return (
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '48px' }}>
                        {/* Recent Activity */}
                        <div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
                                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--bl-success)', boxShadow: '0 0 8px var(--bl-success)' }} />
                                <span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                                {recentAlerts.map((alert, i) => {
                                    const mins = Math.floor((Date.now() - alert.timestamp) / 60000);
                                    const timeAgo = mins < 1 ? 'just now' : mins < 60 ? `${mins}m ago` : `${Math.floor(mins / 60)}h ago`;
                                    return (
                                        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px 12px', background: 'var(--bl-surface-overlay)', borderRadius: '10px' }}>
                                            <Activity size={13} color="var(--bl-info)" />
                                            <span style={{ fontSize: '12px', color: 'var(--bl-text-quiet)', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
                                            <span style={{ fontSize: '11px', color: 'var(--bl-text-quiet)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
                                            <span style={{ fontSize: '10px', color: 'var(--bl-text-tertiary)', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
                                        </div>
                                    );
                                })}
                                {recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
                            </div>
                        </div>

                        {/* Symbol-Specific Volatility */}
                        <div style={{ background: 'var(--bl-surface-highlight)', border: '1px solid var(--bl-border-subtle)', borderRadius: '24px', padding: '24px 28px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
                                <TrendingUp size={15} color="var(--bl-info)" />
                                <span style={{ fontSize: '11px', fontWeight: 900, color: 'var(--bl-text-quiet)', textTransform: 'uppercase', letterSpacing: '2px' }}>Your Markets (24h)</span>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                                {symbolVolatility.map(({ symbol, change }) => (
                                    <div key={symbol} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bl-surface-overlay)', borderRadius: '12px' }}>
                                        <span style={{ fontWeight: 800, fontSize: '13px', color: 'white' }}>{symbol}</span>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                            <div style={{ width: '60px', height: '3px', background: 'var(--bl-border-subtle)', borderRadius: '99px', overflow: 'hidden' }}>
                                                <div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', borderRadius: '99px' }} />
                                            </div>
                                            <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? 'var(--bl-success)' : 'var(--bl-danger)', minWidth: '55px', textAlign: 'right' }}>
                                                {change >= 0 ? '+' : ''}{change.toFixed(2)}%
                                            </span>
                                        </div>
                                    </div>
                                ))}
                                {symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: 'var(--bl-text-tertiary)', fontSize: '12px', fontStyle: 'italic' }}>Deploy a strategy to see its market data</div>}
                            </div>
                        </div>
                    </div>
                );
            })()}
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
                gap: '40px',
                width: '100%'
            }}>
                {!backtestGateLoading && backtestEnabled && backtestProfile && (
                    <div style={{ gridColumn: '1 / -1' }}>
                        <BacktestRunnerPanel
                            profileId={backtestProfile.id}
                            strategyConfig={backtestProfile.strategy_config}
                            symbols={String(backtestProfile.symbols || '').split(',').map((s: string) => s.trim()).filter(Boolean)}
                            initialCapitalUsd={Number(backtestProfile.allocated_capital || 1000)}
                            title={`Backtest: ${backtestProfile.name}`}
                            onClose={() => setBacktestProfile(null)}
                        />
                    </div>
                )}
                {profiles.map(profile => (
                    <ActiveStrategyCard
                        key={profile.id}
                        profile={profile}
                        botState={botState}
                        tier={tier}
                        onToggle={toggleBot}
                        onEdit={(p) => {
                            setEditingProfile(p);
                            setShowWizard(true);
                        }}
                        onBacktest={!backtestGateLoading && backtestEnabled ? ((p) => setBacktestProfile(p)) : undefined}
                        onDelete={deleteBot}
                        isExpanded={!!expandedExplanations[profile.id]}
                        onToggleExpand={(id) => setExpandedExplanations(prev => ({ ...prev, [id]: !prev[id] }))}
                    />
                ))}

                {profiles.length === 0 && !isLoading && (
                    <div style={{
                        gridColumn: '1 / -1',
                        padding: '100px',
                        background: 'var(--bl-surface-highlight)',
                        border: '2px dashed var(--bl-border-subtle)',
                        borderRadius: '40px',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        textAlign: 'center'
                    }}>
                        <Activity size={60} color="var(--bl-text-quiet)" style={{ marginBottom: '24px' }} />
                        <h3 style={{ color: 'var(--bl-text-quiet)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No strategies yet</h3>
                        <p style={{ color: 'var(--bl-text-quiet)', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Create your first strategy to start monitoring markets and testing automated execution.</p>
                        <Button
                            type="button"
                            onClick={() => setShowWizard(true)}
                            variant="secondary"
                            style={{ marginTop: '32px', background: 'white', border: 'none', color: 'black', padding: '16px 40px', borderRadius: '16px', fontWeight: 900, cursor: 'pointer' }}
                        >
                            GET STARTED
                        </Button>
                    </div>
                )}
            </div>

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