import React, { useState } from 'react';
import { config } from '../../config';

const UserMenu = ({ user, onNavigate, onLogout }) => {
  const [showUserMenu, setShowUserMenu] = useState(false);

  return (
    <div style={{ position: 'relative' }}>
      <button
        onClick={() => setShowUserMenu(!showUserMenu)}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          background: '#f8f9fa',
          border: '1px solid #e9ecef',
          borderRadius: '8px',
          padding: '8px 12px',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          color: '#495057',
          transition: 'all 0.2s ease'
        }}
        onMouseEnter={(e) => {
          e.target.style.background = '#e9ecef';
          e.target.style.borderColor = '#dee2e6';
        }}
        onMouseLeave={(e) => {
          e.target.style.background = '#f8f9fa';
          e.target.style.borderColor = '#e9ecef';
        }}
      >
        <div style={{
          width: '32px',
          height: '32px',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontSize: '14px',
          fontWeight: '600'
        }}>
          {(user?.name || user?.username || 'U').charAt(0).toUpperCase()}
        </div>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
            {user?.name || user?.username}
          </div>
          <div style={{ fontSize: '12px', color: '#6c757d' }}>
            {user?.role === 'system' ? '시스템 관리자' :
             user?.role === 'admin' ? '관리자' : '사용자'}
          </div>
        </div>
        <div style={{
          fontSize: '12px',
          color: '#6c757d',
          transform: showUserMenu ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 0.2s ease'
        }}>
          ▼
        </div>
      </button>

      {showUserMenu && (
        <div style={{
          position: 'absolute',
          top: '100%',
          right: 0,
          marginTop: '8px',
          background: 'white',
          border: '1px solid #e2e8f0',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          zIndex: 1050,
          minWidth: '200px'
        }}>
          <div style={{ padding: '8px 0' }}>
            <div style={{ padding: '8px 16px', borderBottom: '1px solid #f1f3f4' }}>
              <div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
                {user?.name || user?.username}
              </div>
              <div style={{ fontSize: '12px', color: '#6c757d' }}>
                {user?.department || user?.role || ''}
              </div>
            </div>

            <button
              onClick={() => {
                window.open(config.tkuserUrl, '_blank');
                setShowUserMenu(false);
              }}
              style={{
                width: '100%',
                padding: '12px 16px',
                border: 'none',
                background: 'none',
                textAlign: 'left',
                cursor: 'pointer',
                fontSize: '14px',
                display: 'flex',
                alignItems: 'center',
                gap: '8px'
              }}
              onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
              onMouseLeave={(e) => e.target.style.background = 'none'}
            >
              ⚙️ 계정 관리 (tkuser)
            </button>

            {(user?.role === 'admin' || user?.role === 'system') && (
              <button
                onClick={() => {
                  onNavigate('system-settings');
                  setShowUserMenu(false);
                }}
                style={{
                  width: '100%',
                  padding: '12px 16px',
                  border: 'none',
                  background: 'none',
                  textAlign: 'left',
                  cursor: 'pointer',
                  fontSize: '14px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}
                onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                onMouseLeave={(e) => e.target.style.background = 'none'}
              >
                🔧 시스템 설정
              </button>
            )}

            <div style={{ borderTop: '1px solid #f1f3f4', marginTop: '4px' }}>
              <button
                onClick={() => {
                  onLogout();
                  setShowUserMenu(false);
                }}
                style={{
                  width: '100%',
                  padding: '12px 16px',
                  border: 'none',
                  background: 'none',
                  textAlign: 'left',
                  cursor: 'pointer',
                  fontSize: '14px',
                  color: '#dc3545',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}
                onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                onMouseLeave={(e) => e.target.style.background = 'none'}
              >
                🚪 로그아웃
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserMenu;