import React from 'react';
import { Eye, X } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';

/**
 * ImpersonationBanner — renders a fixed banner at the top of the viewport
 * when an Admin is viewing the app as another user. Shows who is being
 * impersonated and provides a button to exit.
 */
export default function ImpersonationBanner() {
  const { impersonating, user, realUser, stopImpersonation } = useAuth();

  if (!impersonating) return null;

  const handleStop = async () => {
    await stopImpersonation();
    // Force page reload to reset all state to admin's view
    window.location.reload();
  };

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: 9999,
      background: 'linear-gradient(90deg, #D97706 0%, #B45309 100%)',
      color: '#FFF',
      padding: '0.5rem 1rem',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '0.75rem',
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: '0.8rem',
      fontWeight: 600,
      boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
    }}>
      <Eye style={{ width: '16px', height: '16px', flexShrink: 0 }} />
      <span>
        Viewing as: <strong>{user?.username}</strong> ({user?.group}, teams: {user?.teams?.join(', ') || 'none'})
        {realUser && <span style={{ opacity: 0.8 }}> — logged in as {realUser.username}</span>}
      </span>
      <button
        onClick={handleStop}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '0.35rem',
          padding: '0.3rem 0.6rem',
          background: 'rgba(255,255,255,0.2)',
          border: '1px solid rgba(255,255,255,0.4)',
          borderRadius: '0.25rem',
          color: '#FFF',
          fontSize: '0.75rem',
          fontWeight: 600,
          cursor: 'pointer',
          transition: 'background 0.15s'
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.35)'}
        onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.2)'}
      >
        <X style={{ width: '12px', height: '12px' }} />
        Exit
      </button>
    </div>
  );
}
