import React from 'react';
import {
    Crown,
    Zap,
    Lock,
    CheckCircle2,
    Sparkles,
    Dna,
    ArrowUpRight,
    Fingerprint,
    Cpu,
    Target,
    Activity
} from 'lucide-react';
import { TIER_POLICIES } from '../lib/TierPolicy';

const PlanCard: React.FC<{
    id: string;
    policy: any;
}> = ({ id, policy }) => {
    const isElite = id === 'elite';
    const isPro = id === 'pro';
    const themeColor = isElite ? '#00ff88' : isPro ? '#3498db' : '#929292';

    const price = id === 'free' ? '$0' : id === 'pro' ? '$49' : '$199';
    const description = id === 'free' ? 'Perfect for learning the fundamentals of automated trading with zero risk.' :
        id === 'pro' ? 'For serious traders looking to scale their operations with more bots and flexibility.' :
            'The full Bytelyst ecosystem with zero restrictions and maximum performance.';

    const specs = [
        { label: 'Latency', value: id === 'free' ? 'Standard' : id === 'pro' ? 'Priority' : 'Real-time', icon: <Cpu size={14} /> },
        { label: 'Capacity', value: id === 'free' ? '1 Node' : id === 'pro' ? '5 Nodes' : 'Unlimited', icon: <Target size={14} /> },
        { label: 'Access', value: id === 'free' ? 'Basic' : id === 'pro' ? 'Full' : 'Exclusive', icon: <Fingerprint size={14} /> },
        { label: 'Performance', value: id === 'free' ? 'Capped' : id === 'pro' ? 'Advanced' : 'Unlimited', icon: <Activity size={14} /> }
    ];

    return (
        <div style={{
            background: '#14151a',
            borderRadius: '28px',
            border: '1px solid rgba(255, 255, 255, 0.05)',
            padding: '32px',
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            overflow: 'hidden',
            transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
            cursor: 'default',
            height: '100%',
            minHeight: '620px'
        }} className="membership-card-hover">

            <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: 'rgba(255,255,255,0.03)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        border: '1px solid rgba(255, 255, 255, 0.05)',
                        color: themeColor
                    }}>
                        {isElite ? <Crown size={22} /> : isPro ? <Zap size={22} fill="currentColor" /> : <Lock size={20} />}
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                        <span style={{ fontSize: '10px', fontWeight: 900, color: '#444', textTransform: 'uppercase', letterSpacing: '2px' }}>Tier Level</span>
                        <span style={{ fontSize: '13px', fontWeight: 800, color: 'white', textTransform: 'uppercase', letterSpacing: '0.5px' }}>{policy.label}</span>
                    </div>
                </div>
                {isElite && (
                    <div style={{
                        background: 'rgba(0, 255, 136, 0.1)',
                        border: '1px solid rgba(0, 255, 136, 0.2)',
                        padding: '6px 12px',
                        borderRadius: '10px',
                        fontSize: '10px',
                        fontWeight: 900,
                        color: '#00ff88',
                        textTransform: 'uppercase'
                    }}>
                        Peak
                    </div>
                )}
            </div>

            <div style={{ marginBottom: '24px', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '12px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
                    <h3 style={{ fontSize: '42px', fontWeight: 950, color: 'white', letterSpacing: '-0.04em', margin: 0 }}>{price}</h3>
                    <span style={{ fontSize: '14px', color: '#444', fontWeight: 900, textTransform: 'uppercase' }}>/mo</span>
                </div>
                <div style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '8px',
                    background: 'rgba(255, 255, 255, 0.03)',
                    padding: '6px 14px',
                    borderRadius: '8px',
                    fontSize: '11px',
                    color: '#929292',
                    fontWeight: 900,
                    textTransform: 'uppercase',
                    border: '1px solid rgba(255, 255, 255, 0.05)',
                    letterSpacing: '0.5px'
                }}>
                    <Sparkles size={14} style={{ color: '#fbbf24' }} /> Professional Grade DNA
                </div>
            </div>

            <p style={{
                fontSize: '14px',
                color: '#888',
                lineHeight: '1.6',
                marginBottom: '28px',
                textAlign: 'left',
                flex: 1
            }}>
                {description} Enhanced with Bytelyst's core strategy engine and isolated security nodes.
            </p>

            <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '14px',
                marginBottom: '28px'
            }}>
                {specs.map((spec, i) => (
                    <div key={i} style={{
                        background: 'rgba(0,0,0,0.2)',
                        border: '1px solid rgba(255,255,255,0.03)',
                        padding: '16px',
                        borderRadius: '20px',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '6px',
                        alignItems: 'flex-start'
                    }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '1px' }}>
                            {spec.icon} {spec.label}
                        </div>
                        <div style={{ color: 'white', fontWeight: 900, fontSize: '15px' }}>{spec.value}</div>
                    </div>
                ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '32px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '12px', color: 'rgba(255,255,255,0.4)', fontWeight: 700 }}>
                    <CheckCircle2 size={16} style={{ color: themeColor }} />
                    {id === 'free' ? 'Safe Style Only' : id === 'pro' ? 'Safe & Balanced' : 'All Risk Styles Unlocked'}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '12px', color: 'rgba(255,255,255,0.4)', fontWeight: 700 }}>
                    <CheckCircle2 size={16} style={{ color: themeColor }} />
                    {id === 'free' ? '$100 Profit Limit' : id === 'pro' ? '$2,000 Profit Limit' : 'Zero Profit Restrictions'}
                </div>
            </div>

            <div style={{ display: 'flex', gap: '12px', marginTop: 'auto' }}>
                <button
                    disabled={id !== 'elite'}
                    style={{
                        flex: 1,
                        height: '56px',
                        background: isElite ? '#00ff88' : 'rgba(255,255,255,0.02)',
                        color: isElite ? 'black' : '#444',
                        borderRadius: '18px',
                        border: isElite ? 'none' : '1px solid rgba(255,255,255,0.05)',
                        fontWeight: 900,
                        fontSize: '12px',
                        textTransform: 'uppercase',
                        cursor: isElite ? 'pointer' : 'not-allowed',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: '10px',
                        boxShadow: isElite ? '0 12px 36px -12px rgba(0, 255, 136, 0.4)' : 'none',
                        transition: 'all 0.2s',
                        letterSpacing: '1.5px'
                    }}
                    className={isElite ? "clone-btn" : ""}
                >
                    {isElite ? 'ACTIVATE PREVIEW' : 'COMING SOON'} {isElite && <ArrowUpRight size={18} strokeWidth={3} />}
                </button>
            </div>

            <div style={{
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                height: '4px',
                background: `linear-gradient(90deg, transparent, ${themeColor}, transparent)`,
                opacity: 0.2
            }} />

            <style>{`
                .membership-card-hover:hover {
                    border-color: ${themeColor}40 !important;
                    transform: translateY(-8px);
                    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8) !important;
                    background: #1a1b21 !important;
                }
                .clone-btn:hover {
                    filter: brightness(1.1);
                    transform: scale(1.02);
                }
            `}</style>
        </div>
    );
};

export const MembershipTab: React.FC = () => {
    return (
        <div style={{
            maxWidth: '1400px',
            margin: '0 auto',
            padding: '0 20px 100px 20px',
            animation: 'fadeIn 0.7s ease-out'
        }}>
            <div style={{
                display: 'flex',
                flexDirection: 'column',
                marginBottom: '60px',
                padding: '60px 0',
                borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
                position: 'relative',
                alignItems: 'flex-start'
            }}>
                <div style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    opacity: 0.03,
                    pointerEvents: 'none',
                    transform: 'translate(40px, -20px)'
                }}>
                    <Dna size={320} strokeWidth={1} />
                </div>

                <div style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '12px',
                    color: '#00ff88',
                    fontSize: '11px',
                    fontWeight: 900,
                    textTransform: 'uppercase',
                    letterSpacing: '4px',
                    marginBottom: '24px'
                }}>
                    PRICING PHILOSOPHY
                    <div style={{ width: '30px', height: '1px', background: '#00ff88', opacity: 0.2 }} />
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: '100%', flexWrap: 'wrap', gap: '32px' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                        <h2 style={{
                            fontSize: '84px',
                            fontWeight: 950,
                            color: 'white',
                            letterSpacing: '-0.04em',
                            lineHeight: '0.9',
                            margin: 0,
                            textTransform: 'uppercase'
                        }}>
                            Membership<br />
                            <span style={{ color: '#00ff88' }}>Plans</span>
                        </h2>
                        <p style={{ fontSize: '20px', color: '#666', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
                            Upgrade your algorithmic edge with advanced strategies and priority execution.
                        </p>
                    </div>

                    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', padding: '0 24px', borderLeft: '1px solid rgba(255, 255, 255, 0.08)' }}>
                            <span style={{ color: '#444', fontSize: '11px', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '2px' }}>Tiers</span>
                            <span style={{ color: 'white', fontSize: '32px', fontWeight: 950, lineHeight: '1' }}>3</span>
                        </div>
                        <div style={{
                            background: 'rgba(251, 191, 36, 0.05)',
                            border: '1px solid rgba(251, 191, 36, 0.1)',
                            padding: '12px 24px',
                            borderRadius: '16px',
                            color: '#fbbf24',
                            fontSize: '11px',
                            fontWeight: 900,
                            textTransform: 'uppercase',
                            letterSpacing: '1px'
                        }}>
                            Global Preview Mode Active
                        </div>
                    </div>
                </div>
            </div>

            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
                gap: '40px',
                width: '100%'
            }}>
                {Object.entries(TIER_POLICIES).map(([id, policy]) => (
                    <PlanCard key={id} id={id} policy={policy} />
                ))}
            </div>

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