import React from 'react';

export default function PicListModal({
  showPicListModal,
  setShowPicListModal,
  myHub,
  usersList
}) {
  if (!showPicListModal || !myHub) return null;

  // Filter PICs assigned to this hub
  const assignedPics = usersList.filter(u => u.role === 'pic' && u.id === myHub.pic_id);

  return (
    <div className="modal-overlay active">
      <div className="modal-content" style={{ maxWidth: '500px', width: '90%' }}>
        <div className="modal-header">
          <h2>
            <i className="fas fa-id-card text-primary" style={{ marginRight: '8px' }}></i> 
            Daftar PIC Lapangan
          </h2>
          <button className="close-btn" onClick={() => setShowPicListModal(false)}>&times;</button>
        </div>
        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: '15px', padding: '10px 0' }}>
          <p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--text-muted)' }}>
            Berikut adalah akun PIC / Surveyor Lapangan yang ditugaskan untuk mengelola dan menyurvei wilayah jangkauan <strong>{myHub.name}</strong>.
          </p>
          
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '10px' }}>
            {assignedPics.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '20px', background: '#f8fafc', borderRadius: '8px', color: '#94a3b8', border: '1px dashed #cbd5e1' }}>
                <i className="fas fa-user-slash" style={{ fontSize: '1.5rem', marginBottom: '8px', display: 'block' }}></i>
                Belum ada akun PIC yang ditugaskan ke Hub ini.
              </div>
            ) : (
              assignedPics.map(pic => (
                <div key={pic.id} style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  gap: '15px', 
                  padding: '15px', 
                  background: 'rgba(59, 130, 246, 0.05)', 
                  border: '1px solid rgba(59, 130, 246, 0.15)', 
                  borderRadius: '8px' 
                }}>
                  <div style={{ 
                    width: '45px', 
                    height: '45px', 
                    borderRadius: '50%', 
                    background: 'var(--primary)', 
                    color: 'white', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    fontWeight: 'bold', 
                    fontSize: '1.1rem' 
                  }}>
                    {pic.full_name ? pic.full_name.charAt(0).toUpperCase() : 'P'}
                  </div>
                  <div style={{ flex: 1 }}>
                    <h4 style={{ margin: '0 0 4px 0', fontSize: '0.95rem', fontWeight: 'bold', color: 'var(--text-main)' }}>{pic.full_name}</h4>
                    <p style={{ margin: 0, fontSize: '0.8rem', color: '#64748b' }}><i className="fas fa-envelope" style={{ marginRight: '6px' }}></i>{pic.email}</p>
                  </div>
                  <span style={{ 
                    padding: '4px 8px', 
                    borderRadius: '4px', 
                    fontSize: '0.7rem', 
                    fontWeight: 'bold', 
                    background: '#dbeafe', 
                    color: '#3b82f6',
                    textTransform: 'uppercase'
                  }}>
                    PIC Surveyor
                  </span>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
