Quiz Admin Panel

{message.text && (

{message.text}

)} {!showCreateForm ? (

📢 Advertisement List

{ads.length === 0 ? (

📢

No ads yet

Create your first advertisement to show before/after quizzes!

) : (

{ads.map(ad => (

{ad.title}

{ad.isActive ? 'Active' : 'Inactive'}

Impressions: {ad.impressions || 0}

{ad.content}

))}

)}

) : (

{editingAd ? 'Edit Advertisement' : 'Create New Advertisement'}

Ad Title (Internal Name) setFormData(prev => ({ ...prev, title: e.target.value }))} placeholder="e.g., Summer Promotion 2024" required />

This is for your reference only, not shown to users

Ad Content

setFormData(prev => ({ ...prev, content: e.target.value }))}
                                    placeholder="Enter your advertisement text here..."
                                    rows="6"
                                    required
                                    style={{ fontFamily: 'inherit' }}
                                />
                                <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '0.3rem' }}>
                                    This is the actual ad text users will see. Keep it concise and engaging!
                                </p>
                            </div>

<div className="form-group">
                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
                                    <input
                                        type="checkbox"
                                        checked={formData.isActive}
                                        onChange={(e) => setFormData(prev => ({ ...prev, isActive: e.target.checked }))}
                                        style={{ accentColor: 'var(--accent-primary)', width: '18px', height: '18px' }}
                                    />
                                    <span style={{ color: 'var(--text-primary)', fontWeight: '600' }}>
                                        Active (show this ad to users)
                                    </span>
                                </label>
                            </div>

<div style={{ display: 'flex', gap: '0.75rem' }}>
                                <button type="submit" className="btn btn-primary">
                                    {editingAd ? 'Update Ad' : 'Create Ad'}
                                </button>
                                <button 
                                    type="button"
                                    className="btn btn-secondary"
                                    onClick={() => {
                                        setShowCreateForm(false);
                                        setEditingAd(null);
                                        setFormData({ title: '', content: '', isActive: true });
                                    }}
                                >
                                    Cancel
                                </button>
                            </div>
                        </form>
                    )}
                </div>
            );
        }

// Global Ad Settings Component
        function GlobalAdSettings({ settings, onUpdate }) {
            const { db } = useFirebase();
            const [formData, setFormData] = useState(settings);
            const [message, setMessage] = useState({ type: '', text: '' });

useEffect(() => {
                setFormData(settings);
            }, [settings]);

return (
                <div className="card">
                    <h2 style={{ fontFamily: 'Anybody, sans-serif', fontSize: '1.5rem', marginBottom: '1.5rem' }}>
                        ⚙️ Global Ad Settings
                    </h2>

{message.text && (
                        <div className={message.type} style={{ marginBottom: '1rem' }}>{message.text}</div>
                    )}

<form onSubmit={saveSettings}>
                        <div style={{ 
                            background: 'var(--bg-tertiary)',
                            padding: '1.5rem',
                            borderRadius: '12px',
                            border: '1px solid var(--border)',
                            marginBottom: '1.5rem'
                        }}>
                            <h3 style={{ fontSize: '1.1rem', marginBottom: '1rem', color: 'var(--accent-primary)' }}>
                                Master Control
                            </h3>
                            
                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', cursor: 'pointer', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
                                <input
                                    type="checkbox"
                                    checked={formData.adsEnabled}
                                    onChange={(e) => setFormData(prev => ({ ...prev, adsEnabled: e.target.checked }))}
                                    style={{ accentColor: 'var(--accent-primary)', width: '24px', height: '24px' }}
                                />
                                <div>
                                    <div style={{ color: 'var(--text-primary)', fontWeight: '700', fontSize: '1.1rem' }}>
                                        Enable Ads Globally
                                    </div>
                                    <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem', marginTop: '0.25rem' }}>
                                        Turn ads on or off for the entire platform (overrides all other settings)
                                    </div>
                                </div>
                            </label>
                        </div>

<div style={{ 
                            background: 'var(--bg-tertiary)',
                            padding: '1.5rem',
                            borderRadius: '12px',
                            border: '1px solid var(--border)',
                            marginBottom: '1.5rem'
                        }}>
                            <h3 style={{ fontSize: '1.1rem', marginBottom: '1rem', color: 'var(--accent-primary)' }}>
                                Display Positions
                            </h3>

<div style={{ display: 'grid', gap: '1rem' }}>
                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', cursor: 'pointer', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
                                    <input
                                        type="checkbox"
                                        checked={formData.showBeforeQuiz}
                                        onChange={(e) => setFormData(prev => ({ ...prev, showBeforeQuiz: e.target.checked }))}
                                        style={{ accentColor: 'var(--accent-primary)', width: '20px', height: '20px' }}
                                    />
                                    <div>
                                        <div style={{ color: 'var(--text-primary)', fontWeight: '600' }}>
                                            Show Before Quiz Starts
                                        </div>
                                        <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
                                            Display ad before user begins taking the quiz
                                        </div>
                                    </div>
                                </label>

<label style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', cursor: 'pointer', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
                                    <input
                                        type="checkbox"
                                        checked={formData.showAfterQuiz}
                                        onChange={(e) => setFormData(prev => ({ ...prev, showAfterQuiz: e.target.checked }))}
                                        style={{ accentColor: 'var(--accent-primary)', width: '20px', height: '20px' }}
                                    />
                                    <div>
                                        <div style={{ color: 'var(--text-primary)', fontWeight: '600' }}>
                                            Show After Quiz Results
                                        </div>
                                        <div style={{ color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
                                            Display ad after score is revealed, before navigation
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

<div className="form-group">
                                <label className="form-label">
                                    Dismiss Delay (seconds)
                                </label>
                                <input
                                    type="number"
                                    className="form-input"
                                    value={formData.dismissDelay}
                                    onChange={(e) => setFormData(prev => ({ ...prev, dismissDelay: parseInt(e.target.value) }))}
                                    min="0"
                                    max="30"
                                    style={{ maxWidth: '200px' }}
                                />
                                <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
                                    How long users must wait before they can dismiss the ad (0 = instant dismiss)
                                </p>
                            </div>
                        </div>

<button type="submit" className="btn btn-primary">
                            Save Global Settings
                        </button>
                    </form>
                </div>
            );
        }

// Ad Targeting Component
        function AdTargeting() {
            const { db } = useFirebase();
            const [targetType, setTargetType] = useState('quiz'); // quiz, group, user
            const [quizzes, setQuizzes] = useState([]);
            const [groups, setGroups] = useState([]);
            const [users, setUsers] = useState([]);
            const [loading, setLoading] = useState(true);
            const [message, setMessage] = useState({ type: '', text: '' });

useEffect(() => {
                loadTargetingData();
            }, []);

const loadTargetingData = async () => {
                try {
                    const [quizzesSnap, groupsSnap, usersSnap] = await Promise.all([
                        db.collection('quizzes').get(),
                        db.collection('groups').get(),
                        db.collection('users').get()
                    ]);

setQuizzes(quizzesSnap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
                    setGroups(groupsSnap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
                    setUsers(usersSnap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
                } catch (error) {
                    console.error('Error loading targeting data:', error);
                }
                setLoading(false);
            };

if (loading) {
                return <div className="loading pulsing">Loading targeting options...</div>;
            }

return (
                <div className="card">
                    <h2 style={{ fontFamily: 'Anybody, sans-serif', fontSize: '1.5rem', marginBottom: '1.5rem' }}>
                        🎯 Ad Targeting Rules
                    </h2>

{message.text && (
                        <div className={message.type} style={{ marginBottom: '1rem' }}>{message.text}</div>
                    )}

<div style={{ 
                        background: 'rgba(0, 153, 255, 0.1)',
                        border: '1px solid var(--accent-secondary)',
                        padding: '1rem',
                        borderRadius: '8px',
                        marginBottom: '2rem'
                    }}>
                        <strong style={{ color: 'var(--accent-secondary)' }}>💡 How It Works:</strong>
                        <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginTop: '0.5rem', lineHeight: '1.6' }}>
                            Control ads at granular levels. Disable ads for specific quizzes, groups, or individual users. 
                            These settings override global settings. Priority: User > Group > Quiz > Global.
                        </p>
                    </div>

<div className="tabs" style={{ marginBottom: '0' }}>
                        <button
                            className={`tab ${targetType === 'quiz' ? 'active' : ''}`}
                            onClick={() => setTargetType('quiz')}
                        >
                            By Quiz ({quizzes.length})
                        </button>
                        <button
                            className={`tab ${targetType === 'group' ? 'active' : ''}`}
                            onClick={() => setTargetType('group')}
                        >
                            By Group ({groups.length})
                        </button>
                        <button
                            className={`tab ${targetType === 'user' ? 'active' : ''}`}
                            onClick={() => setTargetType('user')}
                        >
                            By User ({users.length})
                        </button>
                    </div>

<div className="card" style={{ marginTop: 0, paddingTop: '2rem' }}>
                        {targetType === 'quiz' && (
                            <div>
                                <h3 style={{ fontSize: '1.1rem', marginBottom: '1rem', color: 'var(--accent-primary)' }}>
                                    Quiz-Level Ad Control
                                </h3>
                                {quizzes.length === 0 ? (
                                    <p style={{ color: 'var(--text-secondary)' }}>No quizzes available</p>
                                ) : (
                                    <div style={{ display: 'grid', gap: '0.75rem' }}>
                                        {quizzes.map(quiz => (
                                            <div 
                                                key={quiz.id}
                                                style={{
                                                    padding: '1rem',
                                                    background: 'var(--bg-tertiary)',
                                                    borderRadius: '8px',
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center'
                                                }}
                                            >
                                                <div>
                                                    <div style={{ fontWeight: '600', color: 'var(--text-primary)' }}>
                                                        {quiz.title}
                                                    </div>
                                                    <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
                                                        {quiz.questionCount} questions
                                                    </div>
                                                </div>
                                                <button
                                                    className={`btn ${quiz.adsDisabled ? 'btn-primary' : 'btn-danger'}`}
                                                    onClick={() => toggleAds('quizzes', quiz.id, quiz.adsDisabled)}
                                                    style={{ padding: '0.5rem 1rem', fontSize: '0.85rem' }}
                                                >
                                                    {quiz.adsDisabled ? '✓ Ads Disabled' : 'Disable Ads'}
                                                </button>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}

{targetType === 'group' && (
                            <div>
                                <h3 style={{ fontSize: '1.1rem', marginBottom: '1rem', color: 'var(--accent-primary)' }}>
                                    Group-Level Ad Control
                                </h3>
                                {groups.length === 0 ? (
                                    <p style={{ color: 'var(--text-secondary)' }}>No groups available</p>
                                ) : (
                                    <div style={{ display: 'grid', gap: '0.75rem' }}>
                                        {groups.map(group => (
                                            <div 
                                                key={group.id}
                                                style={{
                                                    padding: '1rem',
                                                    background: 'var(--bg-tertiary)',
                                                    borderRadius: '8px',
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center'
                                                }}
                                            >
                                                <div>
                                                    <div style={{ fontWeight: '600', color: 'var(--text-primary)' }}>
                                                        {group.name}
                                                    </div>
                                                    <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
                                                        {group.members?.length || 0} members
                                                    </div>
                                                </div>
                                                <button
                                                    className={`btn ${group.adsDisabled ? 'btn-primary' : 'btn-danger'}`}
                                                    onClick={() => toggleAds('groups', group.id, group.adsDisabled)}
                                                    style={{ padding: '0.5rem 1rem', fontSize: '0.85rem' }}
                                                >
                                                    {group.adsDisabled ? '✓ Ads Disabled' : 'Disable Ads'}
                                                </button>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}

{targetType === 'user' && (
                            <div>
                                <h3 style={{ fontSize: '1.1rem', marginBottom: '1rem', color: 'var(--accent-primary)' }}>
                                    User-Level Ad Control
                                </h3>
                                {users.length === 0 ? (
                                    <p style={{ color: 'var(--text-secondary)' }}>No users available</p>
                                ) : (
                                    <div style={{ display: 'grid', gap: '0.75rem', maxHeight: '600px', overflowY: 'auto' }}>
                                        {users.map(user => (
                                            <div 
                                                key={user.id}
                                                style={{
                                                    padding: '1rem',
                                                    background: 'var(--bg-tertiary)',
                                                    borderRadius: '8px',
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center'
                                                }}
                                            >
                                                <div>
                                                    <div style={{ fontWeight: '600', color: 'var(--text-primary)' }}>
                                                        {user.displayName}
                                                    </div>
                                                    <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
                                                        {user.email}
                                                    </div>
                                                </div>
                                                <button
                                                    className={`btn ${user.adsDisabled ? 'btn-primary' : 'btn-danger'}`}
                                                    onClick={() => toggleAds('users', user.id, user.adsDisabled)}
                                                    style={{ padding: '0.5rem 1rem', fontSize: '0.85rem' }}
                                                >
                                                    {user.adsDisabled ? '✓ Ads Disabled' : 'Disable Ads'}
                                                </button>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </div>
            );
        }

function UserManagement() {
            const { db } = useFirebase();
            const [users, setUsers] = useState([]);
            const [loading, setLoading] = useState(true);
            const [newUserEmail, setNewUserEmail] = useState('');
            const [newUserRole, setNewUserRole] = useState('user');
            const [message, setMessage] = useState({ type: '', text: '' });

const roles = [
                { value: 'admin', label: 'Admin', description: 'Full access to admin panel' },
                { value: 'quiz_creator', label: 'Quiz Creator', description: 'Can create questions and quizzes' },
                { value: 'teacher', label: 'Teacher', description: 'Can view student performance' },
                { value: 'user', label: 'User', description: 'Standard user access' }
            ];

useEffect(() => {
                loadUsers();
            }, []);

const getRoleColor = (role) => {
                switch(role) {
                    case 'admin': return '#ff3366';
                    case 'quiz_creator': return '#0099ff';
                    case 'teacher': return '#9333ea';
                    case 'user': return '#00ff88';
                    default: return '#a0aec0';
                }
            };

const getRoleBadgeStyle = (role) => ({
                backgroundColor: `${getRoleColor(role)}20`,
                color: getRoleColor(role),
                padding: '0.5rem 1rem',
                borderRadius: '6px',
                fontSize: '0.75rem',
                fontWeight: '700',
                textTransform: 'uppercase'
            });

if (loading) {
                return <div className="loading pulsing">Loading users...</div>;
            }

return (
                <div className="card">
                    <h2 style={{ fontFamily: 'Anybody, sans-serif', fontSize: '1.5rem', marginBottom: '1.5rem' }}>
                        User Management
                    </h2>

{message.text && (
                        <div className={message.type} style={{ marginBottom: '1rem' }}>
                            {message.text}
                        </div>
                    )}

{/* Role Descriptions */}
                    <div style={{ 
                        backgroundColor: 'var(--bg-tertiary)', 
                        padding: '1.5rem', 
                        borderRadius: '8px',
                        marginBottom: '2rem',
                        border: '1px solid var(--border)'
                    }}>
                        <h3 style={{ 
                            fontSize: '1rem', 
                            fontWeight: '700', 
                            color: 'var(--accent-primary)',
                            marginBottom: '1rem',
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em'
                        }}>
                            Role Descriptions
                        </h3>
                        <div style={{ display: 'grid', gap: '0.75rem' }}>
                            {roles.map(role => (
                                <div key={role.value} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                                    <span style={getRoleBadgeStyle(role.value)}>{role.label}</span>
                                    <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
                                        {role.description}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>

{/* Users List */}
                    <div style={{ overflowX: 'auto' }}>
                        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0 0.5rem' }}>
                            <thead>
                                <tr style={{ textAlign: 'left' }}>
                                    <th style={{ padding: '0.75rem', color: 'var(--accent-primary)', fontSize: '0.75rem', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                                        User
                                    </th>
                                    <th style={{ padding: '0.75rem', color: 'var(--accent-primary)', fontSize: '0.75rem', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                                        Email
                                    </th>
                                    <th style={{ padding: '0.75rem', color: 'var(--accent-primary)', fontSize: '0.75rem', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                                        Current Role
                                    </th>
                                    <th style={{ padding: '0.75rem', color: 'var(--accent-primary)', fontSize: '0.75rem', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                                        Change Role
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {users.map(user => (
                                    <tr key={user.id} style={{ backgroundColor: 'var(--bg-tertiary)' }}>
                                        <td style={{ padding: '1rem', color: 'var(--text-primary)', fontWeight: '600' }}>
                                            {user.displayName || 'No name'}
                                        </td>
                                        <td style={{ padding: '1rem', color: 'var(--text-secondary)' }}>
                                            {user.email}
                                        </td>
                                        <td style={{ padding: '1rem' }}>
                                            <span style={getRoleBadgeStyle(user.role || 'user')}>
                                                {user.role || 'user'}
                                            </span>
                                        </td>
                                        <td style={{ padding: '1rem' }}>
                                            <select
                                                className="form-select"
                                                value={user.role || 'user'}
                                                onChange={(e) => updateUserRole(user.id, e.target.value)}
                                                style={{ maxWidth: '200px' }}
                                            >
                                                {roles.map(role => (
                                                    <option key={role.value} value={role.value}>
                                                        {role.label}
                                                    </option>
                                                ))}
                                            </select>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

{users.length === 0 && (
                        <div style={{ textAlign: 'center', padding: '3rem', color: 'var(--text-secondary)' }}>
                            No users found. Users will appear here after they sign up.
                        </div>
                    )}

<div style={{ 
                        marginTop: '2rem', 
                        padding: '1.5rem', 
                        backgroundColor: 'var(--bg-tertiary)',
                        borderRadius: '8px',
                        border: '1px solid var(--border)'
                    }}>
                        <h3 style={{ 
                            fontSize: '1rem', 
                            fontWeight: '700', 
                            color: 'var(--accent-primary)',
                            marginBottom: '1rem',
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em'
                        }}>
                            💡 How to Add New Users
                        </h3>
                        <ol style={{ color: 'var(--text-secondary)', lineHeight: '1.8', paddingLeft: '1.5rem' }}>
                            <li>New users must first create an account through the mobile app or authentication system</li>
                            <li>Once they've signed up, they'll appear in this list with the default "user" role</li>
                            <li>You can then update their role using the dropdown menu</li>
                            <li>Role changes take effect immediately</li>
                        </ol>
                    </div>
                </div>
            );
        }

// Main App Component
        function App() {
            return (
                <FirebaseProvider>
                    <AuthProvider>
                        <MainApp />
                    </AuthProvider>
                </FirebaseProvider>
            );
        }

function MainApp() {
            const { user, userRole, loading, isAdmin } = useAuth();

if (loading) {
                return (
                    <div style={{
                        minHeight: '100vh',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <div className="loading pulsing">Loading...</div>
                    </div>
                );
            }

// Not logged in - show login screen
            if (!user) {
                return <LoginScreen />;
            }

// Logged in but not admin - show unauthorized
            if (!isAdmin) {
                return <UnauthorizedScreen />;
            }

// Admin user - show dashboard
            return <AdminDashboard />;
        }

ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>