// AdminScopeToggle.js
// Two-state toggle for Admin users: "My Teams" vs "All BUs"
// Controls whether data on Reporting, Compliance, and Exports pages
// is scoped to the admin's assigned teams or shows everything.

import React from 'react';
import { useAuth } from '../contexts/AuthContext';

function AdminScopeToggle() {
    const { isAdmin, adminScope, toggleAdminScope, hasTeams } = useAuth();

    // Only render for Admin users who have teams assigned
    // (if no teams assigned, both modes are identical — no toggle needed)
    if (!isAdmin() || !hasTeams()) return null;

    const isAllMode = adminScope === 'all';

    return (
        <div
            style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '0.4rem',
                padding: '0.25rem 0.5rem',
                borderRadius: '0.375rem',
                background: 'rgba(14, 165, 233, 0.05)',
                border: '1px solid rgba(14, 165, 233, 0.2)',
                fontSize: '0.7rem',
                fontFamily: 'monospace',
                userSelect: 'none',
            }}
        >
            <span style={{ color: '#64748B', fontWeight: '500' }}>Scope:</span>
            <button
                onClick={toggleAdminScope}
                aria-label={`Switch to ${isAllMode ? 'My Teams' : 'All BUs'} view`}
                aria-pressed={isAllMode}
                style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '0.25rem',
                    padding: '0.2rem 0.5rem',
                    borderRadius: '0.25rem',
                    border: 'none',
                    cursor: 'pointer',
                    fontFamily: 'monospace',
                    fontSize: '0.68rem',
                    fontWeight: '600',
                    letterSpacing: '0.02em',
                    transition: 'all 0.15s ease',
                    background: isAllMode ? 'rgba(139, 92, 246, 0.15)' : 'rgba(14, 165, 233, 0.15)',
                    color: isAllMode ? '#8B5CF6' : '#0EA5E9',
                }}
            >
                {isAllMode ? '⊕ All BUs' : '⊙ My Teams'}
            </button>
        </div>
    );
}

export default AdminScopeToggle;