import React from 'react';
import {
    Crown,
    Zap,
    Lock,
    CheckCircle2,
    Sparkles,
    Fingerprint,
    Cpu,
    Target,
    Activity,
    ArrowUpRight
} from 'lucide-react';
import { TIER_POLICIES } from '../lib/TierPolicy';
import { PageHeader } from '../components/ui/page-header';
import { Card, CardContent } from '../components/ui/card';
import { Button } from '../components/ui/button';

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 with more bots and more 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 (
        <Card className="h-full rounded-[28px]">
            <CardContent className="flex min-h-[620px] flex-col p-8">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
                    <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                        <div style={{
                            width: 44,
                            height: 44,
                            borderRadius: 14,
                            background: 'var(--card-elevated)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            border: '1px solid var(--border)',
                            color: themeColor
                        }}>
                            {isElite ? <Crown size={22} /> : isPro ? <Zap size={22} fill="currentColor" /> : <Lock size={20} />}
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                            <span style={{ fontSize: 10, fontWeight: 900, color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '2px' }}>
                                Tier level
                            </span>
                            <span style={{ fontSize: 13, fontWeight: 800, color: 'var(--foreground)', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                                {policy.label}
                            </span>
                        </div>
                    </div>
                    {isElite && (
                        <span className="stat-chip" data-tone="success">
                            Peak
                        </span>
                    )}
                </div>

                <div style={{ marginBottom: 24, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                        <h3 style={{ fontSize: 42, fontWeight: 950, color: 'var(--foreground)', letterSpacing: '-0.04em', margin: 0 }}>{price}</h3>
                        <span style={{ fontSize: 14, color: 'var(--muted-foreground)', fontWeight: 900, textTransform: 'uppercase' }}>/mo</span>
                    </div>
                    <div className="stat-chip">
                        <Sparkles size={14} style={{ color: '#fbbf24' }} />
                        Professional grade DNA
                    </div>
                </div>

                <p style={{
                    fontSize: 14,
                    color: 'var(--muted-foreground)',
                    lineHeight: '1.6',
                    marginBottom: 28,
                    textAlign: 'left',
                    flex: 1
                }}>
                    {description}
                </p>

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

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: 'var(--muted-foreground)', fontWeight: 700 }}>
                        <CheckCircle2 size={16} style={{ color: themeColor }} />
                        {id === 'free' ? 'Safe style only' : id === 'pro' ? 'Safe and balanced' : 'All risk styles unlocked'}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: 'var(--muted-foreground)', 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: 12, marginTop: 'auto' }}>
                    <Button
                        disabled={id !== 'elite'}
                        variant={isElite ? 'default' : 'outline'}
                        size="lg"
                        className="flex-1 rounded-[18px] text-[12px] font-black tracking-[1.5px]"
                    >
                        {isElite ? 'ACTIVATE PREVIEW' : 'COMING SOON'}
                        {isElite && <ArrowUpRight size={18} strokeWidth={3} />}
                    </Button>
                </div>

                <div style={{
                    marginTop: 24,
                    height: 4,
                    borderRadius: 999,
                    background: `linear-gradient(90deg, transparent, ${themeColor}, transparent)`,
                    opacity: 0.2
                }} />
            </CardContent>
        </Card>
    );
};

export const MembershipTab: React.FC = () => {
    return (
        <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 20px 100px 20px' }}>
            <PageHeader
                title="Membership Plans"
                description="Upgrade your algorithmic edge with advanced strategies, higher capacity, and priority execution."
            />

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 28 }}>
                <span className="stat-chip">3 tiers</span>
                <span className="stat-chip">Preview pricing</span>
                <span className="stat-chip">Product direction only</span>
            </div>

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