function DebtPanel({ showDebtPanel, setShowDebtPanel, t, userProfile, formatMoney, onAdWatch, onClickerSubmit, onSalaryClaim, lang, Icons }) {
    if (!showDebtPanel || !userProfile || !userProfile.isDebtor) return null;

    const [clickCount, setClickCount] = React.useState(0);
    const [isClicking, setIsClicking] = React.useState(false);
    const [adTimer, setAdTimer] = React.useState(0);
    const [isWatchingAd, setIsWatchingAd] = React.useState(false);

    const config = window.GAME_CONFIG?.debtSystem?.bankerJobs || {};
    const adReward = config.AD_WATCH_REWARD || 5000;
    const clickReward = config.CLICKER_REWARD || 100;
    const dailySalary = config.DAILY_SALARY || 10000;

    const today = new Date().toISOString().split('T')[0];
    const adClaimed = userProfile.lastAdClaim === today;
    const salaryClaimed = userProfile.lastSalaryClaim === today;

    const handleClick = () => {
        setClickCount(prev => prev + 1);
        setIsClicking(true);
        setTimeout(() => setIsClicking(false), 150);
    };

    const handleSubmitClicks = () => {
        if (clickCount <= 0) return;
        onClickerSubmit(clickCount);
        setClickCount(0);
    };

    const handleAdWatch = () => {
        if (adClaimed) return;
        setIsWatchingAd(true);
        setAdTimer(30);
        const interval = setInterval(() => {
            setAdTimer(prev => {
                if (prev <= 1) {
                    clearInterval(interval);
                    setIsWatchingAd(false);
                    onAdWatch();
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);
    };

    const cardStyle = (isDone, baseColor) => ({
        borderRadius: '16px',
        border: `1px solid ${isDone ? 'rgba(255,255,255,0.04)' : baseColor + '33'}`,
        background: isDone ? 'rgba(255,255,255,0.01)' : baseColor + '0a',
        padding: '24px',
        opacity: isDone ? 0.45 : 1,
        transition: 'all 0.3s'
    });

    return (
        <div style={{ position: 'fixed', inset: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', background: 'rgba(2, 6, 23, 0.95)', backdropFilter: 'blur(16px)' }} onClick={(e) => { if (e.target === e.currentTarget) setShowDebtPanel(false); }}>
            <div style={{ width: '100%', maxWidth: '640px', background: '#0f172a', border: '1px solid rgba(244,63,94,0.15)', borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.7)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>

                {/* HEADER */}
                <div style={{ padding: '28px 32px', borderBottom: '1px solid rgba(244,63,94,0.1)', background: 'linear-gradient(to right, rgba(244,63,94,0.08), transparent)', flexShrink: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                            <div style={{ padding: '14px', background: 'linear-gradient(135deg, #be123c, #e11d48)', borderRadius: '16px', boxShadow: '0 8px 25px rgba(225,29,72,0.3)' }}>
                                <Icons.Hammer size={28} className="text-white" />
                            </div>
                            <div>
                                <h3 style={{ fontSize: '28px', fontWeight: 900, color: 'white', margin: 0 }}>{t.debtorJobsTitle || "Banker's Jobs"}</h3>
                                <p style={{ fontSize: '14px', color: '#fb7185', margin: '4px 0 0 0', fontWeight: 500 }}>{t.debtorJobsDesc || 'Pay your debt'}</p>
                            </div>
                        </div>
                        <button onClick={() => setShowDebtPanel(false)} style={{ padding: '10px', background: 'transparent', border: 'none', cursor: 'pointer', borderRadius: '12px' }}>
                            <Icons.XCircle size={28} className="text-slate-400" />
                        </button>
                    </div>

                    {/* DEBT STATUS BAR */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', background: 'rgba(244,63,94,0.08)', border: '1px solid rgba(244,63,94,0.15)', borderRadius: '14px', padding: '14px 20px' }}>
                        <Icons.AlertTriangle size={20} className="text-rose-500" />
                        <div>
                            <p style={{ fontSize: '10px', fontWeight: 900, color: '#fb7185', textTransform: 'uppercase', letterSpacing: '0.15em', margin: 0 }}>{t.debtorStatus || 'Debt Status'}</p>
                            <p style={{ fontSize: '22px', fontWeight: 900, color: '#f43f5e', margin: '2px 0 0 0' }}>{formatMoney(userProfile.totalWealth)}</p>
                        </div>
                    </div>
                </div>

                {/* SCROLLABLE CONTENT */}
                <div style={{ padding: '28px 32px', overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '16px' }}>

                        {/* JOB 1: AD WATCH - LOCKED */}
                        <div style={{ ...cardStyle(true, '#38bdf8'), position: 'relative', overflow: 'hidden' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '14px', filter: 'grayscale(1) opacity(0.5)' }}>
                                <div style={{ width: '48px', height: '48px', background: 'rgba(15,23,42,0.6)', borderRadius: '14px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.05)', color: '#38bdf8' }}>
                                    <Icons.Eye size={24} />
                                </div>
                                <div style={{ flex: 1 }}>
                                    <h5 style={{ fontWeight: 900, color: 'white', fontSize: '16px', margin: 0 }}>📺 {t.jobAdWatch || 'Watch Ad'}</h5>
                                    <p style={{ color: '#94a3b8', fontSize: '13px', margin: '4px 0 0 0' }}>{t.jobAdWatchDesc || '30 sec ad for reward'}</p>
                                </div>
                                <span style={{ fontWeight: 900, fontSize: '18px', color: '#38bdf8' }}>+{formatMoney(adReward)}</span>
                            </div>
                            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(15,23,42,0.6)', backdropFilter: 'blur(2px)' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(2,6,23,0.8)', padding: '8px 16px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)' }}>
                                    <Icons.Lock size={14} className="text-slate-400" />
                                    <span style={{ fontSize: '10px', fontWeight: 900, color: 'white', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{lang === 'TR' ? 'ŞU AN KİLİTLİ' : 'LOCKED FOR NOW'}</span>
                                </div>
                            </div>
                        </div>

                    {/* JOB 2: CLICKER */}
                    <div style={cardStyle(false, '#fbbf24')}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '14px' }}>
                            <div 
                                onClick={() => { if (clickCount * clickReward < Math.abs(userProfile.totalWealth)) handleClick(); }}
                                style={{ width: '48px', height: '48px', background: 'rgba(15,23,42,0.6)', borderRadius: '14px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.05)', color: '#fbbf24', cursor: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 'not-allowed' : 'pointer', transform: isClicking ? 'scale(0.88)' : 'scale(1)', transition: 'transform 0.15s', userSelect: 'none', opacity: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 0.3 : 1 }}>
                                <Icons.Hammer size={24} />
                            </div>
                            <div style={{ flex: 1 }}>
                                <h5 style={{ fontWeight: 900, color: 'white', fontSize: '16px', margin: 0 }}>⚡ {lang === 'TR' ? 'Borç Öde' : 'Clear Debt'}</h5>
                                <p style={{ color: '#fbbf24', fontSize: '12px', margin: '4px 0 0 0', fontWeight: 700 }}>{lang === 'TR' ? 'Tıklayarak borcunu hafiflet!' : 'Click to lighten your debt!'}</p>
                            </div>
                        </div>

                        {/* PROGRESS */}
                        <div style={{ marginBottom: '14px' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
                                <span style={{ fontSize: '12px', fontWeight: 900, color: '#94a3b8' }}>{clickCount} {t.clickCount || 'clicks'}</span>
                                <span style={{ fontSize: '14px', fontWeight: 900, color: '#fbbf24' }}>
                                    {formatMoney(Math.min(Math.abs(userProfile.totalWealth), clickCount * clickReward))}
                                </span>
                            </div>
                            <div style={{ width: '100%', height: '12px', background: '#1e293b', borderRadius: '999px', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.05)' }}>
                                <div style={{ height: '100%', width: `${Math.min(100, (clickCount * clickReward) / Math.abs(userProfile.totalWealth) * 100)}%`, background: 'linear-gradient(to right, #fbbf24, #f59e0b)', borderRadius: '999px', transition: 'width 0.15s ease-out', boxShadow: '0 0 20px rgba(251,191,36,0.3)' }}></div>
                            </div>
                        </div>

                        {/* BUTTONS */}
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
                            <button
                                onClick={handleClick}
                                disabled={clickCount * clickReward >= Math.abs(userProfile.totalWealth)}
                                style={{ padding: '16px', background: 'rgba(251,191,36,0.12)', color: '#fbbf24', borderRadius: '12px', border: '1px solid rgba(251,191,36,0.2)', fontWeight: 900, fontSize: '14px', cursor: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 'not-allowed' : 'pointer', opacity: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 0.3 : 1, transition: 'all 0.2s', textTransform: 'uppercase' }}>
                                {lang === 'TR' ? 'TIKLA!' : 'TAP!'}
                            </button>
                            <button
                                onClick={handleSubmitClicks}
                                disabled={clickCount <= 0}
                                style={{ 
                                    padding: '16px', 
                                    background: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 'linear-gradient(135deg, #10b981, #059669)' : 'rgba(52,211,153,0.12)', 
                                    color: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? 'white' : '#34d399', 
                                    borderRadius: '12px', 
                                    border: '1px solid rgba(52,211,153,0.2)', 
                                    fontWeight: 900, 
                                    fontSize: '14px', 
                                    cursor: clickCount <= 0 ? 'not-allowed' : 'pointer', 
                                    transition: 'all 0.3s', 
                                    boxShadow: clickCount * clickReward >= Math.abs(userProfile.totalWealth) ? '0 10px 20px rgba(16,185,129,0.3)' : 'none', 
                                    textTransform: 'uppercase' 
                                }}>
                                {clickCount * clickReward >= Math.abs(userProfile.totalWealth) 
                                    ? (lang === 'TR' ? 'BORÇ ÖDENDİ!' : 'DEBT PAID!') 
                                    : (t.jobClaim || (lang === 'TR' ? 'TOPLA' : 'CLAIM'))}
                            </button>
                        </div>
                    </div>

                    {/* JOB 3: DAILY SALARY - LOCKED */}
                    <div style={{ ...cardStyle(true, '#34d399'), position: 'relative', overflow: 'hidden' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '14px', filter: 'grayscale(1) opacity(0.5)' }}>
                            <div style={{ width: '48px', height: '48px', background: 'rgba(15,23,42,0.6)', borderRadius: '14px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.05)', color: '#34d399' }}>
                                <Icons.DollarSign size={24} />
                            </div>
                            <div style={{ flex: 1 }}>
                                <h5 style={{ fontWeight: 900, color: 'white', fontSize: '16px', margin: 0 }}>💰 {t.jobDailySalary || 'Daily Salary'}</h5>
                                <p style={{ color: '#94a3b8', fontSize: '13px', margin: '4px 0 0 0' }}>{t.jobDailySalaryDesc || 'Daily minimum wage'}</p>
                            </div>
                            <span style={{ fontWeight: 900, fontSize: '18px', color: '#34d399' }}>+{formatMoney(dailySalary)}</span>
                        </div>
                        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(15,23,42,0.6)', backdropFilter: 'blur(2px)' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(2,6,23,0.8)', padding: '8px 16px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)' }}>
                                <Icons.Lock size={14} className="text-slate-400" />
                                <span style={{ fontSize: '10px', fontWeight: 900, color: 'white', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{lang === 'TR' ? 'ŞU AN KİLİTLİ' : 'LOCKED FOR NOW'}</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    );
}

window.DebtPanel = DebtPanel;