import React from 'react';

export default function UserProfileCard({ user, onClose, onMessage, onCall, onAddFriend }) {
  const defaultUser = {
    id: 1,
    name: 'Anderson',
    tag: 'Anderson#0001',
    initial: 'A',
    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
    banner: 'linear-gradient(135deg, #ff0000 0%, #0066ff 50%, #ffa500 100%)',
    status: 'online',
    customStatus: 'Building AeThex',
    about: 'Founder of AeThex. Building the future of metaverse communication and decentralized identity.',
    memberSince: 'Jan 2024',
    roles: [
      { name: 'Founder', color: '#ff0000' },
      { name: 'Foundation', color: '#ff0000' },
    ],
    activity: {
      type: 'developing',
      name: 'AeThex Connect',
      details: 'Working on messaging system',
      elapsed: '2h 34m',
    },
  };

  // Merge user prop with defaults
  const userData = { ...defaultUser, ...user };
  
  const statusColors = {
    online: '#3ba55d',
    idle: '#faa61a',
    dnd: '#ed4245',
    offline: '#747f8d',
    'in-game': '#5865f2',
    labs: '#ffa500',
  };

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose?.();
    }
  };

  return (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="user-profile-card">
        <button 
          onClick={onClose}
          style={{
            position: 'absolute',
            top: '8px',
            right: '8px',
            background: 'rgba(0,0,0,0.5)',
            border: 'none',
            color: '#fff',
            width: '24px',
            height: '24px',
            borderRadius: '50%',
            cursor: 'pointer',
            zIndex: 10,
          }}
        >
          ✕
        </button>
        
        <div className="profile-banner" style={{ background: userData.banner || '#2f3136' }}></div>
        
        <div className="profile-avatar-section">
          <div className="profile-avatar-wrapper">
            <div className="profile-avatar" style={{ background: userData.gradient || '#36393f' }}>
              {userData.initial || userData.name?.charAt(0) || '?'}
            </div>
            <div 
              className="profile-status-indicator"
              style={{ background: statusColors[userData.status] || statusColors.offline }}
            ></div>
          </div>
          <div className="profile-badges">
            {(userData.roles || []).slice(0, 3).map((role, idx) => (
              <span key={idx} className="profile-badge" style={{ background: role.color }}>
                {role.name.charAt(0)}
            </span>
          ))}
        </div>
      </div>
      
      <div className="profile-info">
        <h2 className="profile-name">{userData.name}</h2>
        <span className="profile-tag">{userData.tag || userData.name}</span>
        
        {userData.customStatus && (
          <div className="profile-custom-status">
            <span className="status-emoji">💻</span>
            {userData.customStatus}
          </div>
        )}
      </div>
      
      <div className="profile-divider"></div>
      
      {userData.activity && (
        <div className="profile-section">
          <h3 className="section-title">ACTIVITY</h3>
          <div className="activity-card">
            <div className="activity-icon">🔨</div>
            <div className="activity-info">
              <div className="activity-name">{userData.activity.name || userData.activity}</div>
              <div className="activity-details">{userData.activity.details || ''}</div>
              <div className="activity-elapsed">{userData.activity.elapsed || ''}</div>
            </div>
          </div>
        </div>
      )}
      
      {userData.about && (
        <div className="profile-section">
          <h3 className="section-title">ABOUT ME</h3>
          <p className="about-text">{userData.about}</p>
        </div>
      )}
      
      <div className="profile-section">
        <h3 className="section-title">MEMBER SINCE</h3>
        <p className="member-since">{userData.memberSince || 'Jan 2024'}</p>
      </div>
      
      {userData.roles && userData.roles.length > 0 && (
        <div className="profile-section">
          <h3 className="section-title">ROLES — {userData.roles.length}</h3>
          <div className="roles-list">
            {userData.roles.map((role, idx) => (
              <span key={idx} className="role-tag" style={{ borderColor: role.color }}>
                <span className="role-dot" style={{ background: role.color }}></span>
                {role.name}
              </span>
            ))}
          </div>
        </div>
      )}
      
      <div className="profile-section">
        <h3 className="section-title">NOTE</h3>
        <textarea 
          className="note-input" 
          placeholder="Click to add a note"
          defaultValue=""
        />
      </div>
      
      <div className="profile-actions">
        <button className="profile-btn primary" onClick={() => onMessage?.()}>
          💬 Message
        </button>
        <button className="profile-btn" onClick={() => onCall?.()}>
          📞 Call
        </button>
        <button className="profile-btn" onClick={() => onAddFriend?.()}>
          👋 Add Friend
        </button>
      </div>
      </div>
    </div>
  );
}
