sasa-membership/frontend/src/components/ProfileMenu.tsx

import React, { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { authService, User } from '../services/membershipService';

interface ProfileMenuProps {
  userName: string;
  userRole: string;
  user?: User | null;
  onEditProfile?: () => void;
}

const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole, user, onEditProfile }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [showChangePassword, setShowChangePassword] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const handleLogout = () => {
    authService.logout();
    navigate('/login');
  };

  const handleChangePassword = () => {
    setShowChangePassword(true);
    setIsOpen(false);
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-GB', {
      day: 'numeric',
      month: 'long',
      year: 'numeric'
    });
  };

  const dropdownStyle: React.CSSProperties = {
    position: 'absolute',
    top: '100%',
    right: 0,
    background: 'white',
    border: '1px solid #ddd',
    borderRadius: '4px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
    minWidth: '280px',
    maxWidth: '320px',
    zIndex: 1000,
  };

  const menuItemStyle: React.CSSProperties = {
    display: 'block',
    width: '100%',
    padding: '12px 16px',
    background: 'none',
    border: 'none',
    textAlign: 'left',
    cursor: 'pointer',
    color: '#333',
    fontSize: '14px',
  };

  return (
    <>
      <div style={{ position: 'relative' }} ref={menuRef}>
        <button
          onClick={() => setIsOpen(!isOpen)}
          style={{
            background: 'none',
            border: 'none',
            color: 'white',
            cursor: 'pointer',
            fontSize: '16px',
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
          }}
        >
          <span>{userName}</span>
          <span style={{ fontSize: '12px' }}>▼</span>
        </button>

        {isOpen && (
          <div style={dropdownStyle}>
            {/* Profile Details Section */}
            {user && (
              <div style={{
                padding: '16px',
                borderBottom: '1px solid #eee',
                backgroundColor: '#f9f9f9',
                borderRadius: '4px 4px 0 0'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                  <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 'bold', color: '#333' }}>Profile Details</h4>
                  {onEditProfile && (
                    <button
                      onClick={() => {
                        onEditProfile();
                        setIsOpen(false);
                      }}
                      style={{
                        background: '#0066cc',
                        color: 'white',
                        border: 'none',
                        padding: '4px 8px',
                        borderRadius: '3px',
                        cursor: 'pointer',
                        fontSize: '11px',
                        fontWeight: '500'
                      }}
                    >
                      Edit
                    </button>
                  )}
                </div>
                <div style={{ fontSize: '12px', color: '#555', lineHeight: '1.6' }}>
                  <p style={{ margin: '4px 0' }}><strong>Name:</strong> {user.first_name} {user.last_name}</p>
                  <p style={{ margin: '4px 0' }}><strong>Email:</strong> {user.email}</p>
                  {user.phone && <p style={{ margin: '4px 0' }}><strong>Phone:</strong> {user.phone}</p>}
                  {user.address && <p style={{ margin: '4px 0' }}><strong>Address:</strong> {user.address}</p>}
                  <p style={{ margin: '4px 0' }}><strong>Member since:</strong> {formatDate(user.created_at)}</p>
                </div>
              </div>
            )}

            {/* Menu Items */}
            {userRole === 'super_admin' && (
              <>
                <button
                  style={{ ...menuItemStyle, borderRadius: user ? '0' : '4px 4px 0 0' }}
                  onClick={() => {
                    navigate('/membership-tiers');
                    setIsOpen(false);
                  }}
                >
                  Membership Tiers
                </button>
                <button
                  style={{ ...menuItemStyle, borderTop: '1px solid #eee', borderRadius: '0' }}
                  onClick={() => {
                    navigate('/email-templates');
                    setIsOpen(false);
                  }}
                >
                  Email Templates
                </button>
                <button
                  style={{ ...menuItemStyle, borderTop: '1px solid #eee', borderRadius: '0' }}
                  onClick={() => {
                    navigate('/bounce-management');
                    setIsOpen(false);
                  }}
                >
                  Bounce Management
                </button>
              </>
            )}
            <button
              style={{
                ...menuItemStyle,
                borderRadius: '0',
                borderTop: (userRole === 'super_admin' || user) ? '1px solid #eee' : 'none'
              }}
              onClick={handleChangePassword}
            >
              Change Password
            </button>
            <button
              style={{ ...menuItemStyle, borderRadius: '0 0 4px 4px', borderTop: '1px solid #eee' }}
              onClick={handleLogout}
            >
              Log Out
            </button>
          </div>
        )}
      </div>

      {showChangePassword && (
        <ChangePasswordModal onClose={() => setShowChangePassword(false)} />
      )}
    </>
  );
};

interface ChangePasswordModalProps {
  onClose: () => void;
}

const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ onClose }) => {
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (newPassword !== confirmPassword) {
      setError('New passwords do not match');
      return;
    }

    if (newPassword.length < 8) {
      setError('New password must be at least 8 characters long');
      return;
    }

    setLoading(true);
    setError('');

    try {
      await authService.changePassword({
        current_password: currentPassword,
        new_password: newPassword
      });

      alert('Password changed successfully!');
      onClose();
    } catch (error: any) {
      setError(error.response?.data?.detail || 'Failed to change password');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h3>Change Password</h3>

        <form onSubmit={handleSubmit}>
          <div className="modal-form-group">
            <label>
              Current Password
            </label>
            <input
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              required
            />
          </div>

          <div className="modal-form-group">
            <label>
              New Password
            </label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              required
              minLength={8}
            />
          </div>

          <div className="modal-form-group">
            <label>
              Confirm New Password
            </label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              minLength={8}
            />
          </div>

          {error && (
            <div className="modal-error">
              {error}
            </div>
          )}

          <div className="modal-buttons">
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
              className="modal-btn-cancel"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="modal-btn-primary"
            >
              {loading ? 'Changing...' : 'Change Password'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ProfileMenu;