import React from 'react';

export default function UserProvisioningModal({
  showUserModal,
  setShowUserModal,
  usersList,
  profile,
  userFormData,
  setUserFormData,
  handleCreateUser,
  isSubmittingUser,
  handleDeleteUser,
  hubs
}) {
  if (!showUserModal) return null;

  return (
    <div className="modal-overlay active">
      <div className="modal-content" style={{ maxWidth: '900px', width: '90%' }}>
        <div className="modal-header">
          <h2><i className="fas fa-users-cog text-primary"></i> Manajemen Pengguna</h2>
          <button className="close-btn" onClick={() => setShowUserModal(false)}>&times;</button>
        </div>
        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxHeight: '70vh', overflowY: 'auto' }}>
          
          {/* Form Tambah Pengguna */}
          <div style={{ background: '#f8fafc', padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
            <h3 style={{ margin: '0 0 15px 0', fontSize: '1.1rem' }}>Tambah Pengguna Baru</h3>
            <form onSubmit={handleCreateUser} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
              <div className="form-group">
                <label>Email</label>
                <input type="email" className="form-control" value={userFormData.email} onChange={(e) => setUserFormData({...userFormData, email: e.target.value})} required />
              </div>
              <div className="form-group">
                <label>Kata Sandi Sementara</label>
                <input type="text" className="form-control" value={userFormData.password} onChange={(e) => setUserFormData({...userFormData, password: e.target.value})} required minLength="6" />
              </div>
              <div className="form-group">
                <label>Nama Lengkap</label>
                <input type="text" className="form-control" value={userFormData.full_name} onChange={(e) => setUserFormData({...userFormData, full_name: e.target.value})} required />
              </div>
              <div className="form-group">
                <label>Peran (Role)</label>
                <select className="form-control" value={userFormData.role} onChange={(e) => setUserFormData({...userFormData, role: e.target.value, hub_id: ''})} required>
                  <option value="pic">Surveyor / PIC Lapangan</option>
                  <option value="hub_head">Ketua Pengurus Rumah Ibadah</option>
                  <option value="super_admin">Super Admin</option>
                </select>
              </div>
              {(userFormData.role === 'pic' || userFormData.role === 'hub_head') && (
                <div className="form-group" style={{ gridColumn: '1 / -1' }}>
                  <label>Tugaskan ke Rumah Ibadah (Hub)</label>
                  <select className="form-control" value={userFormData.hub_id || ''} onChange={(e) => setUserFormData({...userFormData, hub_id: e.target.value})} required>
                    <option value="">Pilih Rumah Ibadah</option>
                    {hubs.map(h => (
                      <option key={h.id} value={h.id}>{h.name} ({h.type === 'Mosque' ? 'Masjid' : h.type === 'Church' ? 'Gereja' : h.type === 'Temple' ? 'Pura' : h.type === 'Vihara' ? 'Vihara' : 'Lainnya'})</option>
                    ))}
                  </select>
                </div>
              )}
              <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
                <button type="submit" className="btn btn-primary" disabled={isSubmittingUser}>
                  <i className="fas fa-plus"></i> {isSubmittingUser ? 'Menyimpan...' : 'Buat Akun'}
                </button>
              </div>
            </form>
          </div>

          {/* Tabel Pengguna */}
          <div>
            <h3 style={{ margin: '0 0 15px 0', fontSize: '1.1rem' }}>Daftar Pengguna</h3>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
              <thead>
                <tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Nama</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Email</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Role</th>
                  <th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0', textAlign: 'right' }}>Aksi</th>
                </tr>
              </thead>
              <tbody>
                {usersList.length === 0 ? (
                  <tr><td colSpan="4" style={{ textAlign: 'center', padding: '20px', color: '#64748b' }}>Memuat data pengguna...</td></tr>
                ) : (
                  usersList.map(u => (
                    <tr key={u.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
                      <td style={{ padding: '10px', fontWeight: '500' }}>{u.full_name}</td>
                      <td style={{ padding: '10px', color: '#475569' }}>{u.email}</td>
                      <td style={{ padding: '10px' }}>
                        <span style={{ 
                          padding: '4px 8px', borderRadius: '4px', fontSize: '0.8rem', fontWeight: 'bold',
                          background: u.role === 'super_admin' ? '#fee2e2' : u.role === 'pic' ? '#dbeafe' : '#fef3c7',
                          color: u.role === 'super_admin' ? '#ef4444' : u.role === 'pic' ? '#3b82f6' : '#d97706'
                        }}>
                          {u.role.toUpperCase()}
                        </span>
                      </td>
                      <td style={{ padding: '10px', textAlign: 'right' }}>
                        {u.id !== profile?.id && (
                          <button onClick={() => handleDeleteUser(u.id)} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: '#ef4444', borderColor: '#ef4444' }}>
                            <i className="fas fa-trash"></i> Hapus
                          </button>
                        )}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

        </div>
      </div>
    </div>
  );
}
