import React from 'react';

export default function ProfileModal({
  showProfileModal,
  setShowProfileModal,
  profile,
  user,
  handleLogout,
  isLoggingOut
}) {
  if (!showProfileModal) return null;

  const getRoleBadge = (role) => {
    switch (role) {
      case 'super_admin':
        return {
          label: 'Super Admin',
          bg: '#fee2e2',
          color: '#ef4444',
          icon: 'fa-shield-halved'
        };
      case 'pic':
        return {
          label: 'Surveyor / PIC Lapangan',
          bg: '#dbeafe',
          color: '#3b82f6',
          icon: 'fa-route'
        };
      case 'hub_head':
        return {
          label: 'Ketua Pengurus Rumah Ibadah',
          bg: '#fef3c7',
          color: '#d97706',
          icon: 'fa-mosque'
        };
      default:
        return {
          label: 'Pengguna',
          bg: '#f1f5f9',
          color: '#475569',
          icon: 'fa-user'
        };
    }
  };

  const badge = getRoleBadge(profile?.role);
  const initials = profile?.full_name ? profile.full_name.substring(0, 2).toUpperCase() : 'US';

  return (
    <div className="modal-overlay active" onClick={() => setShowProfileModal(false)}>
      <div 
        className="modal-content" 
        style={{ maxWidth: '400px', width: '90%', textAlign: 'center', padding: '30px' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="modal-header" style={{ marginBottom: '10px', justifyContent: 'center', position: 'relative' }}>
          <h2 style={{ fontSize: '1.3rem', margin: 0, fontWeight: '700' }}>Profil Pengguna</h2>
          <button 
            className="close-btn" 
            onClick={() => setShowProfileModal(false)}
            style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }}
          >
            &times;
          </button>
        </div>

        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', padding: '10px 0 0 0' }}>
          {/* Avatar Area */}
          <div style={{
            background: 'linear-gradient(135deg, var(--primary), #6366f1)',
            color: 'white',
            width: '80px',
            height: '80px',
            borderRadius: '50%',
            fontSize: '2rem',
            fontWeight: 'bold',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 10px 25px rgba(59, 130, 246, 0.4)',
            marginBottom: '5px'
          }}>
            {initials}
          </div>

          {/* User Details */}
          <div>
            <h3 style={{ margin: '0 0 4px 0', fontSize: '1.25rem', fontWeight: '700', color: '#1e293b' }}>
              {profile?.full_name || 'Pengguna Sinergi Umat'}
            </h3>
            <p style={{ margin: '0 0 12px 0', color: '#64748b', fontSize: '0.9rem' }}>
              {user?.email}
            </p>

            {/* Role Badge */}
            <span style={{
              padding: '6px 14px',
              borderRadius: '20px',
              fontSize: '0.8rem',
              fontWeight: '700',
              background: badge.bg,
              color: badge.color,
              display: 'inline-flex',
              alignItems: 'center',
              gap: '6px',
              boxShadow: `0 2px 8px ${badge.bg}`
            }}>
              <i className={`fas ${badge.icon}`}></i> {badge.label}
            </span>
          </div>

          <hr style={{ width: '100%', border: '0', borderTop: '1px solid #e2e8f0', margin: '5px 0' }} />

          {/* Actions */}
          <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '10px' }}>
            <button
              onClick={handleLogout}
              disabled={isLoggingOut}
              className="btn"
              style={{
                background: 'linear-gradient(135deg, #ef4444, #dc2626)',
                color: 'white',
                border: 'none',
                padding: '12px',
                borderRadius: '12px',
                fontWeight: '600',
                fontSize: '0.95rem',
                cursor: 'pointer',
                boxShadow: '0 4px 12px rgba(239, 68, 68, 0.3)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '8px',
                transition: 'all 0.2s'
              }}
              onMouseOver={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
              onMouseOut={(e) => e.currentTarget.style.transform = 'translateY(0)'}
            >
              <i className="fas fa-sign-out-alt"></i> {isLoggingOut ? 'Keluar...' : 'Keluar dari Akun (Logout)'}
            </button>
            <button
              onClick={() => setShowProfileModal(false)}
              className="btn btn-outline"
              style={{
                background: 'rgba(0,0,0,0.05)',
                color: '#475569',
                border: '1px solid rgba(0,0,0,0.1)',
                padding: '12px',
                borderRadius: '12px',
                fontWeight: '500',
                fontSize: '0.95rem',
                cursor: 'pointer',
                transition: 'background 0.2s'
              }}
              onMouseOver={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.1)'}
              onMouseOut={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.05)'}
            >
              Kembali ke Dasbor
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
