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,
    Dna,
    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';

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 explanation = getStrategyExplanation(profile, botState);

    return (
        <div style={{
            background: '#14151a',
            borderRadius: '28px',
            border: `1px solid ${profile.is_active ? 'rgba(0, 255, 136, 0.1)' : '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)',
            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 ? '#00ff88' : '#222',
                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: 'rgba(255,255,255,0.03)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        border: '1px solid rgba(255, 255, 255, 0.05)',
                        color: isSafe ? '#3498db' : isAggressive ? '#ff3366' : '#00ff88'
                    }}>
                        {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: '#444', 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 && (
                        <button onClick={() => onBacktest(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover">
                            <Activity size={18} />
                        </button>
                    )}
                    <button onClick={() => onEdit(profile)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover">
                        <Settings size={18} />
                    </button>
                    <button onClick={() => onDelete(profile.id)} style={{ width: '38px', height: '38px', borderRadius: '10px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#555', cursor: 'pointer' }} className="icon-btn-hover">
                        <Trash2 size={18} />
                    </button>
                </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: 'rgba(0,255,136,0.05)', color: '#00ff88', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(0,255,136,0.1)', textTransform: 'uppercase' }}>
                        {profile.symbols}
                    </span>
                    <span style={{ background: 'rgba(255,255,255,0.03)', color: '#666', fontSize: '10px', fontWeight: 900, padding: '4px 10px', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.05)', textTransform: 'uppercase' }}>
                        V4.0 Core
                    </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: '#00ff88' },
                    { label: 'PnL (Global)', value: '$0.00', icon: <TrendingUp size={14} />, color: '#3498db' },
                    { label: 'Target', value: `$${config?.riskLimits?.dailyProfitTargetUsd || 0}`, icon: <Target size={14} />, color: '#ffaa00' },
                    { label: 'Latency', value: '5ms', icon: <Cpu size={14} />, color: '#ff3366' }
                ].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'
                    }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#555', 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
                    onClick={() => onToggleExpand(profile.id)}
                    style={{
                        width: '100%',
                        padding: '16px',
                        borderRadius: '20px',
                        background: 'rgba(255,255,255,0.02)',
                        border: '1px solid rgba(255,255,255,0.05)',
                        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: '#00ff88', 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="#555" /> : <ChevronDown size={14} color="#555" />}
                    </div>
                    <p style={{ fontSize: '12px', color: '#929292', margin: 0, fontWeight: 500 }}>
                        {explanation.reason}
                    </p>
                    {isExpanded && explanation.recommendation && (
                        <div style={{
                            marginTop: '12px',
                            padding: '12px',
                            background: 'rgba(251, 191, 36, 0.05)',
                            border: '1px solid rgba(251, 191, 36, 0.1)',
                            borderRadius: '12px'
                        }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#fbbf24', fontSize: '10px', fontWeight: 900, textTransform: 'uppercase', marginBottom: '4px' }}>
                                <Lightbulb size={12} /> Optimization
                            </div>
                            <p style={{ fontSize: '11px', color: '#fbbf24', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
                        </div>
                    )}
                </button>
            </div>

            {/* 6. Action */}
            <div style={{ marginTop: 'auto' }}>
                <button
                    onClick={() => onToggle(profile)}
                    style={{
                        width: '100%',
                        height: '56px',
                        background: profile.is_active ? 'rgba(255,255,255,0.03)' : '#00ff88',
                        color: profile.is_active ? '#929292' : 'black',
                        borderRadius: '18px',
                        border: profile.is_active ? '1px solid rgba(255,255,255,0.05)' : '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 rgba(0, 255, 136, 0.4)',
                        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: rgba(0, 255, 136, 0.2) !important;
                    transform: translateY(-8px);
                    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8) !important;
                    background: #1a1b21 !important;
                }
                .icon-btn-hover:hover {
                    background: rgba(255,255,255,0.08) !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
                        onClick={() => {
                            setShowWizard(false);
                            setEditingProfile(null);
                        }}
                        style={{ background: 'none', border: 'none', color: '#666', 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 style={{
            maxWidth: '1400px',
            margin: '0 auto',
            padding: '0 20px 100px 20px',
            animation: 'fadeIn 0.7s ease-out'
        }}>
            {/* Premium Header - Synchronized with Marketplace/Plans */}
            <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'
                }}>
                    DEPLOYED FLEET
                    <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'
                        }}>
                            My<br />
                            <span style={{ color: '#00ff88' }}>Strategies</span>
                        </h2>
                        <p style={{ fontSize: '20px', color: '#666', marginTop: '24px', maxWidth: '600px', fontWeight: 500, margin: '24px 0 0 0', textAlign: 'left' }}>
                            Monitor and manage your proprietary trading nodes.
                        </p>
                    </div>

                    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
                        <div style={{
                            background: 'rgba(0, 255, 136, 0.05)',
                            border: '1px solid rgba(0, 255, 136, 0.1)',
                            padding: '12px 24px',
                            borderRadius: '16px',
                            color: '#00ff88',
                            fontSize: '11px',
                            fontWeight: 900,
                            textTransform: 'uppercase',
                            letterSpacing: '1px'
                        }}>
                            {botState?.connected ? 'SYSTEMS ONLINE' : 'SYSTEMS DISCONNECTED'}
                        </div>
                        <button
                            onClick={() => setShowWizard(true)}
                            style={{
                                background: 'white',
                                border: 'none',
                                color: 'black',
                                padding: '14px 36px',
                                borderRadius: '16px',
                                cursor: 'pointer',
                                fontWeight: 900,
                                fontSize: '12px',
                                textTransform: 'uppercase',
                                letterSpacing: '1.5px',
                                transition: 'all 0.2s',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '8px'
                            }}
                        >
                            <Plus size={18} strokeWidth={3} /> NEW STRATEGY
                        </button>
                    </div>
                </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: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
                                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#00ff88', boxShadow: '0 0 8px #00ff88' }} />
                                <span style={{ fontSize: '11px', fontWeight: 900, color: '#555', textTransform: 'uppercase', letterSpacing: '2px' }}>Recent Activity</span>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                                {recentAlerts.map((alert, i) => {
                                    const icons: Record<string, string> = { signal: '🚀', pulse: '⏰', error: '⚠️', info: 'ℹ️' };
                                    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: 'rgba(0,0,0,0.2)', borderRadius: '10px' }}>
                                            <span>{icons[alert.type] || 'ℹ️'}</span>
                                            <span style={{ fontSize: '12px', color: '#666', fontWeight: 700, minWidth: '60px' }}>{alert.symbol}</span>
                                            <span style={{ fontSize: '11px', color: '#444', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{alert.message}</span>
                                            <span style={{ fontSize: '10px', color: '#333', fontWeight: 700, whiteSpace: 'nowrap' }}>{timeAgo}</span>
                                        </div>
                                    );
                                })}
                                {recentAlerts.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', fontSize: '12px', fontStyle: 'italic' }}>No activity yet...</div>}
                            </div>
                        </div>

                        {/* Symbol-Specific Volatility */}
                        <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '24px', padding: '24px 28px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
                                <span style={{ fontSize: '16px' }}>📊</span>
                                <span style={{ fontSize: '11px', fontWeight: 900, color: '#555', 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: 'rgba(0,0,0,0.2)', 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: 'rgba(255,255,255,0.05)', borderRadius: '99px', overflow: 'hidden' }}>
                                                <div style={{ width: `${Math.min(Math.abs(change) * 5, 60)}px`, height: '100%', background: change >= 0 ? '#00ff88' : '#ff3366', borderRadius: '99px' }} />
                                            </div>
                                            <span style={{ fontSize: '12px', fontWeight: 900, fontFamily: 'monospace', color: change >= 0 ? '#00ff88' : '#ff3366', minWidth: '55px', textAlign: 'right' }}>
                                                {change >= 0 ? '+' : ''}{change.toFixed(2)}%
                                            </span>
                                        </div>
                                    </div>
                                ))}
                                {symbolVolatility.length === 0 && <div style={{ textAlign: 'center', padding: '16px', color: '#2a2a2a', 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: 'rgba(255,255,255,0.01)',
                        border: '2px dashed rgba(255,255,255,0.03)',
                        borderRadius: '40px',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        textAlign: 'center'
                    }}>
                        <Activity size={60} color="#222" style={{ marginBottom: '24px' }} />
                        <h3 style={{ color: '#444', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '4px' }}>No Engines Deployed</h3>
                        <p style={{ color: '#222', fontSize: '14px', marginTop: '12px', maxWidth: '300px' }}>Your fleet is currently dormant. Deploy your first engine to begin automated dominance.</p>
                        <button
                            onClick={() => setShowWizard(true)}
                            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>
    );
};
